HTML-таблицы

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

На следующем рисунке показаны компоненты таблицы в HTML.

• Таблица содержит строки и столбцы.
• Каждый столбец может иметь заголовок(ячейку заголовка), которые группируются в заголовке таблицы.
• Каждая строка содержит несколько ячеек.

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

1 Понимание HTML-таблиц

HTML-таблица определяется с помощью элемента <table> , который содержит строки( <tr> ) и ячейки( <td> для ячеек данных и <th> для ячеек заголовков). Такая структура позволяет упорядоченно представлять данные в строках и столбцах.

1.1 Базовая структура таблицы

Вот пример простой HTML-таблицы:

Копировать<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>25</td>
    <td>Los Angeles</td>
  </tr>
</table>

В этом примере:

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

2 заголовка таблицы

Заголовки таблиц создаются с помощью элемента <th> и обычно используются для маркировки столбцов или строк, предоставляя контекст для данных.

2.1 Заголовки столбцов

Заголовки столбцов размещаются в первой строке таблицы:

Копировать<tr>
  <th>Name</th>
  <th>Age</th>
  <th>City</th>
</tr>

Вот полный пример использования элементов <tr> , <th> и <td> для создания простой таблицы со строкой заголовка и строкой данных, где первая ячейка в строке данных использует <th> в качестве заголовка строки:

2.2 Заголовки строк

Заголовки строк можно разместить в первой ячейке каждой строки:

Копировать<tr>
  <th>Alice</th>
  <td>30</td>
  <td>New York</td>
</tr>

Вот полный пример использования элементов <tr> , <th> и <td> для создания простой таблицы со строкой заголовка и строкой данных, где первая ячейка в строке данных использует <th> в качестве заголовка строки:

Копировать <style>
    table {
      width: 50%;
      border-collapse: collapse;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: left;
    }
    th {
      background-color: #f4f4f4;
    }
  </style>

  <table>
    <thead>
      <tr>
        <th>Person</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Alice</th>
        <td>30</td>
        <td>New York</td>
      </tr>
      <tr>
        <th>Bob</th>
        <td>25</td>
        <td>Los Angeles</td>
      </tr>
      <tr>
        <th>Charlie</th>
        <td>35</td>
        <td>Chicago</td>
      </tr>
    </tbody>
  </table>

3 объединяющих строки и столбцы

Чтобы объединить ячейки в нескольких строках или столбцах, используйте атрибуты rowspan и colspan .

3.1. Охват столбцов с помощью colspan

Атрибут colspan позволяет ячейке охватывать несколько столбцов:

Копировать<tr>
  <td colspan="2">Merged Cell</td>
  <td>Regular Cell</td>
</tr>

Вот полный пример, демонстрирующий использование <td colspan="2"> для объединения двух столбцов в строке:

Копировать <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="2">Merged Cell</td>
        <td>Regular Cell</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>

3.2 Объединение строк с помощью rowspan

Атрибут rowspan позволяет ячейке охватывать несколько строк:

Копировать<tr>
  <td rowspan="2">Merged Cell</td>
  <td>Regular Cell</td>
</tr>
<tr>
  <td>Regular Cell</td>
</tr>

4. Группировка содержимого таблицы

HTML предоставляет элементы для группировки содержимого таблицы, что повышает читаемость и доступность.

4.1 Головка, корпус и ножка стола

Для группировки разделов таблицы используйте следующие элементы:

• <thead> : Группирует содержимое заголовка.
• <tbody> : Группирует содержимое тела.
• <tfoot> : Группирует содержимое нижнего колонтитула.

Пример:

Копировать<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">End of Table</td>
    </tr>
  </tfoot>
</table>

Использование <thead> , <tbody> и <tfoot> помогает организовать структуру таблицы, упрощая ее стилизацию и управление.

5 таблиц укладки

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

5.1 Добавление границ

Копироватьtable, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Это добавит сплошную границу к таблице, строкам и ячейкам и предотвратит перекрытие границ путем их схлопывания.

5.2 Настройка заполнения и выравнивания

Копироватьth, td {
  padding: 10px;
  text-align: center;
}

Отступ добавляет пространство внутри ячеек, а text-align центрирует содержимое.

5.3 Добавление цветов строк

Копироватьtr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

Этот CSS-код применяет чередующиеся цвета строк для лучшей читаемости и подсвечивает строку при наведении на нее курсора.

6 адаптивных таблиц

Адаптивные таблицы адаптируются к экранам разных размеров. Вы можете сделать таблицы прокручиваемыми на экранах меньшего размера, поместив их в контейнер:

Копировать<div style="overflow-x: auto;">
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>New York</td>
    </tr>
  </table>
</div>

Для более развитой адаптивности используйте CSS-фреймворки, такие как Bootstrap, которые предоставляют адаптивные классы таблиц.

7 доступных столов

Чтобы сделать таблицы доступными для программ чтения с экрана, используйте следующие методы:

• Атрибут области действия: используйте атрибут scope в <th> , чтобы указать, применяется ли он к строке или столбцу.
• Подпись: Добавьте <caption> чтобы описать назначение таблицы.

Копировать<table>
  <caption>Employee Data</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">City</th>
    </tr>
  </thead>
</table>

Учебные пособия по HTML-таблицам

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

• Границы HTML-таблиц
• Заголовок HTML-таблицы
• Группа столбцов HTML-таблицы
• Диапазон столбцов HTML-таблицы
• Заголовок HTML-таблицы для нескольких столбцов
• Диапазон строк HTML-таблицы
• Ширина столбца HTML-таблицы
• Расстояние между ячейками HTML-таблицы

Заключение

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