2015-10-16
496
Для описания таблиц используется блочный тег <table>. Для создания строки в таблице используется контейнер <tr>…</tr> (Table Row). Строка таблицы разбивается на ячейки применением контейнера <td>…</td> столько раз, сколько требуется ячеек в строке, то есть столбцов. Для создания заголовка таблицы используется тег <caption>, который располагает название таблицы над ней, если употреблен атрибут align=top, и под ней при align=bottom. Таким образом, простая таблица представляет собой конструкцию вида:
<table>
<caption align=top> Заголовок над таблицей> </caption>
<tr> <td>…</td>…<td>…</td> </tr>
………………………………………
<tr> <td>…</td>…<td>…</td> </tr>
</table>
В ней число строк определяется числом применения тега <tr>, а число столбцов – числом применения тега </td> внутри строки, то есть в контейнере <tr>…</tr>. Содержимое ячеек – текст, изображение – помещается в контейнер <td>…</td>. Заголовки столбцов и строк, то есть "шапка таблицы", задаются вставкой вместо тега <td> тега <th> (Table Header). В примере 11 демонстрируется создание простой таблицы.
|
|
|
Пример 11. Простая таблица.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head> <title>Правильная таблица</title> </head>
<body>
<table>
<tr>
<td>Город</td> <td>Население, тыс. чел.</td>
</tr>
<tr>
<td>Москва</td>
<td>10 383</td>
</tr>
<tr>
<td>Санкт-Петербург</td>
<td>4 661</td>
</tr>
<tr>
<td>Новосибирск</td>
<td>1 426</td>
</tr>
</table>
</body>
</html>
Рисунок 14. Простая таблица
Из примера 11 следует, что простая таблица требует значительного оформления. Форматирование таблицы обеспечивается многими атрибутами, применяемые в табличных тегах:
· nowrap – требует размещения текста в одной строке для тегов <th>, <td>;
· colspan=n – растягивает ячейку над n обычными ячейками строки;
· rowspan=m – задает число строк, на которые растягивается ячейка, при этом соответствующее количество m строк должно находиться под растягиваемой ячейкой;
· width – атрибут в теге <table> задает ширину всей таблицы, а в тегах <th>, <td> – ширину ячейки. Ширина задается в пикселях: width=k, или в процентах: width=k%;
· cellpadding – определяет ширину пустого пространства между содержимым ячейки и ее границами;
· cellspacing – определяет ширину промежутков между ячейками в пикселах. По умолчанию cellspacing=2;
· align – выравнивает содержимое ячейки по горизонтали: align=bleedleft – прижимает содержимое ячейки вплотную к левому краю; align=left – прижимает содержимое ячейки к левому краю с учетом атрибута cellpadding; align=right – прижимает содержимое ячейки к правому краю с учетом атрибута cellpadding; align=center – располагает содержимое ячейки по центру;
|
|
|
· valign – выравнивает содержимое ячейки по вертикали: valign=top – по верхней границе; valign=bottom – по нижней границе; valign=middle – центрирует по вертикали;
· border – задает рамку для таблицы. По умолчанию принимается значение border=0 – нет линий рамки;
· bgcolor – устанавливает цвет фона в элементах таблицы. Цвет определяется RGB-кодом или стандартным названием;
· background=URL – в тегах <table> и <td> задает фоновое изображение из URL-файла.
HTML допускает вложенные таблицы. Следующий пример демонстрирует технологию применения таблиц.
Пример 12. Вложенные таблицы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Применение вложенных таблиц</title>
</head>
<body text="#000000" bgcolor="#ffffff">
<table width="600" bgcolor="#cc0000" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table width="100%" cellspacing="1" cellpadding="3" border="0">
<tr bgcolor="#ffcc00">
<th width="60%">Город</th>
<th width="40%">Население, тыс. чел.</th>
</tr>
<tr bgcolor="#fff0cc">
<td>Москва</td>
<td>10 383</td>
</tr>
<tr bgcolor="#fff0cc">
<td>Санкт-Петербург</td>
<td>4 661</td>
</tr>
<tr bgcolor="#fff0cc">
<td>Новосибирск</td>
<td>1 426</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Старт-тег
<table width="600" bgcolor="#cc0000" cellspacing="0" cellpadding="0" border="0">
определяетаблицу, которая состоит из одной ячейки, шириной 600 пикселов, залитой красным цветом. Эта таблица используется как подложка второй, вложенной в нее таблицы, определенной старт-тегом
<table width="100%" cellspacing="1" cellpadding="3" border="0">
Подложка просвечивается через щели между ячейками вложенной таблицы, которые сформированы при помощи атрибута cellspacing="1". Назначения остальных тегов понятны из кода документа.
Рисунок 15. Таблицы в HTML
