Как сделать рамку таблицы тонкой и аккуратной.
Из этого урока Вы узнаете как сделать рамку таблицы
тонкой и аккуратной. По умолчанию объемная рамка таблицы выглядет
довольно уродливо.
Итак начнем. Для начала посмотрите на нижние таблицы
и сравните их.
В этой таблице объемная рамка выводимая по умолчанию.
Толщина рамки указана в 1пиксель.
В этой таблице рамка уже не выглядит объемной. Для
рамки таблицы, в теге <Body> , определен
черный цвет. А также определены два дополнительных атрибута. Это
атрибут cellspacing, значение которого равно
"0" (если не указать это значение то по умолчанию этот атрибут будет
иметь значение "2", а это в данном случае, нам не надо) и атрибут
cellpadding, значение которого равно "1".
А теперь взгляните на нижнюю таблицу.
Видите какая тонкая и аккуратная получилась рамка
в этой таблице. В этой таблице указаны следующие атрибуты;
- border="0"
- Толщина рамки таблицы равна "0"
- cellspacing="1"
- Расстояние между границами соседних ячеек равно
"1"
- bgcolor="#000000"
- Этим атрибутом мы определили черный цвет фона
таблицы
Я также определил цвет фона для каждой строки таблицы
(элемент таблицы <Tr>). И сделал его
таким же как и цвет фона страницы на которой находится эта таблица.
Посмотрите исходный код этой таблицы;
<table width="100%" border="0"
cellspacing="1" bgcolor="#000000">
<tr bgcolor="#F5E8FF">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#F5E8FF">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#F5E8FF">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Надеюсь, что понятно.
Ну теперь Вы знаете как сделать таблицу с тонкой рамкой. А сейчас
я расскажу как сделать таблицу только с внешней тонкой рамкой, то
есть без рамок ячеек. Сначала пишем код для таблицы из одной строки
с одной единственной ячейкой. Определим для этой таблицы цвет фона
таким цветом, каким Вы хотели бы видеть свою рамку. Определим расстояние
между границами соседних ячеек равным "0" (cellspacing="0")
и расстояние между рамкой ячейки и ее содержанием равным "1"
(cellpadding="1"). Вот что получилочь;
<table cellspacing="0" cellpadding="1"
bgcolor="#000000">
<tr>
<td> </td>
</tr>
</table>
Теперьв эту ячейку вставляем любую таблицу, с одним условием в теге
<Body> запишем следующие атрибуты с их значениями;
- cellpadding="0"
- Расстояние между рамкой ячейки и ее содержимым
равно "0"
- cellspacing="0"
- Расстояние между границами соседних ячеек равно
"0"
- bgcolor="#000000"
- Цвет фона таблицы, как правило такой же как и
цвет фона самой страницы.
Вот, что получилось после того как вставили таблицу
в ячейку первой таблицы;
<table cellspacing="0" cellpadding="1"
bgcolor="#000000">
<tr>
<td>
<table cellspacing="0"
bgcolor="#99FF00" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
А вот и сама таблица;
Ну как? Все понятно?
Думаю, что на этом этот урок можно считать оконченным.
|
