Начало работы с таблицами HTML

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

Создание HTML-таблицы

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

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

Это создаст таблицу с двумя строками и тремя столбцами, в каждой ячейке будет отображаться ее содержимое.

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

Чтобы добавить новые строки в таблицу, нам просто нужно создать новый <tr>тег. Чтобы добавить новые ячейки в таблицу, мы можем создать новый <td>тег внутри существующего <tr>тега. Вот пример таблицы с четырьмя строками и тремя столбцами:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
  <tr>
    <td>Cell 7</td>
    <td>Cell 8</td>
    <td>Cell 9</td>
  </tr>
  <tr>
    <td>Cell 10</td>
    <td>Cell 11</td>
    <td>Cell 12</td>
  </tr>
</table>

Это создаст таблицу с четырьмя строками и тремя столбцами.

Стилизация таблиц HTML

HTML-таблицы можно стилизовать с помощью CSS, чтобы изменить их внешний вид. Некоторые из наиболее распространенных свойств CSS, используемых для стилей таблиц, включают border, paddingи background-color. Вот пример оформления таблицы с помощью рамки и цвета фона:

table {
  border: 1px solid black;
  background-color: #f2f2f2;
}
td {
  padding: 8px;
}

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

Делаем таблицы адаптивными и удобными для мобильных устройств

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

table {
  border: 1px solid black;
  background-color: #f2f2f2;
}

td {
  padding: 8px;
}

@media only screen and (max-width: 600px) {
  table {
    display: block;
  }
  td {
    display: block;
  }
}

Это приведет к изменению макета таблицы с фиксированного макета на адаптивный макет, когда ширина экрана меньше 600 пикселей.

Добавление подписей и резюме

Еще один важный аспект использования HTML-таблиц — сделать их доступными для невизуальных пользователей. Один из способов сделать это — добавить в таблицу заголовки и резюме. Тег <caption>может использоваться для добавления заголовка к таблице, описывающего содержимое таблицы. Вот пример того, как добавить заголовок к таблице:

<table>
  <caption>Sales by Month</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$1500</td>
  </tr>
</table>

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

<table summary="Sales by Month">
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$1500</td>
  </tr>
</table>

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

Плохо ли использование таблиц?

Нет! Таблицы являются важной частью HTML. Они необходимы для отображения табличных данных семантическим и доступным способом. На заре Интернета, до появления CSS, таблицы предлагали средства для компоновки дизайна веб-страниц, но это не было их предполагаемой целью. К счастью, эти дни остались далеко позади (ну, в основном, но для некоторых почтовых клиентов!), и теперь мы можем сосредоточиться на истинной — и чрезвычайно важной — роли HTML-таблиц для отображения данных.

Заключение

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