Вивчайте Створення та структурування таблиць у 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-стилі.

Якщо бажаєте дізнатися більше про CSS, розгляньте можливість пройти курс Основи CSS.