Элемент <table> определяющих содержимое таблицы. Любая таблица состоит из строк и столбцов, которые задаются с помощью других html – элементов таблицы. Строки можно объединить также как и столбцы , таблицу можно выделить рамкой и задать ей цвет. Таблицы играют огромную роль при написании сайта.
С помощью парного тега <table> можно создавать таблицы на HTML – страницах .
Таблица состоит из строк и столбцов , которые образуют ячейки таблицы , ячейки можно объединять .
Структура таблицы
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Структура таблицы</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
table {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h1>Структура таблицы</h1><table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</tbody>
</table>
</body>
</html>Структура таблицы
Заголовки таблицы
Тег <th> – Указывает ячейки которые являются заголовочными . Содержимое таких ячеек выделяется полужирным шрифтом и размещается по центру .
Атрибут border – отображает линии сетки таблицы , также задает толщину рамки вокруг таблицы . По умолчанию сетка не отображается .
Заголовки таблицы
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Заголовки таблицы</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
table {
font-size: 1.2em; /*Размер шрифта*/
border: black 1px solid; /* Стиль рамки таблицы
(вместо параметра border) */
border-spacing: 0; /* Расстояние между ячейками
(вместо параметра cellspacing) */
border-collapse: collapse; /* Одинарная рамка */
}
td, th {
border: black 1px solid; /* Стиль рамки ячеек */
padding: 10px; /* Отступ между границей и содержимым
(вместо параметра cellpadding) */
}
}
</style>
</head>
<body>
<h1>Заголовки таблицы</h1><table>
<tbody>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>
</body>
</html>Заголовки таблицы
Объединение ячеек в таблице
Атрибут – colspan – тега <td> , объединить ячейки по горизонтали .
Используя атрибут colspan="х", у тега <td> или <th>, где x - количество ячеек для объединения.
Атрибут – rowspan – тега <td> , объединить ячейки по вертикали .
Используя атрибут rowspan="х", у тега <td> или <th>, где x - количество ячеек для объединения.
Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:
Объединение ячеек
<td colspan="3" rowspan="2">Содержимое ячейки</td>Объединение ячеек
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Объединение ячеек</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
table {
font-size: 1.2em; /*Размер шрифта*/
border: black 1px solid; /* Стиль рамки таблицы
(вместо параметра border) */
border-spacing: 0; /* Расстояние между ячейками
(вместо параметра cellspacing) */
border-collapse: collapse; /* Одинарная рамка */
}
td, th {
border: black 1px solid; /* Стиль рамки ячеек */
padding: 10px; /* Отступ между границей и содержимым
(вместо параметра cellpadding) */
}
}
}
</style>
</head>
<body>
<h1>Объединение ячеек</h1><table>
<tbody>
<tr>
<th colspan="3">Заголовок ячейки</th>
</tr>
<tr>
<td rowspan="2">Заголовок ячейки</td>
</tr>
<tr>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td colspan="3" rowspan="2">Заголовок ячейки </td>
</tr>
<tr>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</tbody>
</table>
</body>
</html>Объединение ячеек
Колонтитулы в таблице
HTML таблицы можно поделить на 3 раздела: верхний колонтитул, основная часть, нижний колонтитул.
Тег <thead> определяет раздел верхнего колонтитула, а тег <tfoot> – раздел нижнего колонтитулы, <tbody> – основную часть таблицы.
Правильное размещение разделов таблице можно посмотреть в следующем примере
Тег – <caption> , создает подпись таблицы .
Таблица с колонтитулами и подписью
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Таблица с колонтитулами и подписью</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
table {
font-size: 1.2em; /*Размер шрифта*/
border: black 1px solid; /* Стиль рамки таблицы
(вместо параметра border) */
border-spacing: 0; /* Расстояние между ячейками
(вместо параметра cellspacing) */
border-collapse: collapse; /* Одинарная рамка */
}
td, th {
border: black 1px solid; /* Стиль рамки ячеек */
padding: 10px; /* Отступ между границей и содержимым
(вместо параметра cellpadding) */
}
}
}
</style>
</head>
<body>
<h1>Таблица с колонтитулами и подписью</h1>
<table>
<caption>Подпись к таблице</caption>
<thead>
<tr>
<th>Раздел thead</th>
<th>Раздел thead</th>
<th>Раздел thead</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Раздел tfoot</th>
<td>Раздел tfoot</td>
<td>Раздел tfoot</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</tbody>
</table>
</body>
</html>Таблица с колонтитулами и подписью
Колонки в таблице
HTML таблицу можно разделить на колонки или группу колонок .
Тег – <col> делит таблицу на колонки , а тег <colgroup> делит на группу колонок .
Теги <col> и <colgroup> ставятся внутри тега <table> перед тегами <thead>, <tfoot>, <tbody>, <tr> и после тега <caption>.
Если внутри <colgroup> есть вложенные теги <col>, то атрибут span у тега <colgroup> не ставится, а количество колонок на которые влияет тег определяется вложенными <col> элементами.
Колонки в таблице
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Колонки в таблице</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
table {
font-size: 1.2em; /*Размер шрифта*/
border: black 1px solid; /* Стиль рамки таблицы
(вместо параметра border) */
border-spacing: 0; /* Расстояние между ячейками
(вместо параметра cellspacing) */
border-collapse: collapse; /* Одинарная рамка */
}
td, th {
border: black 1px solid; /* Стиль рамки ячеек */
padding: 10px; /* Отступ между границей и содержимым
(вместо параметра cellpadding) */
}
}
}
</style>
</head>
<body>
<h1>Колонки в таблице</h1>
<table>
<colgroup style="background-color: #ddd;">
<col>
<col style="background-color: #ccc;">
<col>
</colgroup>
<tbody>
<tr>
<th>Колонка 1</th>
<th>Колонка 2</th>
<th>Колонка 3</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</tbody>
</table>
</body>
</html>Колонки в таблице
