Таблицы HTML
В HTML вы можете создавать таблицы для вашего сайта с помощью тега <table> в сочетании с тегами <tr>, <td> и <th>.
Таблицы HTML позволяют отображать данные (например, изображения, текст, ссылки) в виде столбцов и строк ячеек. Строки таблицы можно группировать в секции заголовка, подвала и тела с помощью элементов <thead>, <tfoot> и <tbody> соответственно.
В HTML5 мы можем размещать <tfoot> либо перед, либо после тега <tbody>. Они должны идти после любых элементов <caption>, <colgroup> и <thead>.
Большинство атрибутов элемента <table> не используются в HTML5. Если вы хотите стилизовать внешний вид таблицы, вместо этого можно использовать CSS.
Объединение нескольких строк и столбцов
Возможно расширение строк и столбцов таблицы на несколько других строк и столбцов.
Обычно ячейка таблицы не может занимать пространство, которое находится ниже или выше другой ячейки. Однако, если вы хотите объединить несколько строк или столбцов в таблице, вы можете использовать атрибуты colspan или rowspan.
Добавление подписей к таблицам
Вы можете использовать элемент <caption> для указания подписи к таблице. Он должен располагаться сразу после открывающего тега <table>. По умолчанию подпись будет находиться в верхней части таблицы, но её положение можно изменить с помощью свойства CSS caption-side.
Синтаксис
Тег <table> всегда парный. Содержимое записывается между открывающим тегом <table> и закрывающим тегом </table>.
Пример тега HTML <table>:
Пример HTML-таблицы | W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Результат
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February | 10.01.2014 |
В приведенном примере мы используем тег <table> для создания таблицы. Затем мы используем тег <tr> для разделения таблицы на строки. Тег <th> используется для ячеек заголовка таблицы, где записывается название. Иными словами, строка таблицы разделяется на заголовки. Тег <td> используется для ячеек таблицы, где записывается информация.
Если вы хотите отобразить заголовок в одной ячейке, вы можете использовать атрибут colspan.
Пример тега HTML <table> с атрибутом colspan:
Пример HTML-таблицы с атрибутом colspan | W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Результат
| Month and Date |
|---|
| January |
| February |
То же самое можно сделать со строками, используя атрибут rowspan.
Пример тега HTML <table> с атрибутом rowspan:
Пример HTML-таблицы с атрибутом rowspan | W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">10.01.2014</td>
</tr>
<tr>
<td>February</td>
</tr>
</table>
</body>
</html>Результат
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February |
Практика
Каковы функции и особенности HTML-таблиц?