Создание таблиц в html. Рамка таблицы. Фон таблицы.
Таблицы при создании сайтов используются очень часто. Таблица в HTML задается тэгом:
<table> </table>
Тэг <TABLE> создает таблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Закрывающий тэг </table> обязателен.
Атрибуты:
align - выравнивание таблицы относительно документа. Возможные значения: center, left, right
background - строка, определяющая рисунок для заднего фона
bgcolor - определяет задний фон таблицы
border - толщина рамки в пикселах. Если атрибут не указан, то таблица выводится без видимой рамки
bordercolor - цвет рамки
cellspacing - задает расстояние между ячейками таблицы
cellpadding - задает расстояние между содержимым ячейки и ее рамкой
rules - описывает рамки вокруг таблицы. Может принимать следующие значения
-
all
отображает все части рамки внутри таблицы
cols
отображает все вертикальные рамки внутри таблицы
groups
отображает горизонтальные части рамки между группами таблицы THEAD, TBODY, TFOOT (tfoot устарел, не стоит им пользоваться)
none
удаляет все рамки вокруг таблицы
rows
отображает все горизонтальные рамки внутри таблицы
summary - описание таблицы для удобства людей, использующих браузеры, поддерживающие азбуку Бройля или речевой вывод
title - всплывающая подсказка
width - ширина таблицы в процентах или пикселах.
Таблица состоит из строк и столбцов (ячеек), поэтому необходимо указать их.
Тэг <TR> определяет строку в таблице. Парный ему тэг </TR> является необязательным, его можно не использовать.
Тэг <TD> определяет отдельную ячейку в таблице. Парный ему тэг </TD> является необязательным, его можно не использовать.
Тэг <TH> определяет заголовок для столбца в таблице. Обычно, выделяется жирным шрифтом. Закрывающий тэг </TH> обязателен.
Тэг <CAPTION> определяет заголовок для таблицы TABLE. Элемент CAPTION может располагаться только непосредственно после начального тэга TABLE. Элемент TABLE может включать только один элемент CAPTION. Закрывающий тэг обязателен.
Пример HTML-кода ввода таблицы:
<HTML>
<head>
<title>Таблица</title>
</head>
<BODY bgcolor="#C2DCDB">
<TABLE align="center" border=5 cellspacing=3>
<caption><Font size=6 color=blue>Заголовок таблицы</caption>
<tr><th bgcolor=silver><font color=red>Заголовок 1</th>
<th bgcolor=silver >Заголовок 2</th>
<th bgcolor=silver >Заголовок 3</th>
<tr><TD>Ячейка 1
<TD>Ячейка 2
<TD>Ячейка 3
<tr><TD>Ячейка 4
<TD>Ячейка 5
<TD>Ячейка 6
</TABLE>
</BODY>
</HTML>
Результат отображения таблицы браузером будет следующий:
