Вивчайте Створення та структурування таблиць у HTML | HTML-Форми та Введення Користувача

Свайпніть щоб показати меню

Таблиці допомагають представляти структуровані дані, такі як розклади, календарі, фінансові записи, меню та прайс-листи. HTML надає кілька елементів для створення таблиць.

Основні елементи таблиці:

<table>: контейнер таблиці;
<tr>: рядок;
<th>: заголовочна комірка (жирний шрифт, вирівнювання по центру);
<td>: звичайна комірка з даними.

Нижче покроково буде створено просту таблицю меню.

Крок 1: Створення HTML-структури

Почніть зі створення базової HTML-структури сторінки:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

Крок 2: Визначення таблиці

Всередині елемента <body> додайте тег <table>, щоб визначити таблицю:

<table>
  <!-- Table content will go here -->
</table>

Крок 3: Додавання підпису до таблиці (необов'язково)

Якщо потрібно додати заголовок до таблиці, використовуйте тег <caption>:

<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

Крок 4: Створення заголовків таблиці

Далі додайте заголовки таблиці всередині елемента <thead>. Кожен заголовок визначається за допомогою тега <th>:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <!-- Table content will go here -->
</table>

Крок 5: Заповнення таблиці даними

Використовуйте елемент <tbody>, щоб обгорнути рядки таблиці, а теги <td> — для визначення комірок із даними:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>

Повний код

Будь ласка, приділіть час уважному вивченню всіх елементів, щоб їх взаємозв’язки були зрозумілими.

index.html

index.css

Примітка

За замовчуванням HTML-таблиці не мають специфічного візуального стилю. Щоб налаштувати вигляд таблиці, додайте CSS-стилі у окремий CSS-файл або у тег <style> у секції <head> HTML-файлу.

Однак наразі немає потреби заглиблюватися у CSS, оскільки основна увага приділяється лише HTML. Якщо бажаєте побачити, як виглядає таблиця без CSS-стилізації, можна видалити рядок 4: <link rel="stylesheet" href="index.css" />, який імпортує CSS-стилі.

1. Який HTML-елемент використовується для визначення таблиці на веб-сторінці?

2. Який HTML-елемент використовується для визначення рядка в таблиці?

3. Яке призначення елемента `<th>` у HTML-таблиці?

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 20

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат