Самый простой способ создания рамки заключается в использовании свойств таблицы, точнее параметра border. Рамки созданные таким образом незначительно отличаются по своему виду в Internet Explorer (Рис. 1) и Netscape Navigator (Рис. 2).
Рис. 1. Рамка в Internet Explorer |
Рис. 2. Рамка в Netscape Navigator |
Пример 1. Рамка, созданная параметром border таблицы
<table border="2" width="100"
height="100" bordercolor="#ff0000" cellpadding="6"
cellspacing="0" bgcolor="#e0e0e0"> <tr> <td> </td> </tr> </table> |
Параметр border определяет толщину рамки, bordercolor - ее цвет, cellpadding задает расстояние от рамки до содержимого таблицы.
Один из универсальных и распространенных способов создания рамки. Создаем таблицу (рис. 3) и заливаем крайние ячейки нужным цветом (рис. 4). Толщина рамки в этом случае определяется толщиной ячейки. Обязательно следует поместить в эти ячейки таблицы распорку - прозрачный рисунок размером 1 на 1 пиксел, иначе в Netscape этот способ работать не будет.
Рис. 3 |
Рис. 4 |
Пример 2. Создание рамки заливкой цветом ячеек таблицы
<table width="200" border="0" height="200"
cellspacing="0" cellpadding="0"> <tr bgcolor="#FF6633"> <td width="2" height="2"><img src="1x1.gif" width="2" height="2"></td> <td height="2"><img src="1x1.gif" width="2" height="2"></td> <td width="2" height="2"><img src="1x1.gif" width="2" height="2"></td> </tr> <tr> <td width="2" bgcolor="#FF6633"><img src="1x1.gif" width="2" height="2"></td> <td align=center>Содержимое</td> <td width="2" bgcolor="#FF6633"><img src="1x1.gif" width="2" height="2"></td> </tr> <tr bgcolor="#FF6633"> <td width="2" height="2"><img src="1x1.gif" width="2" height="2"></td> <td height="2"><img src="1x1.gif" width="2" height="2"></td> <td width="2" height="2"><img src="1x1.gif" width="2" height="2"></td> </tr> </table> |
В данном примере делается красная рамка толщиной 2 пиксела, она смотрится наиболее элегантно. Параметры таблицы cellspacing и cellpadding приравниваются нулю, чтобы рамка оставалась нужной толщины и без зазоров.