Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Учебник HTML.doc
Скачиваний:
80
Добавлен:
11.03.2016
Размер:
609.28 Кб
Скачать

Границы таблицы.

Ранее в главе 4 " Таблицы"мы с Вами познакомились с атрибутами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" width="400" 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" width="500" 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.