HTML-таблицы позволяют расположить данные в строках и столбцах. Они обычно используются для отображения табличных данных, таких как демографические данные, данные клиентов, финансовые отчеты, списки продуктов и т. д.
Вы можете создать таблицу, используя элемент <table>
. Внутри элемента <table>
вы можете использовать элементы <tr>
для создания строк, а для создания столбцов внутри строки вы можете использовать элементы <td>
. Вы также можете определить ячейку в качестве заголовка для группы ячеек таблицы, используя элемент <th>
.
Следующий пример демонстрирует основную структуру таблицы.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
Таблицы не имеют границ по умолчанию. Вы можете использовать CSS-свойство border
для добавления границ в таблицы. Кроме того, чтобы добавить больше пространства вокруг содержимого в ячейках таблицы, вы можете использовать CSS-свойство padding
.
Следующие правила добавляют 1-пиксельные границы к таблице и 10-пиксельные отступы для ячеек.
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
По умолчанию границы вокруг таблицы и их ячейки отделены друг от друга. Но вы можете свернуть их в одну, используя свойство border-collapse
для элемента <table>
.
Кроме того, текст внутри элементов <th>
текст отображается жирным шрифтом и по умолчанию выровнен по горизонтали по центру ячейки. Чтобы изменить выравнивание по умолчанию, вы можете использовать CSS-свойство text-align
.
Следующие правила сворачивают границы таблицы и выравнивают текст заголовка таблицы по левому краю.
table {
border-collapse: collapse;
}
th {
text-align: left;
}
См. Руководство по таблицам в CSS, чтобы узнать подробнее о стилизации таблиц HTML.
Большая часть атрибутов элемента <table>
, используемых для оформления внешнего вида таблицы в более ранних версиях, таких как border
, cellpadding
, cellspacing
, width
, align
и т. д. была удалена в HTML5, поэтому избегайте их использования. Вместо этого используйте CSS для стилизации таблиц HTML.
Атрибут span для <table>
Атрибут span
позволяет объединять строки и столбцы таблицы.
Обычно ячейка таблицы не может перекрывать пространство другой ячейки, которая расположена ниже или выше текущей. Но вы можете использовать атрибуты rowspan
или colspan
для охвата нескольких строк или столбцов в таблице.
Давайте посмотрим следующий пример, чтобы понять, как работает colspan
:
<table>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Carter</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>
Точно так же вы можете использовать атрибут rowspan
для создания ячейки, которая охватывает несколько строк. Взглянем на пример:
<table>
<tr>
<th>Name:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Использование тега <caption>
Вы можете указать заголовок (caption) для ваших таблиц, используя элемент <caption>
.
Элемент <caption>
должен быть размещен непосредственно после открывающего тега <table>
. По умолчанию заголовок отображается в верхней части таблицы, но вы можете изменить его положение, используя CSS-свойство caption-side
.
В следующем примере показано, как использовать этот элемент в таблице.
<table>
<caption>Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
Использование тегов <thead>, <tbody>, и <tfoot>
В HTML есть серия тегов <thead>
, <tbody>
, и <tfoot>
, которые помогают вам создавать более структурированные таблицы, определяя области верхнего и нижнего колонтитула соответственно.
В следующем примере демонстрируется использование этих элементов.
<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stationary</td>
<td>2,000</td>
</tr>
<tr>
<td>Furniture</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot>
</table>
В HTML5 элемент <tfoot>
можно размещать до или после элементов <tbody>
и <tr>
, но он должен появляться после любых элементов <caption>
, <colgroup>
, и <thead>
.
Не используйте таблицы для создания разметки веб-страниц. Таблицы медленнее при рендеринге и очень сложны в обслуживании. Они должны использоваться только для отображения табличных данных.