Тег <table> HTML таблица

Рейтинг: 4 из 5, голосов 5
++++-

Тег <table> используется для создания HTML таблиц.

HTML таблица <table> должна содержать хотя бы одну строку <tr> и хотя бы одну ячейку <th> - ячейку-заголовок или <td> - обычную ячейку в каждой строке.

Таблица, созданная тегом <table> может быть разделена на верхний, нижний колонтитулы и основную часть с помощью тегов <thead>, <tfoot>, <tbody>.

К таблице можно добавить подпись, используя тег <caption>.

Внутри таблицу <table> можно делить не только по строкам, но и по колонкам используя теги <col> и <colgroup>.

HTML таблицы <table> не стоит использовать для верстки каркаса HTML страниц. Используйте их для структурированного отображения контента табличного формата.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<table>HTML контент таблицы</table>

Примеры использования таблиц <table> в HTML коде

Ниже представлены 2 варианта HTML таблиц.

Простая HTML таблица

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

HTML код простой таблицы

<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>

Сложная HTML таблица

Подпись таблицы
Ячейка колонтитула 1 Ячейка колонтитула 2 Ячейка колонтитула 3
Ячейка колонтитула 4 Ячейка колонтитула 5 Ячейка колонтитула 6
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4

HTML код сложной таблицы

<table>
<caption>Подпись таблицы</caption>
<colgroup style="background-color: bisque;">
<col style="background-color: #c4daff;">
<col>
</colgroup>
<thead>
<tr>
<th>Ячейка колонтитула 1</th>
<th>Ячейка колонтитула 2</th>
<th>Ячейка колонтитула 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Ячейка колонтитула 4</th>
<th>Ячейка колонтитула 5</th>
<th>Ячейка колонтитула 6</th>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td colspan="2">Ячейка 4</td>
</tr>
</tbody>
</table>

Поддержка браузерами

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<table> Да Да Да Да Да

Атрибуты

В HTML5 тег <table> не имеет атрибутов.

Устаревшие атрибуты тега table

Атрибут Значения Описание
align left
right
center
justify
Задает правило выравнивания содержимого таблицы по горизонтали. В HTML5 используйте CSS.
bgcolor rgb
HTML hex
HTML colorname

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(226,112,017), rgb(0, 40, 129).
HTML hex: #1a2a2c, #eee.
HTML colorname: black, yellow;

border число Ширина границ таблицы в пикселях. По умолчанию: 0 - границы не выводятся.
В HTML5 используйте CSS.
cellpadding число Отступ от границ ячеек до их содержимого. Значение указывает количество пикселей. В HTML5 используйте CSS.
cellspacing число Отступ между границами ячеек. Значение указывает количество пикселей. В HTML5 используйте CSS.
frame void
above
below
lhs
rhs
vsides
hsides
box
border

Определяет какие внешние границы будут отображены:
void - все границы скрыты;
above - только верхняя граница;
below - только нижняя граница;
lhs - только левая граница;
rhs - только правая граница;
vsides - вертикальные границы;
hsides - горизонтальные границы;
box или border - все границы.

В HTML5 используйте CSS.

rules none
groups
rows
cols
all

Определяет какие внутренние границы будут отображены:
none - все скрыты;
groups - границы групп;
rows - границы строк;
cols - границы колонок;
all - все;

В HTML5 используйте CSS.

summary текст Описание таблицы.
width пиксели
проценты
Ширина таблицы. В HTML5 используйте CSS.
Оцените, насколько полезна эта статья
++++-
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.