Название таблицы в HTML | WebShake.RU
Привет всем! Ну что же, Вас есть с чем поздравить! Отныне вы умеете создавать самые простые таблицы, а также осуществлять их оформление и они не выглядят такими нелепыми, как те что были в первом уроке этого уровня, не так ли? Уверен, Вы ожидаете от таблиц чего-то ещё более интересного. Всё впереди, уж поверьте мне!
А теперь пришло время рассказать, как добавить подпись к таблице, которую еще можно назвать заголовком таблицы, или её названием. Это такая поясняющая надпись, где написано, что это за таблица и для чего она вообще нужна.
Таблица умножения
<table>
<tr>
<td>*</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
</tr>
</table>
И посмотрим на результат в браузере:
Подпись, которая называется Таблица умножения является просто текстом. Конечно, с визуальной точки зрения, видно, что данное словосочетание представляет собой название таблицы. Но если решать данную задачу с учетом семантики, то более корректным будет использование тега <caption>
.Располагается этот тег внутри <table>. И кроме этого, если в <table> есть еще теги, то <caption> должен идти первым. Вот как это выглядит на примере:
<table>
<caption>Таблица умножения</caption>
...
</table>
Пример показывает, что внутри таблицы тег с заголовком занимает первое место. Однако, если использовать для решения данной задачи CSS, то заголовок таблицы может быть расположен относительно нее как угодно: сверху, снизу, по центру, слева, справа.
Чтобы переместить заголовок таблицы в вертикальном направлении, следует использовать такое CSS-свойство, как caption-side. Добавив к нему значение top, можно поставить заголовок перед таблицей, а значение
Например:
...
table {
border: solid 1px blue;
border-collapse: collapse;
caption-side: bottom;
}
...
Результат:
Чтобы двигать заголовок в горизонтальном направлении, следует использовать CSS-свойство text-align. Значения left, right и center позволяют разместить заголовок слева, справа и по центру, соответственно.
Например:
...
<style>
table {
border: solid 1px blue;
border-collapse: collapse;
caption-side: bottom;
}
table caption {
text-align: left;
}
td {
border: solid 1px blue;
padding: 10px;
}
</style>
...
Результат:
Заголовок таблицы | WebReference
При большом количестве таблиц на странице каждой из них удобно задать свой заголовок, содержащий название таблицы и её описание. Для этой цели в HTML существует специальный элемент <caption>, который устанавливает текст заголовка. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы, и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка используется стилевое свойство text-align, как показано в примере 1.
Пример 1. Выравнивание заголовка таблицы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Таблица</title>
<style>
table {
border: 1px solid #333;
width: 90%;
margin: auto;
}
td {
text-align: center;
}
caption {
text-align: right;
font-style: italic;
}
</style>
</head>
<body>
<table>
<caption>Изменение добычи ресурсов по годам</caption>
<tr>
<th></th>
<th>2023</th><th>2024</th><th>2025</th>
</tr>
<tr>
<td>Heфть</td>
<td>43</td><td>51</td><td>79</td>
</tr>
<tr>
<td>3oлoтo</td>
<td>29</td><td>34</td><td>48</td>
</tr>
<tr>
<td>Дерево</td>
<td>38</td><td>57</td><td>36</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 1. Удобство использования <caption> состоит в том, что заголовок, созданный с его помощью, оказывается привязанным к таблице и не выходит за условные рамки, ограниченные её шириной.
Рис. 1. Вид заголовка таблицы
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.11.2015
Редакторы: Влад Мержевич
HTML таблица, заголовок таблицы, ширина ячейки
HTML ширина ячейки таблицы и ее высота (размер ячеек)
HTML высота ячеек и их ширина, размер определяется следующими атрибутами:
<html> <td>ячейка 1, первый ряд</td> <td>ячейка 2, первый ряд</td> </tr> <tr> <td>ячейка 1, второй ряд</td> <td>ячейка 2, второй ряд</td> </tr> </table> </body> </html> |
Результат:
ячейка 1, первый ряд |
ячейка 2, первый ряд |
ячейка 1, второй ряд |
ячейка 2, второй ряд |
Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы.
Горизонтальное HTML выравнивание в таблице и в ячейке, текст
HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы:
<html> |
Результат:
ячейка 1 |
ячейка 2 |
ячейка 3 |
Вертикальное выравнивание текста внутри HTML таблицы
HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:
<html> <title>Пример: текст в таблице, HTML выравнивание в ячейке</title> </head> <body> <table border=»1″ cellspacing=»0″ cellpadding=»17″> <tr> <td valign=»top»>ячейка 1</td> <td valign=»bottom»>ячейка 2</td> <td valign=»middle»>ячейка 3</td> </tr> </table> </body> </html> |
Результат:
ячейка 1 |
ячейка 2 |
ячейка 3 |
Атрибут valign определяет вертикальное выравнивание текста внутри таблицы.
Теги, определяющие заголовок HTML таблицы
HTML заголовки таблицы:
<html> <body> <table border=»1″ cellspacing=»0″ cellpadding=»10″> <tr> <th>Заголовок</th> <th>Заголовок</th> <th>Заголовок</th> </tr> <tr> <td>Текст</td> <td>Текст</td> <td>Текст</td> </tr> <tr> <td>Текст</td> <td>Текст</td> <td>Текст</td> </tr> </table> </body> </html> |
Результат:
Заголовок |
Заголовок |
Заголовок |
Текст |
Текст |
Текст |
Текст |
Текст |
Текст |
Теги <th> </th> определяют заголовок HTML таблицы.
HTML таблица по центру, с левой, с правой стороны
Горизонтальное расположение HTML таблицы внутри web-страницы:
<html> |
Результат: HTML таблица по центру страницы, слева, справа
В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки.bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSSаналог – background-color.
HTML таблица расположена внутри ячейки
Пример:
<html> |
Результат: HTML таблица внутри ячейки другой таблицы
Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.
Размеры и фон внутренней таблицы, в отличае от внешней, заданы с помошью CSS.
Добавить комментарий
Ячейки-заголовки в таблице HTML | WebShake.RU
Итак, мы рассказали вам о том, как создать таблицу с названием, применяя для этого соответствующие теги. Теперь же пришла пора изучить иные теги для работы с таблицами, а также научиться создавать таблицы более высокого уровня сложности.
Как правило, при создании таблиц названия их столбцов и строк выделяются. В HTML это можно сделать, используя тег <th>. Название тега представляет собой аббревиатуру, которая читается как table header. Этот тег обозначает ячейку-заголовок. Как и тег <td>, тег <th> должен присутствовать внутри тега <tr>. А стили можно использовать для того, чтобы задать для него аналогичные свойства.
По умолчанию работа тега <th> заключается в том, что он выделяет текст жирным, а также размещает его по центру ячейки.
Пример:
<table>
<caption>Таблица умножения</caption>
<tr>
<th>*</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<th>2</th>
<td>4</td>
<td>6</td>
</tr>
<tr>
<th>3</th>
<td>6</td>
<td>9</td>
</tr>
</table>
И добавим тегу <th> такие же стили, как и у тега <td>:
...
td, th {
border: solid 1px blue;
padding: 10px;
}
...
Результат:
HTML-таблицы
HTML-таблицы позволяют веб-авторам упорядочивать данные, такие как текст, изображения, ссылки, другие таблицы и т.д. в строки и столбцы ячеек.
HTML-таблицы создаются с помощью тега <table>, в котором тег <tr> используется для создания строк таблицы и тег <td> используется для создания ячеек данных. Элементы под тегом <td> являются регулярными и по умолчанию выровнены по левому краю.
Пример
<!DOCTYPE html> <html> <head> <title>HTML Таблица</title> </head> <body> <table border = «1»> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> </tr> <tr> <td>Строка 2, Колонка 1</td> <td>Строка 2, Колонка 2</td> </tr> </table> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>HTML Таблица</title> </head> <body> <table border = «1»> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> </tr> <tr> <td>Строка 2, Колонка 1</td> <td>Строка 2, Колонка 2</td> </tr> </table> </body> </html> |
В результате будет получено —
Здесь, border является атрибутом <table> и он использован для того чтобы поставить границы для всех ячеек. Если вам не нужна граница, то вы можете использовать border = «0».
Заголовок таблицы
Заголовок таблицы определяется тегом <th>. Этот тег заменит тег <td>, который используется для представления фактической ячейки данных. Обычно верхняя строка используется в качестве заголовка таблицы, как показано ниже. Заголовки, определенные в теге <th>, по умолчанию центрированы и выделены жирным шрифтом.
<!DOCTYPE html> <html> <head> <title>HTML таблица — заголовок</title> </head> <body> <table border = «1»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>HTML таблица — заголовок</title> </head> <body> <table border = «1»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </body> </html> |
В результате будет получено —
Атрибуты Cellpadding и Cellspacing
Атрибута cellpadding и cellspacing используются для корректировки пробелов в ячейках таблицы. Атрибут cellspacing определяет пространство между ячейками таблицы, в то время как cellpadding представляет расстояние между границами ячейки и содержимым внутри ячейки.
<!DOCTYPE html> <html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border = «1» cellpadding = «5» cellspacing = «5»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border = «1» cellpadding = «5» cellspacing = «5»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </body> </html> |
В результате будет получено —
Атрибуты Colspan и Rowspan
Атрибут colspan используется если надо объединить два или несколько столбцов в один столбец. Подобным образом вы будете использовать свойство rowspan если надо объединить два или более строк.
<!DOCTYPE html> <html> <head> <title>HTML Table Colspan/Rowspan</title> </head> <body> <table border = «1»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>HTML Table Colspan/Rowspan</title> </head> <body> <table border = «1»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html> |
В результате будет получено —
Фон таблицы
Фон таблицы можно установить с помощью одного из следующих двух способов −
- атрибут bgcolor − задает цвет фона для всей таблицы или только на одну клетку.
- атрибут background — можно задать фоновый рисунок для всей таблицы или только на одну клетку.
Можно установить цвет границы, используя атрибут bordercolor.
Пример
<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = «1» bordercolor = «green» bgcolor = «yellow»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = «1» bordercolor = «green» bgcolor = «yellow»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html> |
В результате будет получено —
Пример использования в качестве фона изображения-
<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = «1» bordercolor = «green» background = «/html/images/test.png»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = «1» bordercolor = «green» background = «/html/images/test.png»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html> |
В результате будет получено —
Высота и ширина таблицы
Задать таблице ширину и высоту можно с помощью атрибутов width и height . Ширину или высоту таблицы можно задавать в пикселях или в процентах от доступной области экрана.
<!DOCTYPE html> <html> <head> <title>HTML таблица Width/Height</title> </head> <body> <table border = «1» width = «400» height = «150»> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> </tr> <tr> <td>Строка 2, Колонка 1</td> <td>Строка 2, Колонка 2</td> </tr> </table> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>HTML таблица Width/Height</title> </head> <body> <table border = «1» width = «400» height = «150»> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> </tr> <tr> <td>Строка 2, Колонка 1</td> <td>Строка 2, Колонка 2</td> </tr> </table> </body> </html> |
В результате будет получено —
Заголовок, тело и нижний колонтитул таблицы
Таблицу можно разделить на три части — шапку, тело и футер (окончание). Шапка и футер очень похожи на верхние и нижние колонтитулы в текстовом документе, которые остаются одинаковыми для каждой страницы, в то время как тело является основным держателем содержимого таблицы.
Три элемента для разделения шапки, тела и футера таблицы:
- <thead> − создает отдельный заголовок таблицы.
- <tbody> − указывает на основную часть таблицы.
- <tfoot> − создает отдельную таблицу футер.
Таблица может содержать несколько <tbody> элементов для указания различных страниц или групп данных. Теги <thead> и <tfoot> должны располагаться перед <tbody>
<!DOCTYPE html> <html> <head> <title>HTML Таблица</title> </head> <body> <table border = «1» width = «100%»> <thead> <tr> <td colspan = «4»>Это шапка таблицы</td> </tr> </thead> <tfoot> <tr> <td colspan = «4»>Это футер таблицы</td> </tr> </tfoot> <tbody> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </tbody> </table> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>HTML Таблица</title> </head> <body> <table border = «1» width = «100%»> <thead> <tr> <td colspan = «4»>Это шапка таблицы</td> </tr> </thead> <tfoot> <tr> <td colspan = «4»>Это футер таблицы</td> </tr> </tfoot> <tbody> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </tbody> </table> </body> </html> |
В результате будет получено —
Вложенная таблица
Можно использовать одну таблицу внутри другой таблицы.
Пример использования другой таблицы и других тегов внутри ячейки таблицы.
<!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border = «1» width = «100%»> <tr> <td> <table border = «1» width = «100%»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border = «1» width = «100%»> <tr> <td> <table border = «1» width = «100%»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body> </html> |
Результат будет следующий —
Вложенная таблица
Таблицы | Учебные курсы | WebReference
Таблицы применяются для группирования и упорядочивания данных по столбцам или строкам. Каждая таблица состоит нескольких элементов.
Ячейка — минимальная единица таблицы, в ячейке располагаются сами данные, это может быть текст, картинки или что-то ещё.
Ячейка таблицы
Строка — совокупность ячеек, расположенных рядом друг с другом по горизонтали.
Строка
Колонка — совокупность ячеек, расположенных друг под другом по вертикали.
Колонка
Минимальная таблица состоит из одной единственной ячейки, кроме того, таблица может быть с единственной строкой или единственной колонкой.
Кроме этих перечисленных элементов таблица может содержать и другие не обязательные элементы.
Заголовок таблицы — текстовая строка, предназначенная для названия таблицы или её описания.
Заголовок таблицы
Ячейка заголовка — ячейка, которая применяется для обозначения заголовка колонки или строки таблицы. Браузеры, как правило, текст в такой ячейке отображают жирным начертанием и выравнивают по центру.
Ячейка заголовка
Создание таблицы
Для добавления таблицы на веб-страницу используется элемент <table>, он служит контейнером для элементов, определяющих содержимое таблицы. Формирование таблицы происходит по строкам — вначале мы создаём строку с помощью элемента <tr> (от англ. «table row», строка таблицы), затем уже внутрь <tr> добавляем нужное число ячеек через элемент <td> (от англ. «table data», табличные данные). Оба элемента обязательны, даже если у нас в таблице только одна ячейка.
Вместо <td> допускается использовать элемент <th> (от англ. «table header», заголовок таблицы). Текст в ячейке, оформленной с помощью <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки (пример 1). В остальном, разницы между ячейками, созданными через <td> и <th> нет.
Пример 1. Создание таблицы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>
</html>
Порядок вывода ячеек и их вид показан на рис. 1.
Рис. 1. Результат создания таблицы с четырьмя ячейками
Вид таблицы настраивается с помощью CSS, в том числе цвет и толщина рамки, атрибут border приведён лишь для того, чтобы показать границы ячеек.
Особенности таблиц
- Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически, исходя из суммарной ширины содержимого ячеек.
- Максимальная ширина таблицы — это, как правило, всё доступное пространство по ширине. Большой текст внутри ячеек переносится и форматируется браузером так, чтобы таблица заняла всю ширину. Но бывают исключения, когда внутри ячеек добавляются широкие картинки, в таком случае ширина таблицы может превысить ширину окна браузера и появится горизонтальная полоса прокрутки.
- Содержимое ячеек по умолчанию выравнивается по центру вертикали. Если содержимое ячеек различается по объёму, то в одной ячейке снизу и сверху текста появится пустое пространство.
Заголовок таблицы
При большом количестве таблиц на странице, каждой из них удобно задать своё название. Для этой цели в HTML существует специальный элемент <caption>, который устанавливает текстовый заголовок, он располагается сверху таблицы по центру, его ширина не превышает ширины таблицы, и в случае длинного текста он автоматически переносится на новую строку.
Элемент <caption> должен идти сразу же после открывающего тега <table> (пример 2).
Пример 2. Использование <caption>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Таблица</title>
</head>
<body>
<table>
<caption>Изменение добычи ресурсов по годам</caption>
<tr>
<th></th>
<th>2023</th><th>2024</th><th>2025</th>
</tr>
<tr>
<td>Heфть</td>
<td>43</td><td>51</td><td>79</td>
</tr>
<tr>
<td>3oлoтo</td>
<td>29</td><td>34</td><td>48</td>
</tr>
<tr>
<td>Дерево</td>
<td>38</td><td>57</td><td>36</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 2. Удобство использования <caption> состоит в том, что заголовок, созданный с его помощью, оказывается привязанным к таблице и не выходит за условные рамки, ограниченные её шириной.
Рис. 2. Вид заголовка таблицы
Объединение ячеек
Мы пока рассмотрели достаточно простые таблицы, в которых число ячеек в каждой строке и колонке одинаковое. Но порой встречаются таблицы, где в разных строках или колонках число ячеек различается. Это требуется для создания сложных таблиц, где, к примеру, заголовок охватывает сразу несколько ячеек (рис. 3).
Рис. 3. Таблица с объединёнными ячейками
Для объединения ячеек по горизонтали или, иными словами, по колонкам, применяется атрибут colspan, значением которого выступает число ячеек, требуемых для объединения. К примеру, в первой строке таблицы нам нужно две ячейки, а во второй строке только одна. Вот так писать ошибочно.
<table>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
Потому что это приведёт лишь к созданию «дыры» в таблице, поскольку число ячеек в первой строке не совпадает с числом ячеек во второй строке (рис. 4).
Рис. 4. Неверное число ячеек
Теперь мы добавляем атрибут colspan к элементу <td> (или к <th>, если это требуется) со значением 2 и получаем одну ячейку, ширина которой равна ширине двух ячеек.
<table>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
</table>
На рис. 5 показана таблица, для которой мы применили colspan.
Рис. 5. Результат использования colspan
Аналогично обстоит дело и с атрибутом rowspan, который объединяет ячейки по строкам или по вертикали, иными словами. В примере 3 показан код для создания таблицы, продемонстрированной на рис. 3.
Пример 3. Объединение ячеек
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Объединение ячеек</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">Вид соединения</td>
<td colspan="2">Поля допусков ширины шпоночного паза</td>
</tr>
<tr>
<td>Вал</td><td>Втулка</td>
</tr>
<tr>
<td>Свободное</td><td>H9</td><td>D10</td>
</tr>
<tr>
<td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
</tr>
<tr>
<td>Плотное</td><td colspan="2">P9</td>
</tr>
</table>
</body>
</html>
В данной таблице установлено три колонки и три строки. Первые две ячейки объединены по вертикали, а следующие две — по горизонтали.
Перейти к заданиям
И снова таблицы.. Учебник html
Глава 12
Данная глава является продолжением 4 главы про таблицы, отложил я её на потом по нескольким причинам. Во-первых, четвёртая глава и без того получилась длинноватой и «неповоротливой».. Во-вторых, не хотел, что бы Вы на тот момент погрязли в изучении таблиц и так сказать топтались на месте.. обучение, на мой взгляд, должно происходить живенько, интересно, а главное результативно! Зато теперь, когда у Вас сложилось общее представление о HTML, Вы разобрались с его базовой частью, сделали свой первый нехитрый сайт, можно наращивать багаж знаний, умений и навыков. Ну и в-третьих, я надеюсь, что Вы к этому времени, параллельно начали изучать CSS.. что разве ещё нет? жаль.. Дело в том, что далее в этом учебнике нет нет будут попадаться вещи, которые сами по себе могут показаться бесполезными и бессмысленными, однако в купе с другими науками они порой незаменимы!
Ладно, вернёмся к таблицам..
В качестве «полигона» для изучения нового материала возьмём вот такую жутко скучную таблицу:
Продукт | Белки | Жиры | Углеводы | ккал |
Хлеб ржаной | 4,7 | 0,7 | 49,8 | 214 |
Молоко | 2,8 | 3,2 | 4,7 | 58 |
Картофель | 2 | 0,1 | 19,7 | 83 |
Свинина | 11,4 | 49,3 | 9 | 489 |
Итого: | 20,9 | 53,3 | 83,2 | 844 |
Ну что ж, давайте поколдуем над ней..
Любая ячейка таблицы может быть определена как заголовок. Для того чтобы сделать ячейку таблицы заголовком нужно вместо знакомого тега <td> использовать тег <th>.
Например, вот так:
<table><tr>
<th>Данная ячейка является заголовком</th>
</tr>
</table>
Как правило, текст ячейки определённый в качестве заголовка отображается браузерами жирным шрифтом по центру ячейки.
Ну что давайте попробуем сделать некоторые ячейки нашей таблицы заголовками? смотрим пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Заголовок таблицы</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>
К тегу <th> могут применятся точно такие же атрибуты как и к тегу <td> о них мы говорили в 4 главе поэтому повторятся не буду, а просто перечислю их:
- width — Ширина ячейки в процентах или пикселях.
- height — Высота ячейки в процентах или пикселях.
- align — Выравнивает текст в ячейке:
- left — по левому краю.
- right — по правому краю.
- center — по центру.
- justify — по левому и правому краю.
- valign — Выравнивает текст в ячейке по вертикали:
- top — по верхнему краю.
- middle — по центру.
- bottom — по нижнему краю.
- baseline — по базовой линии.
- colspan — количество столбцов занимаемое ячейкой.
- rowspan — количество рядов занимаемое ячейкой.
- bgcolor — Цвет фона ячейки.
- background — Задает фоновый рисунок в ячейке.
- bordercolor — Цвет бордюра.
- title — Всплывающая подсказка
- nowrap — Запрещает перенос строк в ячейке.
Думаю понятно, а посему идем дальше..
Тег <caption> позволяет озаглавить таблицу, подписать её каким либо текстом. Данный тег должен располагаться внутри таблицы сразу после <table>
<table><caption>Название таблицы</caption>
<tr>
<td>ячейка</td>
</tr>
</table>
Вот пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Название таблицы</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>
К тегу <caption> может быть применён атрибут align — выравнивание названия таблицы по горизонтали с возможными значениями left, right и center, а также атрибут valign который говорит от том где должно располагаться название сверху — top или снизу — bottom таблицы.
Однако хочу отметить, что данные атрибуты в разных браузерах ведут себя по разному, так например, запись:
<caption align=»left»>Текст</caption>— для браузеров IE и Opera разместит название сверху таблицы по её левому краю, а для браузера Firefox это будет значить, что название следует размещать слева от самой таблицы.
Так же название таблицы или её краткое описание можно указывать с помощью атрибута summary тега <table>
Вот так:
<table summary=»описание таблицы»>Такое описание никак не отображается и не выводится на экран обычными браузерами, однако может быть использовано поисковыми системами, а так же речевыми браузерами.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Описание таблицы</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″ summary=»Энергетическая ценность продуктов питания»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>
Знакомимся с тегами: <thead>, <tbody> и <tfoot>. Данные теги являют собой емкость для строк таблицы (тег <tr>) позволяя тем самым группировать и логически ими управлять.
Так:
- Тег <thead> — (От Англ. table head — «голова» таблицы) Предназначен для группировки одной или нескольких верхних строк в таблице, делая тем самым «шапку» таблицы.
- Тег <tbody> — (От Англ. table body — «тело» таблицы), Как правило этим тегом группируют центральные строки в таблице с основным содержанием.
- Тег <tfoot> — (От Англ. table footer — нижний колонтитул таблицы) Определяет «подвал» таблицы, состоящий из одной или нескольких нижних строк.
Следует отметить несколько правил использования данных тегов:
Данные теги могут быть расположены только внутри таблицы — контейнера <table>.
Теги <thead> и <tfoot> допускается использовать только один раз для одной таблицы, на тег <tbody> данное правило не распространяется.
Структура таблицы при использовании всех трёх данных тегов должна выглядеть вот так:
<table><thead>
<tr>
<td>голова</td>
</tr>
</thead>
<tbody>
<tr>
<td> тело</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>подвал</td>
</tr>
</tfoot>
</table>
То есть сверху всегда должен быть контейнер <thead> потом <tbody> и <tfoot>, данные теги не могут пересекаться и быть вложенными друг в друга. А вот тег <tfoot> можно поменять местами с <tbody>, и что примечательно строки взятые в данный тег всё равно браузерами будут отображаться внизу таблицы.
К данным тегам допускается применять атрибуты выравнивания текста в ячейках align и valign, указывать цвет фона строк взятых в группу с помощью bgcolor, делать всплывающую подсказку с помощью title, однако на практике работать во всех браузерах будет только align и title.
Просто ради информации.. есть ещё атрибуты:
- char — Выравнивание относительно заданного символа.
- charoff — Смещение относительно указанного символа.
Но эти товарищи вообще не прижились ни в одном из известных браузеров! Толку с них как с козла молока.
Так зачем спросите Вы вообще нужны теги группирования строк если с помощью них практически ничего не сделать? Отвечу чуть ниже, а пока смотрим пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Группировка строк</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<thead bgcolor =»#deb887″ title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» bgcolor =»#faebd7″ title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» bgcolor =»#f5f5dc» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>
Теперь отвечу, зачем вообще нужны <thead>, <tbody> и <tfoot>..
Основное предназначение данных тегов это логическая группировка строк в группы, а это в свою очередь облегчает работу с таблицей, например через стили или скрипты, теперь не нужно определять тот же стиль для каждой строчки, а достаточно указать его для всей группы.. Я сказал стиль? Ах да я же забыл, что Вы еще незнакомы с CSS..
Выходя за рамки темы данной главы, хочу отметить, что практически к любому тегу применим замечательный атрибут style, с помощью которого можно сделать практически все, что касается дизайна того или иного элемента.. А еще есть не менее замечательный тег <style> который внедряет в страницу стили CSS.. но это всё материал из другого учебника, поэтому здесь мы говорить об этом не будем.
Просто покажу пока что малопонятный для Вас пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Группировка строк и CSS</title>
<style type=»text/css»>
table {width: 600px; margin: 30px; border: #b8860b 6px ridge; border-collapse: collapse;}
td,th,tr {border: #b8860b 2px outset; padding: 3px;}
caption{font: italic bold 16px Arial; padding: 10px;}
thead {background-color: #deb887; text-align: center;}
tbody {background-color: #faebd7; text-align: left;}
tfoot {background-color: #f5f5dc; text-align: left; font: italic 14px Arial;}
tr:hover {background-color:#b8860b; color: #ffffff;}
</style>
</head>
<body>
<table>
<caption>Энергетическая ценность продуктов питания:</caption>
<thead title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>
Курсивом в данном примере выделено стилевое описание тегов написанное с помощью средств CSS.
Группировать можно не только строки, но и столбцы таблицы с помощью тегов <col> и/или <colgroup> данные теги позволяют определить основные параметры столбцов таблицы с помощью следующих атрибутов:
- width — Ширина столбца в процентах или пикселях.
- align — Выравнивает текст в ячейке:
- left — по левому краю.
- right — по правому краю.
- center — по центру.
- justify — по левому и правому краю.
- valign — Выравнивает текст в ячейке по вертикали:
- top — по верхнему краю.
- middle — по центру.
- bottom — по нижнему краю.
- baseline — по базовой линии.
- bgcolor — Цвет фона ячейки.
- span — Количество столбцов, к которым следует применять параметры.
Давайте сгруппируем колонки нашей пробной таблицы про энергетическую ценность продуктов питания, она у нас состоит из пяти столбцов, значит, после тега <table> следует написать, что-то типа:
<col bgcolor=»#deb887″><col bgcolor=»#faebd7″>
<col bgcolor=»#faebd7″>
<col bgcolor=»#faebd7″>
<col bgcolor=»#f5f5dc»>
Для каждой колонки свой тег <col> с указанными параметрами, где первый тег это описание левой колонки таблицы. второй тег — группирует вторую колонку и далее по порядку..
Обратите внимание, что в нашей таблице вторая, третья и четвертая колонки имеют одинаковые параметры width=»100″ bgcolor=»#faebd7″ так вот чтобы не прописывать каждую одинаковую колонку отдельно можно воспользоваться атрибутом span, который указывает какое количество последующих колонок имеет идентичные параметры. В нашем случае запись приобретёт следующий вид:
<col bgcolor=»#deb887″><col span=»3″ bgcolor=»#faebd7″>
<col bgcolor=»#f5f5dc»>
Таким образом мы указали, что три колонки, начиная со второй, имеют одинаковую ширину и цвет фона. Представьте, если бы таких колонок было штук пятьдесят? как бы мы облегчили код.
Ну а вот собственно рабочий пример наших стараний:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>Группировка столбцов</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<col bgcolor=»#deb887″>
<col span=»3″ bgcolor=»#faebd7″>
<col bgcolor=»#f5f5dc»>
<thead title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>
Тег <colgroup> практически идентичен тегу <col> и имеет точно такие же атрибуты, так наш выше изложенный пример мог бы иметь такой вид:
<colgroup bgcolor=»#deb887″><colgroup span=»3″ bgcolor=»#faebd7″>
<colgroup bgcolor=»#f5f5dc»>
Никакой заметной разницы мы бы не увидели. Однако, некоторые отличия всё же есть.. Во-первых, <colgroup> может служить емкостью тля тегов <col>, конструкция такая:
<colgroup><col>
</colgroup>
Во-вторых, если бы мы к тегу <table> применили атрибут rules со значением groups (об этом атрибуте речь пойдёт ниже) эффект будет достигнут только при использовании <colgroup>.
Больше никакой разницы между этими тегами нет.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>colgroup</title>
</head>
<body>
<table border=»1″>
<colgroup bgcolor=»#deb887″ align=»left»>
<col span=»3″>
</colgroup>
<colgroup bgcolor=»#faebd7″ align=»center»>
<col span=»2″>
<col>
</colgroup>
<colgroup bgcolor=»#f5f5dc» align=»right»>
<col>
<col>
<col>
</colgroup>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
</table>
</body>
</html>
Обратите внимание, что в этом примере колонки таблицы поделены на три группы с помощью <colgroup>, в этих группах мы указали цвет фона и способ выравнивания, а ширину колонок мы задаём с помощью тегов <col>, которые находятся внутри контейнеров <colgroup>.
Как и в случае с группировкой строк, колонки группируются с основной целью дальнейшего воздействия на них через стили или скрипты.
Ранее в главе «Таблицы» мы с Вами познакомились с атрибутами border — ширина границы и bordercolor — цвет границы, но это не весь набор инструментов применимых к границам таблицы.. Есть ещё два атрибута: frame и rules о них мы и поговорим ниже.
Начнём с атрибута frame — рамка, данный атрибут применяется к тегу <table> и указывает на то, как следует отображать внешние границы таблицы, то есть вокруг самой таблицы, а не между её отдельными ячейками
Атрибут frame может принимать следующие значения:
- void — не отображать границы вокруг таблицы.
- border — отображать границы вокруг таблицы (по умолчанию).
- hsides — отображать только горизонтальные границы сверху и снизу.
- vsides — отображать только вертикальные границы слева и справа.
- above — отображать только верхнюю границу таблицы.
- below — отображать только нижнюю границу таблицы.
- lhs — отображать только левую границу.
- rhs — отображать только правую границу.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>frame</title>
</head>
<body>
<table border=»8″ frame=»hsides» cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<thead bgcolor =»#deb887″ title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» bgcolor =»#faebd7″ title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» bgcolor =»#f5f5dc» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>
А вот атрибут rules в отличие от frame наоборот указывает на то, как следует рисовать границы между ячейками таблицы.
Атрибут rules может принимать следующие значения:
- all — отображать все границы между ячейками.
- none — не отображать границы между ячейками.
- rows — отображать границы только между строками.
- cols — отображать границы только между стобцами.
- groups — отображать границы только между группами строк и группами столбцов образованными с помощью тегов: <thead>, <tbody>, <tfoot> и <colgroup>.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html>
<head>
<title>rules</title>
</head>
<body>
<table border=»1″ rules=»groups» cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<thead bgcolor =»#deb887″ title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» bgcolor =»#faebd7″ title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» bgcolor =»#f5f5dc» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>
Атрибут rules напрочь игнорирует браузер Opera, но как я уже не раз намекал такие проблемы можно решить с помощью средств CSS.
Тег <col> помимо своей прямой задачи, решает еще одну полезную штуку..
При загрузке таблицы браузеры не показывают её содержание до тех пор пока таблица полностью не загрузилась. Так вот при использовании тега <col>, браузер зная количество и будущие размеры колонок, сразу начинает показывать содержание, не дожидаясь полной загрузки.. что есть гуд! особенно при медленном соединении Интернета. Сайты свёрстанные табличным способом перестают «плясать» во время загрузки.По наблюдениям, на тег <th> обращают внимание поисковые системы, и слова в заголовке таблицы имеют больший «вес», в глазах поисковиков, нежели чем текст в обычных ячейках, что в свою очередь может повлиять на результаты выдачи по тому или иному поисковому запросу.
Всё что написано в этой главе, по большей своей части, ориентированно на логику таблиц, что облегчает жизнь всем!:
— Веб-мастерам, для более простого управления таблицей через стили или скрипты.
— Браузерам, и речевым браузерам для более корректного отображения или чтения таблиц.
— Алгоритмам поисковых систем, которые стараются найти эту самую логику на той или иной странице, чтобы выдать пользователю наиболее релевантные результаты.Так что не стоит пренебрегать тегами: <thead>, <tbody>, <tfoot>, <th>, <col>, <caption>, <colgroup> — они весьма полезны!