Введение
Стало быть, Вы только начинаете делать таблицу. Возможно, даже слышали о таких тегах, как tr, td, th или table, использовали атрибуты colspan, а также rowspan. Вы можете сделать такой себе милый маленький столик из фанеры, но можете и не знать, как сделать обеденный стол из твердых пород дерева, застекленная столешница которого запросто выдержит вес немаленького слона.
Столбцы наносят ответный удар
Как правило, таблицы строятся исключительно строками, делая столбцы ненужными элементами. К счастью для тех, кто хочет работать именно со столбцами, есть замечательные теги - colgroup и col.
Эти теги дают возможность сделать столбцы в таблице, как Вам угодно, что очень удобно, если нужно изменить выравнивание или, скажем, цвет определенного столбца. Иначе придется изменять отдельные ячейки.
<table>
<colgroup>
<col>
<col class="alternative">
<col>
colgroup>
<tr>
<td>
This
td>
<td>
That
td>
<td>
The other
td>
tr>
<tr>
<td>
Ladybird
td>
<td>
Locust
td>
<td>
Lunch
td>
tr>
table>
В примере класс "alternative"> будет применяться ко второму столбцу или же второй ячейке каждой строки.
Иногда удобно использовать атрибут span. Теги rowspan и colspan с colgroup определяют количество строк, в которых нужно объединить столбцы. Запись: <colgroup span="2"> colgroup> - группирует первые два столбца. Пример:
<table>
<colgroup>
<col>
<col span="2" class="alternative">
colgroup>
В этом примере класс "alternative" использовался в двух последних столбцах. Использование тега col не обязательное, если colgroup содержит в себе span.
Название эпизода
Кратко и понятно про названия таблицы. Элемент caption - название таблицы, должен сразу же быть после открытия тега table.
<table>
<caption>
Locust mating habitscaption>
По умолчанию название отображается над таблицей, также можно использовать CSS (caption-side: bottom). Согласитесь, хорошо предсказывать результат.
Если Вы хотите сделать таблицу элементом figure, то лучше использовать figcaption вместо тега caption.
Шапки и подвалы
Для работы с большими таблицами удобнее всего использовать thead, tfoot и tbody для разбивки на структурные элементы header, footer и body.
Видео курсы по схожей тематике:
Всегда thead нужно писать первым в HTML-коде, а вот tfoot браузеры опустят в нижнюю часть таблицы, даже если элемент стоит выше tbody (или нескольких tbody, всё зависит от Вашей фантазии).
<table>
<thead>
<tr>
<td>
Header 1
td>
<td>
Header 2
td>
<td>
Header 3
td>
tr>
thead>
<tfoot>
<tr>
<td>
Footer 1
td>
<td>
Footer 2
td>
<td>
Footer 3
td>
tr>
tfoot>
<tbody>
<tr>
<td>
Cell 1
td>
<td>
Cell 2
td>
<td>
Cell 3
td>
tr>
tbody>
table>
Бесплатные вебинары по схожей тематике:
Источник: http://www.htmldog.com/guides/html/advanced/tables/
Статьи по схожей тематике
