Создание таблиц в HTML
Development | Комментировать запись
Таблица – это набор данных, организованный по строкам и столбцам. В таблицах удобно отображается связь между типами данных (например, между продуктами и их стоимостью, занятостью и датами работы, рейсами и временем отправления). В этом мануале вы узнаете, как с помощью HTML создать таблицу, добавить желаемое количество строк и столбцов и внести заголовки, чтобы упростить чтение таблицы.
Требования
- Базовые навыки работы с HTML. Если вы не знакомы с основами HTML, вы можете просмотреть эти руководства:
- Файл index.html для создания таблиц HTML.
Основы HTML-таблиц
HTML-таблица создается с помощью открывающего и закрывающего тегов <table> и </table>. Данные внутри этих тегов будут организованы в строки и столбцы с помощью тегов <tr> (table row) и <td> (table data).
Теги <tr> используются для создания строк данных. Внутри открывающих и закрывающих тегов <tr> используются теги <td> – они нужны для организации данных в столбцы.
В качестве примера давайте создадим таблицу с двумя строками и тремя столбцами:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
Чтобы на практике понять, как работают таблицы HTML, вставьте приведенный выше фрагмент кода в файл index.html (или другой файл HTML, который вы используете для выполнения примеров из этого мануала).
Сохраните файл и откройте его в браузере, чтобы проверить результаты. Если вы не умеете работать с оффлайн-файлами в браузере, обратитесь к последнему разделу мануала Основы работы с HTML-элементами.
На вашей веб-странице должна быть таблица с тремя столбцами и двумя строками.
Чтобы добавить в таблицу новую строку, вставьте выделенный элемент <tr> в конец таблицы:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
Сохраните файл и перезапустите его в браузере. В таблице появится новая строка данных.
Чтобы создать новый столбец, нужно добавить еще один элемент <td> в каждый элемент <tr>:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
</table>
Сохраните файл и обновите страницу в браузере. В вашей таблице появится четвертый столбец.
Добавление границ таблицы
Как правило, таблицы следует стилизовать с помощью CSS. Если вы не знаете CSS, вы можете оформить таблицу с помощью HTML, добавив атрибуты к элементу <table>. Например, с помощью атрибута border можно добавить границы:
<table border="1">
<tr>
<td>Row 1</td>
<td>Row 2</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 1</td>
<td>Row 2</td>
<td>Row 3</td>
</tr>
</table>
Добавьте выделенный атрибут border в свою таблицу и проверьте результаты в браузере (также вы можете очистить свой файл index.html и вставить приведенный выше фрагмент кода). Сохраните файл и загрузите его в браузере. Теперь каждая ячейка в вашей таблице будет окружена границей.
Добавление заголовков к строкам и столбцам
Чтобы упростить чтение таблиц, к строкам и столбцам можно добавлять заголовки. Также заголовки помогают пользователям скринридеров перемещаться по данным таблицы, что делает ваши таблицы более доступными. Заголовки таблиц автоматически выделяются полужирным шрифтом и центрируются, чтобы визуально отличаться от данных таблицы.
Заголовки добавляются с помощью открывающих и закрывающих тегов <th>. Чтобы добавить в таблицу заголовки для столбцов, нужно вставить новый элемент <tr> в самое начало таблицы и поместить в него имена столбцов с помощью тегов <th>.
Очистите файл index.html и добавьте строку заголовков для столбцов с помощью следующего кода:
<table border="1">
<tr>
<th></th>
<th>Column Header 1</th>
<th>Column Header 2</th>
<th>Column Header 3</th>
</tr>
</table>
Сохраните файл index.html и перезагрузите его в браузере. Вы должны получить таблицу, которая содержит только строку с заголовками столбцов.
Обратите внимание, что заголовок первого столбца мы оставили пустым. Вы можете добавить сюда какой-то заголовок, если хотите.
Чтобы добавить заголовки для строк, нужно поместить открывающие и закрывающие теги <th> в качестве первого элемента в каждом элементе <tr>.
Давайте добавим в таблицу заголовки строк и данные, поместив выделенный ниже фрагмент кода под уже существующим кодом в файле index.html:
<table border="1">
<tr>
<th></th>
<th>Column Header 1</th>
<th>Column Header 2</th>
<th>Column Header 3</th>
</tr>
<tr>
<th>Row Header 1</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header 2</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header 3</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
Сохраните файл index.html и перезагрузите его в браузере. Вы должны получить таблицу с тремя столбцами и тремя строками, где каждая строк аи столбец имеет свой заголовок.
Заключение
В этом мануале вы научились создавать таблицы HTML, добавлять в них новые строки и столбцы, а также создавать заголовки для строк и столбцов.
Если вы хотите узнать больше о HTML, вы можете ознакомиться с нашей серией руководств Создание сайта с помощью HTML. Чтобы узнать, как использовать CSS для стилизации HTML элементов (включая таблицы), читайте серию Создание сайта с помощью CSS.
Tags: HTML