Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Створення та Структурування Таблиць у HTML | Робота з Медіа та Таблицями
Ultimate HTML
course content

Зміст курсу

Ultimate HTML

Ultimate HTML

1. Розуміння веб-розробки
3. Структура HTML-Документа

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

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

Для створення таблиць у 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.html

index.css

index.css

copy

Примітка

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

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

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

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

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

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

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

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

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

Секція 4. Розділ 7

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

course content

Зміст курсу

Ultimate HTML

Ultimate HTML

1. Розуміння веб-розробки
3. Структура HTML-Документа

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

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

Для створення таблиць у 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.html

index.css

index.css

copy

Примітка

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

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

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

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

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

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

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

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

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

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