Тег <table> HTML таблица

Тег <table> используется для создания HTML таблиц.

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

Таблица, созданная тегом <table> может быть разделена на верхний, нижний колонтитулы и основную часть с помощью тегов <thead>, <tfoot>, <tbody>.

К таблице можно добавить подпись, используя тег <caption>.

Внутри таблицу <table> можно делить не только по строкам, но и по колонкам используя теги <col> и <colgroup>.

HTML таблицы <table> не стоит использовать для верстки каркаса HTML страниц. Используйте их для структурированного отображения контента табличного формата.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<table>HTML контент таблицы</table>

Примеры использования таблиц <table> в HTML коде

Ниже представлены 2 варианта HTML таблиц.

Простая HTML таблица

HTML код простой таблицы

<table>
  <tbody>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
    </tr>
    <tr>
      <td>Ячейка 3</td>
      <td>Ячейка 4</td>
    </tr>
  </tbody>
</table>

Сложная HTML таблица

HTML код сложной таблицы

<table>
  <caption>Подпись таблицы</caption>
  <colgroup style="background-color: bisque;">
    <col style="background-color: #c4daff;">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Ячейка колонтитула 1</th>
      <th>Ячейка колонтитула 2</th>
      <th>Ячейка колонтитула 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Ячейка колонтитула 4</th>
      <th>Ячейка колонтитула 5</th>
      <th>Ячейка колонтитула 6</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td rowspan="2">Ячейка 1</td>
      <td>Ячейка 2</td>
      <td>Ячейка 3</td>
    </tr>
    <tr>
      <td colspan="2">Ячейка 4</td>
    </tr>
  </tbody>
</table>

Поддержка браузерами

Тег
<table>	Да	Да	Да	Да	Да

Атрибуты

В HTML5 тег <table> не имеет атрибутов.

Устаревшие атрибуты тега table

Атрибут	Значения	Описание
align	left right center justify	Задает правило выравнивания содержимого таблицы по горизонтали. В HTML5 используйте CSS.
bgcolor	rgb HTML hex HTML colorname	Фоновый цвет. В HTML5 используйте CSS. Примеры: RGB: rgb(226,112,017), rgb(0, 40, 129). HTML hex: #1a2a2c, #eee. HTML colorname: black, yellow;
border	число	Ширина границ таблицы в пикселях. По умолчанию: 0 - границы не выводятся. В HTML5 используйте CSS.
cellpadding	число	Отступ от границ ячеек до их содержимого. Значение указывает количество пикселей. В HTML5 используйте CSS.
cellspacing	число	Отступ между границами ячеек. Значение указывает количество пикселей. В HTML5 используйте CSS.
frame	void above below lhs rhs vsides hsides box border	Определяет какие внешние границы будут отображены: void - все границы скрыты; above - только верхняя граница; below - только нижняя граница; lhs - только левая граница; rhs - только правая граница; vsides - вертикальные границы; hsides - горизонтальные границы; box или border - все границы. В HTML5 используйте CSS.
rules	none groups rows cols all	Определяет какие внутренние границы будут отображены: none - все скрыты; groups - границы групп; rows - границы строк; cols - границы колонок; all - все; В HTML5 используйте CSS.
summary	текст	Описание таблицы.
width	пиксели проценты	Ширина таблицы. В HTML5 используйте CSS.