Таблиці

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

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

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

Давайте пройдемося по кроках створення таблиці для меню:

Крок 1: Налаштування структури HTML

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

html

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

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

html

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

Якщо ми хочемо додати заголовок до таблиці, ми можемо використати тег <caption>:

html

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

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

html

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

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

html

Повний код сайту:

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

index.html

index.css

Примітка

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