HTML тег table

Тег <table> определяет HTML таблицу для представления табличных данных.

HTML таблица состоит из элемента <table> и одного или более элементов <tr>, <th> и <td>.

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

Более сложные HTML таблицы также могут содержать элементы <caption>, <col>, <colgroup>, <thead>, <tfoot> и <tbody>.

Разница между HTML 4.01 и HTML5

В HTML5 атрибуты align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width не поддерживаются.

Атрибуты тега <table>

Атрибут	Описание
align	Определяет горизонтальное выравнивание содержимого элемента table
bgcolor	Определяет цвет фона элемента
border	Определяет, следует ли отображать рамку вокруг ячеек таблицы
cellpadding	Определяет расстояние между содержимым ячейки таблицы и ее границей
cellspacing	Определяет расстояние между ячейками таблицы
frame	Определяет, каким образом отображается внешняя граница таблицы
rules	Определяет, каким образом следует отображать границы между ячейками таблицы
summary	Определяет краткое описание таблицы
width	Определяет ширину таблицы

Общие атрибуты

Тег <table> поддерживает общие атрибуты и атрибуты-события.

CSS стили по умолчанию

Большинство браузеров будут отображать тег <table> со следующими стилями


table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

HTML пример использования

Простая HTML таблица с двумя строками и двумя столбцами:


<table>
  <tr>
    <th>Месяц</th>
    <th>Сэкономлено</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>