Зміст курсу

Ultimate HTML

1. Розуміння веб-розробки

Ласкаво просимо до HTML та веб-розробки Що таке Інтернет?Як Працює Інтернет?Розуміння Принципів Роботи Вебсайтів Пояснення фронтенд і бекенд розробки

2. Теги та Атрибути HTML

Розуміння Тегів HTML Робота з Атрибутами HTML Розуміння парних і одиночних тегів у HTML Розмітка Тексту та Форматування в HTML Завдання: Створіть Свій Перший Абзац Вебсторінки Завдання: Створення Веб-Сторінки Особистого Представлення Завдання: Створення Веб-Сторінки Для Демонстрації Фільмів Використання Посилань і Кнопок у HTML Завдання: Створення посилань на популярні вебсайти Перевірка HTML-Коду на Відповідність Найкращим Практикам

3. Структура HTML-Документа

Секрети Добре Структурованих Веб-Сторінок Розуміння Структури HTML-Документа Роль Секції Head у Документі Керування Потоком Документа та Макетом Завдання: Правильне Структурування HTML-Документа Використання Інструментів Розробника Для Інспекції Та Налагодження HTML

4. Робота з Медіа та Таблицями

Додавання Зображень у HTML Завдання: Робота із Зображеннями Робота з Клікабельними Зображеннями, Підписами та Оптимізацією Розуміння векторної та растрової графіки Вбудовування Аудіо та Відео для Насиченого Медіаконтенту Завдання: Вбудовування Аудіо та Відео в HTML Створення та Структурування Таблиць у HTML Завдання: Створення Функціональної HTML-Таблиці

5. HTML-Форми та Введення Користувача

Вступ до HTML-форм Основи Створення Форм у HTML Використання міток для покращення доступності форм Покращення Форм за Допомогою Атрибутів Введення Дослідження Різних Типів Полів Введення в HTML Завдання: Створення Форми з Полями Введення та Мітками Робота з елементом Textarea для введення багаторядкового тексту Використання елемента Select для випадаючих меню Використання елемента Datalist для попередньо визначених підказок введення Групування Елементів Форми для Кращої Структури

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

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

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

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

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

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

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

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

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

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

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

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