Зміст курсу
Знайомство з HTML
Знайомство з HTML
Таблиці
Таблиці корисні для представлення складних взаємозв'язків шляхом організації вмісту в клітинках. Вони особливо ефективні для відображення табличних даних, таких як розклад транспорту, календарі, нарахування заробітної плати, результати матчів, фінансові операції, меню ресторанів, прайс-листи та інша інформація, яка природно вписується в табличний формат, подібний до Google Таблиць.
Для створення таблиць в HTML ми використовуємо такі основні елементи:
<table>
- визначає таблицю на веб-сторінці;<tr>
- визначає рядок всередині таблиці;<th>
- визначає комірку заголовка в рядку. Зазвичай заголовки виділяються напівжирним шрифтом і вирівнюються по центру;<td>
- визначає стандартну комірку даних у рядку.
Давайте пройдемося по кроках створення таблиці для меню:
Крок 1: Налаштування структури HTML
Почніть зі створення базової структури HTML для вашої сторінки:
Крок 2: Визначення таблиці
Всередині елемента <body>
додайте тег <table>
для визначення таблиці:
Крок 3: Додавання заголовка таблиці (необов'язково)
Якщо ми хочемо додати заголовок до таблиці, ми можемо використати тег <caption>
:
Крок 4: Створення заголовків
Далі ми додамо заголовки в елемент <thead>
. Кожен заголовок визначається за допомогою тегу <th>
:
Крок 5: Заповнення таблиці даними
Ми використовуємо елемент <tbody>
, щоб вкласти рядки таблиці, і теги <td>
, щоб визначити комірки, що містять дані:
Повний код сайту:
Будь ласка, присвятіть хвилинку ретельному вивченню всіх елементів, щоб переконатися, що їхній взаємозв'язок очевидний.
index
index
index
Примітка
За замовчуванням HTML-таблиці не мають певного візуального стилю. Щоб налаштувати зовнішній вигляд таблиці, ми можемо додати стилі CSS в окремому CSS-файлі або в тезі
<style>
у секції<head>
HTML-файлу.
Дякуємо за ваш відгук!