Створення та Структурування Таблиць у HTML

Таблиці корисні для представлення складних взаємозв'язків шляхом організації контенту у комірки. Вони особливо ефективні для відображення табличних даних, таких як розклади транспорту, календарі, нарахування заробітної плати, результати матчів, фінансові транзакції, меню ресторанів, прайс-листи та інша інформація, яка природно вписується у табличний формат, подібно до Google Sheets.

Для створення таблиць у HTML використовуйте наступні основні елементи:

<table>: визначає таблицю на веб-сторінці;
<tr>: визначає рядок у таблиці;
<th>: визначає заголовкову комірку у рядку. Заголовкові комірки зазвичай виділені жирним і вирівняні по центру;
<td>: визначає стандартну комірку з даними у рядку.

Розглянемо кроки створення таблиці для меню:

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

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


html
9
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

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

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


html
9
1
2
3
<table>
  <!-- Table content will go here -->
</table>

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

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


html
9
1
2
3
4
<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

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

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


html
99
1
2
3
4
5
6
7
8
9
10
11
<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>, щоб визначити комірки з даними:


html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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

<!DOCTYPE html>

<head>

</head>

<body>

<table>

New Menu

</caption>

<thead>

<tr>

<th>Category</th>

<th>Price</th>

</tr>

</thead>

<tbody>

<tr>

<td>Appetizer</td>

<td>Garlic Shrimps</td>

</tr>

<tr>

<td>Pasta</td>

<td>Lobster Linguine Noodles</td>

</tr>

Примітка

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

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

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

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