|
div.main {margin-left: 20pt; margin-right: 20pt}
Как оформить таблицу?
Михаил
Мельников
Web-studio
"Cherry-Design" Давайте-ка займёмся сегодня оформлением таблиц. Вам
наверняка не нравится, как оформлены таблицы по-умолчанию. То, что называется
рамкой, практически никогда не вписывается в дизайн. А их псевдотрёхмерность
просто ужасна!
Для изменения вида таблицы мы можем воспользоваться некоторыми параметрами,
управляющими её внешним видом:
bgcolor - цвет фона в таблице или ячейке;
border - толщина рамки таблицы;
cellspaсing - расстояние между ячейками;
cellpadding - расстояние от рамки до содержимого ячейки.
Обычная таблица
Начнём с обычной таблицы. Как видите, даже устанавливая атрибут border
равным единице, мы не получаем рамку толщиной в один пиксель. Это происходит
из-за того, что при отрисовке таблицы используются псевдотрёхмерные границы и
реальная толщина рамки всегда больше указанной. В дополнение к цвету, которым
нарисована таблица, используются ещё два: цвет тени и цвет подсветки. В IE
имеются атрибуты borderColor, borderColorDark и
borderColorLight, которые позволяют контролировать три этих цвета.
Установив borderColorDark и borderColorLight равными цвету фона, мы можем
добиться толщины рамки в один пиксель, но ведь это будет работать только в IE -
а значит, нам не подходит.
<table width="100%" cellpadding="0" cellspacing="0"
border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
. . .
. . .
. . .
</table>
Таблица с тонкой рамкой
Но, к счастью, есть другой способ, позволяющий делать красивые таблички с
тонкими рамками. И этот способ - вложенные таблицы. В этом случае во внутренней
таблице устанавливается ненулевое расстояние между ячейками, а во внешней
прописывается цвет фона равный цвету рамки. Благодаря этому в зазоры ячеек
становится видно фон внешней таблицы. И если мы закрасим ячейки внутренней
таблицы цветом фона страницы, то нашему взору предстанет красивая табличка с
тонкими рамками.
<table width="368" cellpadding="0"
cellspacing="0"
border="0"
bgcolor="#000000"><tr><td>
<table
width="100%" cellpadding="0" cellspacing="1"
border="0">
<tr>
<td bgcolor="#ffffff"> </td>
<td bgcolor="#ffffff"> </td>
<td bgcolor="#ffffff"> </td>
<td bgcolor="#ffffff"> </td>
</tr>
.
. .
. . .
. . .
</table>
</td></tr></table>
Таблица с толстой рамкой
Практически то же самое, что и таблица с тонкой рамкой, за исключением того,
что мы изменили значение атрибута cellspacing, сделав его равным 3
пикселям. Используя подобный механизм, можно придать рамке любую желаемую
толщину.
<table width="368" cellpadding="0" cellspacing="0"
border="0"
bgcolor="#000000"><tr><td>
<table
width="100%" cellpadding="0" cellspacing="3"
border="0">
<tr>
<td
bgcolor="#ffffff"> </td>
<td
bgcolor="#ffffff"> </td>
<td
bgcolor="#ffffff"> </td>
<td
bgcolor="#ffffff"> </td>
</tr>
. . .
. . .
. . .
</table>
</td></tr></table>
Таблица с фоновой подсветкой ячеек
Если мы установим цвет ячеек внутренней таблицы отличным от цвета фона, то
получим подсветку ячеек. Таким образом очень удобно выделять заголовки столбцов
или подсвечивать, например, каждую вторую строчку в длинной таблице, чтобы в ней
было легче ориентироваться.
<table width=368 cellpadding="0" cellspacing="0"
border="0"
bgcolor="#000000"><tr><td>
<table
width="100%" cellpadding="0" cellspacing="1"
border="0">
<tr>
<td bgcolor="#e0e0e0"> </td>
<td bgcolor="#e0e0e0"> </td>
<td bgcolor="#e0e0e0"> </td>
<td bgcolor="#e0e0e0"> </td>
</tr>
<tr>
<td
bgcolor="#ffffff"> </td>
<td
bgcolor="#ffffff"> </td>
<td
bgcolor="#ffffff"> </td>
<td
bgcolor="#ffffff"> </td>
</tr>
.
. .
. . .
. . .
</table>
</td></tr></table>
Таблица с горизонтальными линиями
А теперь попробуем сделать табличку, содержащую только горизонтальные
разделительные линии. Предыдущий способ со вложенными таблицами не подойдёт,
т.к. при вложенных таблицах мы всегда получаем и горизонтальные и вертикальные
линии рамки. При помощи CSS или атрибута frame в IE4 мы можем получить
желаемое. Но ведь мы хотим, чтобы всё гляделось ещё и в Netscape, причём,
желательно, начиная с третьих версий броузеров.
Выход заключается в том, чтобы в качестве горизонтальной разделительной линии
использовать ячейку самой таблицы. Для этого мы воспользуемся атрибутом
colspan, чтобы линия была по ширине всей таблицы, прозрачный пиксель для
фиксации высоты ячейки в один пиксель и закрасим ячейку цветом разделительной
линии. Всё! Осталось только разместить данную конструкцию между ячейками с
данными.
<table width="368" cellpadding="0" cellspacing="0"
border="0">
<tr><td colspan="4"
bgcolor="#000000"><img src="1x1.gif"
width="1" height="1"
border="0"></td></tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
.
. .
. . .
. . .
<tr><td colspan="4"
bgcolor="#000000"><img src="1x1.gif"
width="1" height="1"
border="0"></td></tr>
</table>
|
| 1-1 |
1-2 |
1-3 |
1-4 |
|
| 2-1 |
2-2 |
2-3 |
2-4 |
|
| 3-1 |
3-2 |
3-3 |
3-4 |
|
| 4-1 |
4-2 |
4-3 |
4-4 |
|
Таблица без рамки
А можно сделать таблицу и вовсе без рамки. Для этого не нужно использовать ни
вложенных таблиц, ни других трюков. Достаточно просто обнулить атрибут
border и установить cellspacing равным желаемому просвету между
ячейками. Теперь нужно закрасить все ячейки в желаемый цвет и - пожалуйста:
<table width="368" cellpadding="0" cellspacing="1"
border="0">
<tr>
<td
bgcolor="#e0e0e0">1-1</td>
<td
bgcolor="#e0e0e0">1-2</td>
<td
bgcolor="#e0e0e0">1-3</td>
<td
bgcolor="#e0e0e0">1-4</td>
</tr>
. . .
. . .
. .
.
</table>
| 1-1 |
1-2 |
1-3 |
1-4 |
| 2-1 |
2-2 |
2-3 |
2-4 |
| 3-1 |
3-2 |
3-3 |
3-4 |
| 4-1 |
4-2 |
4-3 |
4-4 |
Как видите, мы можем достаточно сильно менять внешний вид таблицы при помощи
стандартных средств HTML 3.2. Варьируя толщину рамки, её цвет, цвет текста, цвет
подзаголовков и расстояние между ячейками, мы можем сделать практически любую
таблицу. Главное - экспериментировать, и тогда можно придумать совсем уж
экзотические варианты.
| 
