Таблица HTML5

Таблица HTML применяется для представления данных в строках и столбцах.

Рекомендация W3C.

table
Табличный блок
caption
Заголовок или подпись таблицы: caption-side: top | bottom; по умолчанию вверху.
col
Столбец в таблице
colgroup
Группа столбцов в таблице
tbody
Тело таблицы
td
Ячейка в таблице
tfoot
Дно столбца
thead
Заголовок столбца
th
Ячейка для заголовка таблицы
tr
Строка в таблице

в HTML5 для тега table границы и отступы ячеек определяются свойствами CSS.

Границы для ячеек:

border-collapse: collapse | separate | inherit;


Расстоянием между ячейками:

border-spacing: растояние | inherit;


Показать или скрыть пустые ячейки:

empty-cells: show | hide | inherit;


Например:

table {
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
}

Микроразметка для таблицы HTML:

<table itemscope="itemscope" itemtype="http://schema.org/Table">
<caption itemprop="about">Заголовок или подпись</caption>

Оформление таблиц

Для оформления ячеек таблицы широко применяется псевдоклассы CSS :nth-child(n) и :nth-of-type(n), которые избавят от присвоения для ячеек классов или идентификаторов.

Добавить цвет через одну строку:

tbody tr:nth-child(2n+1) {
   background-color: #fee;
}

свойство CSS display: table для создания таблиц имитируют туже модель что и таблица HTML. Преимущество таблицы построенной свойствами CSS — это меньше кода HTML.