Тег table в HTML

Тег <table> – cоздавайте HTML-таблицу быстро и легко

Элемент <table> используется вместе с дочерними элементами <tr>, <td>, <th> для добавления табличных данных в документ HTML.

<table>
  <caption>Три самых популярных библиотеки JavaScript</caption>
  <thead>
    <tr>
      <th>Library</th>
      <th>jQuery</th>
      <th>Bootstrap</th>
      <th>Modernizr</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Market Share</td>
      <td>95.9%</td>
      <td>27.1%</td>
      <td>12.6%</td>
    </tr>
    <tr>
      <td>Absolute Usage</td>
      <td>77.6%</td>
      <td>22.0%</td>
      <td>10.2%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4"><em>Market Share</em> - это процент сайтов, использующих любую библиотеку JavaScript, которые используют указанную библиотеку. <em>Absolute Usage</em> - это процент опрошенных веб-сайтов, включая те, которые не используют библиотеки JavaScript, которые используют указанную библиотеку. Все данные получены от <a href="https://w3techs.com/technologies/overview/javascript_library/all">W3Techs</a> и верны на март 2021 года.</td>
    </tr>
  </tfoot>
</table>

Таблицы для данных, а не макет

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

Итак, как правильно использовать таблицы HTML? Для отображения набора данных, которые проще всего понять и усвоить, если они представлены в виде таблицы. Если у вас есть такие данные, которые нужно добавить на веб-сайт, таблица HTML – правильный инструмент для работы.

Атрибуты HTML-таблицы

Существует множество параметров, которые используются при создании таблицы HTML.

Однако в HTML5 многие устарели, утратив основные свойства стилизации.

Вместо них необходимо применять CSS для более корректной и тонкой настройки.