Границы таблицы.Ранее в главе "Таблицы" мы с Вами познакомились с атрибутами border - ширина границы и bordercolor - цвет границы, но это не весь набор инструментов применимых к границам таблицы.. Есть ещё два атрибута: frame и rules о них мы и поговорим ниже. Начнём с атрибута frame - рамка, данный атрибут применяется к тегу <table> и указывает на то, как следует отображать внешние границы таблицы, то есть вокруг самой таблицы, а не между её отдельными ячейками Атрибут frame может принимать следующие значения:
Пример: <!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 может принимать следующие значения:
Пример: <!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. Полезные советы:
|
