Таблицы. Рамки таблиц

В этом уроке мы поговорим о рамках таблиц. Рамка вводится параметром

border. Зададим рамку равную 3 пикселям:

<table border="3">

Остальную таблицу допишете сами. Выглядеть это будет вот так:

Нашей рамке мы можем задать цвет. Пусть он будет синим в нашем примере:

<table border="3" bordercolor="#336699">

Все очень просто.

Если Вы хотите создать однотонную рамку (допустим черную), то мы

используем таблицу с черным фоном и атрибутом cellpadding, который, как

мы помним, задает размер поля ячейки. В нашу таблицу мы вкладываем

другую таблицу – в итоге получится, что вокруг вложенной таблицы

образовалась рамка с толщиной в пикселах, которую мы задали для атрибута

cellpadding, и цветом, который мы задали для фона (bgcolor="#000000", в

нашем случае) основной таблицы.

Для наглядности пример кода:

<table border="0" cellspacing="0" cellpadding="5" 
bgcolor="#000000">
<tr>
<td>
<table width="100%" border="0" bgcolor="цвет фона"> ... 
</table>
</td>
</tr>
</table>

Есть и другой вариант, но тоже с использованием вложенной таблицы.

Создаем основную таблицу, из трех рядов, первый и последний – будут

верхом и низом (гранями) нашей рамки. Второй ряд делим на три ячейки:

первая и последняя также будут гранями нашей рамки (им мы прописываем

соответственную толщину и нужный цвет). А в среднюю ячейку второго ряда

поселяем вложенную таблицу, в которой будет находиться нужное нам

содержимое (допустим, новости).

Второй вариант сложнее, но он может пригодиться, если вы хотите создать,

допустим, пунктирную рамку, в этом случае мы делаем картинку с

пунктирной линией, которую помещаем в качестве фона в первый и третий

ряд, и в первую и третью ячейки нашей основной таблицы, и получаем то,

что хотели.

Кстати, если мы уж говорим о тонкостях, то часто нам задают вопрос, как

сделать скругленные углы таблицам – очень просто, если Вы видите на

сайте таблицу со скругленными углами, то знайте, что на самом деле это

всего лишь четыре картинки, которые помещены по углам таблицы и создают

иллюзию, что таблица имеет скругленные углы. Без картинок такое не было

бы возможным.

Вообще-то не так трудно создать таблицу, и даже описанные выше тонкости

на самом деле не тонкости, любой из Вас может дойти до этого сам своим

умом, стоит только понять механизм Html, и включить фантазию.

Зато самое трудное, чтобы то, что мы сверстали, выглядело под разными

броузерами одинаково. Опытные кодеры стараются просматривать сверстанную ими страницу под

разными типами броузеров, чтобы везде все выглядело одинаково, у каждого

броузера свои капризы, так что сверстать сайт, чтобы везде выглядело

все одинаково, задача сложная.

Мы советуем по возможности проверять, как выглядит Ваша страница под

разными броузерами и разрешениями, т.к. при этом могут проявиться такие

дефекты, о которых Вам даже было неведомо.

Если Вы хотите делать свой сайт только в Internet Explorer и не в каких

других браузерах тестировать его не собираетесь, то вот то, что у разных

пользователей разное разрешение экрана надо знать. Для тех, кто не

знал: два самых используемых разрешения - 800x600 и 1024x768, а к

нынешнему времене большинство пользователей преобрели широкие экраны, из

- за чего на их экранах Ваш сайт бует "расползаться".

Никогда не стоит забывать о том, что вашу страницу могут смотреть под

большим или меньшим разрешением, и что нет абсолютной гарантии, что Вы

мастерский верстальщик (кодер) и ваши таблицы не поедут куда-нибудь.

И еще раз хотим напомнить (для тех, кто еще не понял): мы используем

таблицы, чтобы управлять элементами оформления на нашем сайте. Благодаря

таблицам мы можем много чего: от просто расположения текста рядом в три

колонки, до создания сложного оформления, где Ваши картинки будут

разнесены по разным ячейкам таблицы, а в итоге сложатся чудный и сложный

узор.

Поделиться...