Основы таблиц
Часть раздела Fundamentals путешествия по HTML на Coddy — урок 48 из 60.
В HTML таблица — это способ организации данных в виде строк и столбцов. Таблицы обычно используются для отображения данных в структурированном формате, таком как расписания, статистика или любой другой тип информации, которую можно представить в виде сетки. Для создания таблицы используется тег <table> вместе с другими тегами, такими как <tr> для строк таблицы, <td> для данных таблицы (ячеек) и <th> для заголовков таблицы.
Вот базовая структура HTML-таблицы:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table><table>: Тег, который определяет таблицу.
<tr>: Тег, который определяет строку таблицы.
<th>: Тег, который определяет ячейку заголовка. Ячейки заголовков обычно используются для названий столбцов или строк и по умолчанию отображаются жирным шрифтом.
<td>: Тег, который определяет стандартную ячейку в таблице.
Вот как эта таблица будет отображаться в браузере:
| Заголовок 1 | Заголовок 2 |
|---|---|
| Строка 1, Ячейка 1 | Строка 1, Ячейка 2 |
| Строка 2, Ячейка 1 | Строка 2, Ячейка 2 |
В этом примере у нас есть таблица с двумя строками и двумя столбцами. Первая строка содержит ячейки заголовков, а последующие строки содержат обычные ячейки данных. Эта структура создает простую сеточную разметку, которую легко читать и понимать.
Задание
ЛегкоСоздайте HTML-документ, который включает таблицу со следующей структурой:
- Тег
<table>для определения таблицы. - Строка таблицы (
<tr>) для заголовка с двумя ячейками заголовка (<th>). Первая ячейка заголовка должна содержать "Name", а вторая — "Age". - Строка таблицы (
<tr>) с двумя ячейками данных (<td>). Первая ячейка должна содержать "John", а вторая — "30". - Еще одна строка таблицы (
<tr>) с двумя ячейками данных (<td>). Первая ячейка должна содержать "Jane", а вторая — "25".
Шпаргалка
HTML-таблицы организуют данные в строки и столбцы с помощью тега <table>:
<table>: Определяет таблицу<tr>: Определяет строку таблицы<th>: Определяет ячейку заголовка (по умолчанию отображается жирным шрифтом)<td>: Определяет стандартную ячейку данных
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<!-- Напишите код здесь -->
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Fundamentals
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header
Фото профиляСекция «Обо мне»Ссылки на социальные сети2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция HeaderСекция деталей мероприятияФорма регистрацииСекция Footer9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2