HTML-таблицы
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
<style type="text/css">
table {
border-collapse:collapse;
}
td, th {
border:1px solid black;
padding:5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header Cell 1</th>
<th>Header Cell 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Выше приведен пример таблицы в HTML. К ней было применено несколько стилей (с помощью элемента <style> в разделе <head>).
Как работают HTML-таблицы
В HTML таблицы создаются с помощью тега <table> вместе с тегами <td> и <tr>:
<table>
<tr>
<td>Ячейка 1</td>
<td> Ячейка 2</td>
</tr>
</table>Каждый элемент <tr> представляет собой строку таблицы. А элемент <td> - ячейку данных.
Существуют и другие элементы, которые можно использовать с таблицами, такие как <th>, <thead>, <tfoot>, <tbody>, <caption> и <colgroup>.
Ниже приведен пример, в котором используются эти теги HTML таблицы:
<table>
<caption>
Здесь название таблицы...
</caption>
<colgroup span="2" class="first2cols"></colgroup>
<thead>
<tr>
<th>Заголовок ячейки 1</th>
<th>Заголовок ячейки 2</th>
<th>Заголовок ячейки 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Подвал ячейки 1</td>
<td>Подвал ячейки 2</td>
<td>Подвал ячейки 3</td>
</tr>
</tfoot>
</table>Многие из дополнительных тегов позволяют группировать другие элементы внутри них. Например, элемент <thead> используется для группировки заголовков столбцов таблицы <tfoot> для группировки нижних частей столбцов и т.д.
Элемент <colgroup> позволяет группировать столбцы. Это удобно для применения стилей ко всем ячейкам столбца. В приведенном выше примере мы используем span="2" для группировки первых двух столбцов. Мы также применяем класс к этой группе столбцов. Поэтому, если мы применим для этого класса цвет фона, то он будет применяться к первым двум столбцам.
Атрибуты
Тег <table> поддерживает атрибуты border и sortable (как и глобальные атрибуты), а также атрибуты обработчика событий.
Использование атрибута border позволяет задать HTML отступы в таблице. Например:
<table border="1">
<tr>
<th>Ячейка заголовка 1</th>
<th>Ячейка заголовка 2</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
Тем не менее, в последнее время разработчики предпочитают при HTML оформлении таблицы вместо атрибута border использовать CSS. С помощью CSS вы можете сделать гораздо больше. Кроме этого в HTML5 атрибут border предназначен только для указания браузеру того, что таблица не используется для структуры.
Атрибут sortable предназначен для того, чтобы включить возможность сортировки интерфейса таблицы.
Еще два атрибута, которые могут оказаться полезными при работе с таблицами - это атрибуты colspan и rowspan. Их можно использовать с тегами <th> и <td>. Они позволяют указать, сколько столбцов или строк должна охватывать ячейка. Ниже приведены примеры использования этих атрибутов.
Colspan:
В этом примере первая ячейка заголовка охватывает два столбца:
<table border="1">
<tr>
<th colspan="2">Ячейка заголовка 1</th>
<th>Ячейка заголовка 2</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</table>
RowSpan:
В этом примере мы применяем rowspan="" для первой ячейки заголовка. В результате ячейка заголовка охватывает все три строки:
<table border="1">
<tr>
<th rowspan="3">Ячейка заголовка 1</th>
<th>Ячейка заголовка 2</th>
<th>Ячейка заголовка 3</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
Старайтесь не применять HTML-таблицы для разметки
Перед тем, как сделать таблицу в HTML, нужно помнить, что они предназначены только для представления табличных данных, имеющих многоуровневую структуру. Эти данные нуждаются в сортировке по строкам и столбцам, чтобы быть представленными правильно.
HTML-таблицы не предназначены для использования в целях форматирования. Заманчиво использовать их для создания макетов, но делать это не рекомендуется.