Тег 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

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

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

heightЗадает высоту таблицы.
summaryУказывает описание таблицы.
widthЗадает ширину таблицы.

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

frameИспользовалось для определения видимых границ таблицы.
rulesИспользовалось для указания отображения внутренних границ между строками и столбцами.
alignИспользовалось для выравнивания таблицы HTML влево, вправо или по центру относительно родительского элемента.

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

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *