Таблица <table>

Внутри <table> допустимо использовать следующие элементы:

<caption>
предназначен для создания заголовка к таблице и может размещаться только внутри контейнера

<col>
задает ширину и другие характеристики одной или нескольких колонок таблицы.

<tbody>
предназначен для хранения одной или нескольких строк таблицы.

<tfoot>
предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.

<th>
предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.

<thead>
предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.

Пример:
<table border="1" cellspacing="0" cellpadding="4">
<caption>caption - заголовок</caption>
<!-- col - выставляет длину колонок -->
<col width="100" valign="top">
<col width="150" valign="top">
<col width="200" valign="top">
<col width="150" valign="top">
<thead style="background-color:silver">
<tr>
<th>thead</th><th>thead</th><th>thead</th><th>thead</th>
</tr>
</thead>
<tfoot style="background-color:coral"> <!-- Тег tfoot применяется для создания подвала таблицы. Его принято писать после тега thead , но отображается он в самом низу таблицы. -->
<tr>
<td>tfoot</td><td>tfoot</td><td>tfoot</td><td>tfoot</td>
</tr>
</tfoot>
<tbody align="right"><!-- содержимое ячеек позиционируется справа -->
<tr>
<th>тег <col></th><th>Чебурашка</th>
<th>Крокодил Гена</th><th>Шапокляк</th>
</tr>
<tr>
<td>Съел, кг</td><td>5</td>
<td>2</td><td>1</td>
</tr>
<tr>
<td>Выпил, л</td><td>6</td>
<td>8</td><td>2</td>
</tr>
<tr>
<td>Смог, раз</td><td>5</td>
<td>5</td><td>1</td>
</tr>
</tbody>
</table>


<colgroup>
создает структурную группу столбцов, выделяя логически однородные ячейки. Добавляется непосредственно после тегов <table> и/или <caption>.

<col>
формирует группы столбцов, которые делят таблицу на разделы. Атрибут <span> задаёт количество столбцов для объединения.

Пример:
<table border="1">
<colgroup>
<col span="2" style="background:Khaki"><!-- С помощью этой конструкции задаем цвет фона для первых двух столбцов таблицы-->
<col style="background-color:LightCyan"><!-- Задаем цвет фона для следующего (одного) столбца таблицы-->
</colgroup>
<tr>
<th>№ п/п</th>
<th>Наименование</th>
<th>Цена, руб.</th>
</tr>
<tr>
<td>1</td>
<td>Карандаш цветной</td>
<td>20,00</td>
</tr>
<tr>
<td>2</td>
<td>Линейка 20 см</td>
<td>30,00</td>
</tr>
</table>


<colspan="5">
задает количество ячеек, объединенных по горизонтали.

<rowspan="5">
задает количество ячеек, объединенных по вертикали.

Пример:
<table border="1">
<tbody>
<tr>
<th colspan="3">Nissan</th>
</tr>
<tr>
<th>Модель</th>
<th>Комплектация</th>
<th>Наличие</th>
</tr>
<tr>
<td rowspan="2">Nissan Qashqai</td>
<td>VISIA</td>
<td>+</td>
</tr>
<tr>
<td>TEKNA</td>
<td>+</td>
</tr>
<tr>
<td rowspan="2">Nissan X-Trail</td>
<td>ACENTA</td>
<td>+</td>
</tr>
<tr>
<td>CONNECTA</td>
<td>-</td>
</tr>
</tbody>
</table>


CSS стили для таблиц