Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Таблиці | Медіа та Таблиці
Знайомство з HTML
course content

Зміст курсу

Знайомство з HTML

Знайомство з HTML

1. Веб Розробка
3. Структура Документа
4. Медіа та Таблиці
5. Форми

bookТаблиці

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html

index

css

index

js

index

copy

Примітка

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

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

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

Виберіть правильну відповідь

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

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

Виберіть правильну відповідь

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

Яке призначення елемента <th> в таблиці HTML?

Виберіть правильну відповідь

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

Як ми можемо покращити це?

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

Секція 4. Розділ 8
some-alt