Для создания таблиц в HTML используется элемент <table>. Он служит контейнером для элементов, которые определяют содержимое таблицы.
Строки в таблице задаются парным блочным тегом <tr> (сокр. от англ. “table row” - строка таблицы). Каждая строка в таблице записывается в отдельный тег <tr>.
В тег <tr> записываются ячейки таблицы, которые добавляются при помощи тега <td> (сокр. от англ. “table data” - данные таблицы). Каждая ячейка записывается в отдельный тег <td>. В ячейках записывается содержимое таблицы (числа, текст и т.д.).
Заголовок строки или столбца таблицы задается при помощи тега <th> (сокр. от англ. “table head” - строка таблицы). Тег <th> размещается в первой строке таблицы. В браузере он автоматически выделяется жирным.
Синтаксис
Тег <table> парный, содержимое записывается между открывающим (<table>) и закрывающим (</table>) тегами.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<table>
<tr>
<th>Месяц</th>
<th>Дата</th>
</tr>
<tr>
<td>Январь</td>
<td>10.01.2018</td>
</tr>
<tr>
<td>Февраль</td>
<td>10.01.2018</td>
</tr>
</table>
</body>
</html>
Результат
Месяц | Дата |
---|---|
Январь | 10.01.2018 |
Февраль | 10.01.2018 |
Границы таблицы
Как видно из примера, браузер по умолчанию не отображает рамки таблицы. Добавить их можно двумя способами, используя атрибут border, либо при помощи CSS стилей. Рассмотрим подробно оба варианта.
Атрибут span class="attribute">border устанавливает рамку вокруг таблицы, а также границы между ячеек. Если значение атрибута не указано, то браузер отображает рамку толщиной в один пиксель. По умолчанию рамка изображается двойной.
Выглядит это так:
<table border="1">
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<table border="1">
<tr>
<th>Месяц</th>
<th>Дата</th>
</tr>
<tr>
<td>Январь</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Февраль</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>
Результат
Месяц | Дата |
---|---|
Январь | 10.01.2014 |
Февраль | 10.01.2014 |
Установить границы таблицы можно также при помощи CSS свойства border, которое задаёт толщину и стиль рамки.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table>
<tr>
<th>Месяц</th>
<th>Дата</th>
</tr>
<tr>
<td>Январь</td>
<td>10.01.2018</td>
</tr>
<tr>
<td>Февраль</td>
<td>10.01.2018</td>
</tr>
</table>
</body>
</html>
Результат
Месяц | Дата |
---|---|
January | 10.01.2018 |
Февраль | 10.01.2018 |
Группировка элементов таблицы
Содержимое таблицы можно группировать в логические блоки. Для этого в HTML предусмотрены следующие теги:
- Тег <thead> - (сокр. от англ. “table head” - "голова" таблицы) группирует одну или несколько верхних строк в таблице, то есть создает “шапку” таблицы.
- Тег <tbody> - (сокр. от англ. “table body” - "тело" таблицы) группирует центральные строки в таблице с основным содержанием. (В одной таблице допускается использование нескольких таких блоков).
- Тег <tfoot> - (сокр. от англ. “table footer” - нижний колонтитул таблицы) группирует нижние строки, формируя "подвал" таблицы. (В одной таблице можно использовать только один тег <tfoot>).
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Месяц</th>
<th>Дата</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Общая сумма</td>
<td>200$</td>
</tr>
</tfoot>
</table>
<tbody>
<tr>
<td>Июнь</td>
<td>150$</td>
</tr>
<tr>
<td>Июль</td>
<td>50$</td>
</tr>
</tbody>
</body>
</html>
Результат
Месяц | Дата |
---|---|
Общая сумма | 200$ |
Объединение ячеек
Для объединения ячеек в таблице используются атрибуты colspan и rowspan. Атрибут colspan устанавливает число ячеек, которые должны быть объединены по горизонтали, а rowspan - по вертикали.
Пример объединения ячеек по горизонтали
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Месяц и Дата</th>
</tr>
<tr>
<td>Январь</td>
<td>10.01.2018</td>
</tr>
<tr>
<td>Февраль</td>
<td>10.01.2018</td>
</tr>
</table>
</body>
</html>
Результат
Месяц и Дата | |
---|---|
Январь | 10.01.2018 |
February | 10.01.2018 |
Пример объединения ячеек по вертикали
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table >
<tr>
<th>Месяц</th>
<th>Дата</th>
</tr>
<tr>
<td>Январь</td>
<td rowspan="2">10.01.2018</td>
</tr>
<tr>
<td>Февраль</td>
</tr>
</table>
</body>
</html>
Результат
Месяц | Дата |
---|---|
Январь | 10.01.2018 |
Февраль |