Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design"
Давайте-ка займемся сегодня оформлением таблиц. Вам наверняка не нравится, как оформлены таблицы по умолчанию. То, что называется рамкой, практически никогда не вписывается дизайн. А их псевдотрехмерность просто ужасна!
Для изменения вида таблицы мы можем воспользоваться некоторыми параметрами, управляющими ее внешним видом:
Начнем с обычной таблицы. Как видите, даже устанавливая атрибут 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. Варьируя толщину рамки, ее цвет, цвет текста, цвет подзаголовков и расстояние между ячейками, мы можем сделать практически любую таблицу. Главное - экспериментировать и тогда можно придумать совсем уж экзотические варианты.
Назад | Содержание | Вперед