HTML-таблицы: создание и структурирование данных

Введение

HTML-таблицы используются для отображения данных в структурированном, табличном формате, состоящем из строк и столбцов. Это необходимо для наглядного и организованного представления такой информации, как сравнение продуктов, финансовые отчеты или расписания.

В этой лабораторной работе вы изучите основные строительные блоки HTML-таблицы. Вы начнете с создания базовой структуры таблицы и постепенно добавите строки, заголовки и ячейки данных для построения полноценной, функциональной таблицы.

Создайте тег table для структуры таблицы

На этом шаге вы создадите основной контейнер для вашей таблицы. Тег <table> является корневым элементом любой HTML-таблицы и включает в себя все остальные элементы, связанные с таблицей.

Сначала настроим базовую структуру HTML-документа. В файловом менеджере слева найдите и откройте файл index.html, расположенный в директории ~/project.

Добавьте следующий шаблонный код в index.html. Этот код определяет стандартный документ HTML5 и включает пустой элемент <table> внутри <body>.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

После добавления кода вы можете нажать на вкладку Web 8080 в верхней части интерфейса, чтобы просмотреть вашу страницу. Пока вы ничего не увидите, так как таблица пуста, но это подтверждает, что файл обслуживается корректно.

Добавьте теги tr для строк таблицы

На этом шаге вы добавите строки в вашу таблицу. Каждая горизонтальная строка в таблице определяется тегом <tr>, который расшифровывается как "table row" (строка таблицы). Все содержимое внутри строки, такое как заголовки или ячейки данных, должно быть помещено внутрь элемента <tr>.

Давайте добавим две строки в нашу таблицу. Первая строка в конечном итоге будет содержать заголовки столбцов, а вторая — данные.

Измените файл index.html, чтобы включить два элемента <tr> внутри тега <table>, следующим образом:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr></tr>
      <tr></tr>
    </table>
  </body>
</html>

Сохраните файл. Если вы проверите вкладку Web 8080, вы по-прежнему не увидите никаких видимых изменений, поскольку строки пока не содержат никакого содержимого или границ.

Вставьте теги th для ячеек заголовка

На этом шаге вы определите ячейки заголовка для вашей таблицы. Ячейки заголовка создаются с помощью тега <th>, который расшифровывается как "table header" (заголовок таблицы). Эти теги помещаются внутрь элемента <tr> и обычно отображаются как полужирный, центрированный текст, отличая их от обычных ячеек данных.

Давайте добавим два заголовка в первую строку нашей таблицы: "Name" (Имя) и "Age" (Возраст).

Обновите файл index.html, добавив два элемента <th> внутрь первого тега <tr>:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr></tr>
    </table>
  </body>
</html>

Теперь, если вы переключитесь на вкладку Web 8080, вы увидите отображаемые заголовки "Name" и "Age".

Используйте теги td для ячеек данных

На этом шаге вы добавите фактические данные в вашу таблицу. Стандартные ячейки данных создаются с помощью тега <td>, который расшифровывается как "table data" (данные таблицы). Эти теги помещаются внутрь элемента <tr> и содержат информацию, соответствующую заголовкам столбцов.

Давайте добавим строку данных для человека по имени "Alice" (Алиса), которому "30" лет. Эти данные пойдут во вторую строку нашей таблицы.

Обновите файл index.html, добавив два элемента <td> внутрь второго тега <tr>:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

Сохраните файл и проверьте вкладку Web 8080. Теперь вы увидите данные "Alice" и "30", отображаемые во второй строке и выровненные под соответствующими заголовками.

Добавьте атрибут border к таблице для видимости

На этом шаге вы сделаете структуру таблицы видимой. По умолчанию HTML-таблицы отображаются без границ. Чтобы быстро добавить границу для визуализации, вы можете использовать атрибут border в теге <table>.

Давайте добавим границу толщиной в 1 пиксель к нашей таблице. Измените открывающий тег <table> в index.html, добавив border="1".

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

После сохранения файла обновите вкладку Web 8080. Теперь вы увидите полную таблицу с видимыми границами вокруг таблицы и каждой ячейки, что наглядно демонстрирует структуру строк и столбцов. Хотя атрибут border прост, современный веб-дизайн использует CSS для стилизации, который предоставляет гораздо больше контроля и гибкости.

Резюме

Поздравляем! Вы успешно создали базовую HTML-таблицу.

В этой лабораторной работе вы научились:

Использовать тег <table> для создания контейнера таблицы.
Использовать тег <tr> для определения строк таблицы.
Использовать тег <th> для создания ячеек заголовков столбцов.
Использовать тег <td> для добавления ячеек данных.
Добавлять атрибут border для обеспечения видимости структуры таблицы.

Это основные элементы для отображения любых табличных данных на веб-странице. Теперь вы можете использовать эту основу для создания более сложных и стилизованных таблиц.