Создание таблиц в 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:

Добавить комментарий