Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится
создавать те или иные сложные элементы на сайте
(Например: оптекание текстом графики, создание колонок с текстом, фиксация
элементов сайта).
Однако, стандарт html имеет небольшое количество стандартных элементов
оформления страницы, и не все элементы одинаково отображаются в разных
браузерах. Каждая компания пытается разработать свой собственный html,
порой уходя далеко от основной концепции html, разработанной консорциумом WWW.
Поэтому веб-мастеру приходится эксперементировать с элементами, которые
являются общими для всех браузеров.
Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать
информацию.
Кроме того, таблицы в html имеют атрибут "border="0" - этот атрибут со
значением "0" скрывает границы таблицы т.е остаётся видно содержимое
ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.
Цветная граница рамки таблицы.
Сразу отмечу, что в html, по умолчанию, встроен атрибут, который
отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не
подойдёт, потому что данный атрибут поддерживается только браузером
Internet Explorer. В других браузерах этот элемент не работает. Но
нам необходимо, чтобы страница одинаково отображалась в любом
браузере. К нам на помощь приходят таблицы. Давайте сначала создадим
обычную таблицу.
<table width="255" height="72" border="0" align="left" cellpadding="0" cellspacing="2" bgcolor="#000000">
<tr>
<td valign="top"> </td>
</tr>
</table>
Атрибут "border" должен быть равен "0". cellspacing
приравняем к "2" (чем больше число, тем шире получится
рамка таблицы). Атрибут "cellspacing" служит для того,
чтобы указать расстояние между двумя ячейками. В данном
случае, он будет указывать расстояние между двумя
таблицами. Зальём таблицу черным цветом, используя
атрибут "bgcolor" Вообще вы можете выбрать любой другой
цвет, в зависимости от того, какого цвета будет ваша
рамка.
<td valign="top"> </td>
С помощью этого тега указывается, откуда следует
располагать информацию. В данном примере нам понадобится
расположить информацию, начиная с верхнего края таблицы.
Вставляем в ячейку нашей таблицы другую таблицу.
<table width="251" height="69" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="69"><div align="center">Текст</div></td>
</tr>
</table>
Указываем цвет фона таблицы. В данном случае, нам
понадобится белый фон. Вот и всё. Наша таблица готова.
Теперь мы имеем таблицу, рамка которой будет отображаться во
всех браузерах одинаково.
|