Создание рамок в таблице.

Уроки HTML для начинающих.
Таблица HTML (урокN7)

В этом уроке(N7) мы с Вами поговорим о рамках.
Самый простой способ создания рамки заключается в использовании параметров таблицы border, определяющего толщину рамки и bordercolor, который задает ее цвет.

таблица с рамкой

Код примера:

<table border="5">
<tr>
<td>таблица с рамкой</td>
</tr>
</table>

Ещё пример:

Код примера:

<table border=2 bordercolor=#ff0000 width=100 height=100 
cellpadding=6 cellspacing=0 bgcolor=#e0e0e0>
<tr>
<td>Содержимое</td>
</tr>
</table>

Параметр border определяет толщину рамки, bordercolor - ее цвет, cellpadding задает расстояние от рамки до содержимого таблицы.

---

Использование параметра таблицы cellspacing и bgcolor
Чтобы браузеры показывали рамки одинаково, можно использовать способ их создания, связанный со свойствами таблицы bgcolor и cellspacing. Через параметр bgcolor вся таблица "закрашивается" цветом, совпадающим с желаемым цветом рамки. Внутренней ячейке цвет фона нужно задать другой, например, белый. Сама рамка при этом образуется за счет того, что размер ячейки меньше размера самой таблицы, из-за этой разницы и получается видимая граница. Дистанция между ячейками управляется параметром таблицы cellspacing, который и уменьшает размеры ячейки на эту величину.

Код примера:

<table cellpadding=6 cellspacing=1 border=0 width=100 
height=100 bgcolor=#000000>
<tr>
<td bgcolor=#ffffff><table>
<tr>
<td>Содержимое</td>
</tr>
</table></td>
</tr>
</table>

Толщину рамки можно варьировать, изменяя значение параметра cellspacing, а отступы от края границы до содержимого - параметром cellpadding.

---

Вложенные таблицы
Еще один простой и универсальный способ построения рамки, работающий одинаково в разных браузерах, основан на наложении двух таблиц друг на друга. Своим подходом он напоминает предыдущий вариант.

Если мы возьмем прямоугольник из, например, красной бумаги и сверху на него наложим еще один прямоугольник желтого цвета, чуть меньшего размера, то увидим красную рамку. Только вместо листов бумаги используем тег TABLE, а цвет задаем параметром bgcolor.

Код примера:

<table width=100 height=100 border=0 cellspacing=0 
cellpadding=1 bgcolor=#FF0000>
<tr>
<td><table border=0 cellspacing=0 cellpadding=10 
bgcolor=#FFFF00 width=100 height=100>
<tr>
<td align=center>Содержимое</td>
</tr>
</table></td>
</tr>
</table>

В верхней таблице устанавливаем ширину и высоту таблицы по желанию, параметром bgcolor задаем цвет рамки, cellspacing присваиваем нулю, а cellpadding управляет толщиной границы. Чем этот параметр больше, тем толще будет и рамка.

Для внутренней таблицы надо обязательно задать ее цвет, отличный от цвета внешней, совпадающий с цветом фона веб-страницы, в примере, например, задан желтый. Параметр cellspacing или cellpading (в данном случае без разницы какой использовать) определяет расстояние от границы рамки до содержимого таблицы.

Ширина и высота внутренней таблицы обязательно должны совпадать с шириной и высотой внешней таблицы.

Замечание: Перенос строки в тексте автоматически добавляет пробел. Если рамка в некоторых местах получается толще, чем задумано, следует убрать лишние пробелы между тегами и тем самым сократить количество строк.

---

Использование стилей
С помощью стилей рамку можно применить к любому блочному тегу. Стили позволяют создать рамку проще и удобней, чем с использованием таблиц и предоставляют разные виды рамок. Смотрите примеры в разделе HTMLka ЗДЕСЬ

---

На этом урок заканчивается))Что не понятно пишите,будем разбираться вместе.
• Атрибуты таблицы. ЗДЕСЬ.
• Все цвета интернета ЗДЕСЬ
• Подобрать HTML код в ручную ЗДЕСЬ
• Коды цветов HTML ЗДЕСЬ



Понравился пост - добавь в закладки, чтобы не потерять:

Похожие по тематике посты - еще почитать:

.