Таблицы
Таблицы используются, когда вам необходимо показать «табличные данные», например, информацию, логически упорядоченную в столбцы и ряды.
Содержание
Синтаксис создания таблиц
Для начала необходимо ознакомится с общей структурой создания таблицы. Первым идёт открывающий тег контейнера таблицы <table>
, который указывает, на то, что именно с этого места начинается таблица. Естественно, что этот тег является парным, и по окончанию таблицы его необходимо закрыть. Внутри этого контейнера располагаются элементы структуризации таблицы. Как известно, таблица состоит из колонок и строк. Для каждой строки и каждой ячейки таблицы существует свой элемент. После открытия элемента <table>
мы должны указать элемент строки который в свою очередь содержит любое количество элементов-ячеек. Для задания строк таблицы используются элементы <tr>
(Table Row), а для задания ячейки таблицы используется элемент <td>
(Table Data).
1 2 3 4 5 6 7 8 9 10 |
<table> <!--Открытие таблицы--> <tr> <td> Ячейка 1 строки 1 </td> <td> Ячейка 2 строки 1 </td> </tr> <tr> <td> Ячейка 1 строки 2 </td> <td> Ячейка 2 строки 2 </td> </tr> <!--закрытие второй строки таблицы--> </table> |
Атрибут border
По умолчанию таблицы отображаются без видимых границ, воспользуемся атрибутом border для указания наличия границы таблицы (присутствие атрибута border указывает на то, что броузер должен показать таблицу с видимыми границами).
Атрибут border может указывать на толщину границы таблицы следующим образом:
1 |
<Table border ="5"> <!—Открытие таблицы и указание толщины таблицы--> |
Заголовок таблицы
Любая таблица может иметь чётко привязанный к ней заголовок, который определяется элементом <caption>
. Заголовок может содержать любой текст, по умолчанию распологается над таблицей, текст заголовка равняется по центру.
Внутри элемента <caption>
можно вкладывать любые элементы физического и логического форматирования, чтобы как-то разнообразить вид заголовка.
У элемента <caption>
существует атрибут align
с помощью которого заголовок можно размещать в верху или внизу таблицы. Его значения могут быть равны: top
и bottom
.
1 |
<caption align='bottom'> <!--Размешение заголовка внизу--> |
Атрибуты тега <table>
Атрибут cellspacing
Атрибут cellspacing
управляет расcтояниями между отдельными ячейками. Если внимательно присмотреться к таблицам, то легко заметить, что таблица имеет двойные рамки, т.е. каждая ячейка заключена в свою рамку. Через значение атрибута cellspacing
задаются растояния между рамками отдельных ячеек. Ниже приведён пример с значением cellspacing="15"
(пикселям).
1 |
<table border='1' cellspacing='15'> <!--Открытие таблицы, указание атрибута cellspacing--> |
Атрибут cellpadding
Атрибут cellpadding
указывает отступ между рамкой ячейки и данными внутри ячейки. Не очень прятно когда крайние буквы сливаются с рамками ячеек, поэтому очень часто приходится указывать этот атрибут.
1 |
<table border='1' cellpadding='5'> <!--Открытие таблицы, указание атрибута cellpadding--> |
Атрибуты width и heidht
При размещении таблицы в потоке данных броузер пытается автоматически подобрать её высоту и ширину, исходя из заданных атрибутов cellspasing
, cellpadding
, размеров и начертаний шрифтов текста, данных размещённых в ячейках, размера окна броузера. Главное правило автоматического подбора размеров таблицы заключается в том, что ширина таблицы не должна превышать ширину окна.
Но достаточно часто возникает необходимость задать фиксированные размеры таблицы. В спецификации HTML4 разрешается изменять только ширину таблицы, используя атрибут width
. Ширина элемента <table>
может задаваться в относительных (процентах) единицах и в псевдоабсолютных единицах (пикселях).
1 2 3 4 5 6 7 8 |
<table border='1' cellpadding='4' cellspacing='0' width='100%'><!--Открытие таблицы--> <caption> Расписание поездов</caption> <tr> <td width='50%' allign='left'> Направление</td> <td align='center'> Время отправления</td> <td align='center'> Время прибытия</td> </tr> </table> |
Атрибут align
Этот атрибут используется для выравнивания данных внутри таблицы. Соответсвенно его значения могут быть равны left
, right
, center
.
border
, cellspacing
, cellpadding
, align
, width
, но Microsoft добавила атрибут вертикального выравнивания valign
для своего броузера. Он может иметь значения top
, center
, bottom
. По умолчанию он равен значению center
.Атрибуты bordercolor, background и bgcolor
- атрибут
bgcolor
отвечает за цвет фона элемента таблицы. - атрибут
bordercolor
используется для изменения цвета рамок таблицы. - фоновый рисунок вставляется при помощи атрибута
background
(в значении этого атрибута указывается путь к рисунку, который нужно сделать фоновым. Например:background="./images/p12.jpg"
).