Как оформить таблицу?Давайте-ка займёмся сегодня оформлением таблиц. Вам наверняка не нравится, как оформлены таблицы по-умолчанию. То, что называется рамкой, практически никогда не вписывается в дизайн. А их псевдотрёхмерность просто ужасна!Для изменения вида таблицы мы можем воспользоваться некоторыми параметрами, управляющими её внешним видом:
Начнём с обычной таблицы. Как видите, даже устанавливая атрибут border равным единице, мы не получаем рамку толщиной в один пиксель. Это происходит из-за того, что при отрисовке таблицы используются псевдотрёхмерные границы и реальная толщина рамки всегда больше указанной. В дополнение к цвету, которым нарисована таблица, используются ещё два: цвет тени и цвет подсветки. В IE имеются атрибуты borderColor, borderColorDark и borderColorLight, которые позволяют контролировать три этих цвета. Установив borderColorDark и borderColorLight равными цвету фона, мы можем добиться толщины рамки в один пиксель, но ведь это будет работать только в IE - а значит, нам не подходит.
<table width="100%" cellpadding="0" cellspacing="0" border="1">
Но, к счастью, есть другой способ, позволяющий делать красивые таблички с тонкими рамками. И этот способ - вложенные таблицы. В этом случае во внутренней таблице устанавливается ненулевое расстояние между ячейками, а во внешней прописывается цвет фона равный цвету рамки. Благодаря этому в зазоры ячеек становится видно фон внешней таблицы. И если мы закрасим ячейки внутренней таблицы цветом фона страницы, то нашему взору предстанет красивая табличка с тонкими рамками.
<table width="368" cellpadding="0" cellspacing="0" border="0"
Практически то же самое, что и таблица с тонкой рамкой, за исключением того, что мы изменили значение атрибута cellspacing, сделав его равным 3 пикселям. Используя подобный механизм, можно придать рамке любую желаемую толщину.
<table width="368" cellpadding="0" cellspacing="0" border="0"
Если мы установим цвет ячеек внутренней таблицы отличным от цвета фона, то получим подсветку ячеек. Таким образом очень удобно выделять заголовки столбцов или подсвечивать, например, каждую вторую строчку в длинной таблице, чтобы в ней было легче ориентироваться.
<table width=368 cellpadding="0" cellspacing="0" border="0"
А теперь попробуем сделать табличку, содержащую только горизонтальные разделительные линии. Предыдущий способ со вложенными таблицами не подойдёт, т.к. при вложенных таблицах мы всегда получаем и горизонтальные и вертикальные линии рамки. При помощи CSS или атрибута frame в IE4 мы можем получить желаемое. Но ведь мы хотим, чтобы всё гляделось ещё и в Netscape, причём, желательно, начиная с третьих версий броузеров. Выход заключается в том, чтобы в качестве горизонтальной разделительной линии использовать ячейку самой таблицы. Для этого мы воспользуемся атрибутом colspan, чтобы линия была по ширине всей таблицы, прозрачный пиксель для фиксации высоты ячейки в один пиксель и закрасим ячейку цветом разделительной линии. Всё! Осталось только разместить данную конструкцию между ячейками с данными.
<table width="368" cellpadding="0" cellspacing="0" border="0">
А можно сделать таблицу и вовсе без рамки. Для этого не нужно использовать ни вложенных таблиц, ни других трюков. Достаточно просто обнулить атрибут border и установить cellspacing равным желаемому просвету между ячейками. Теперь нужно закрасить все ячейки в желаемый цвет и - пожалуйста:
<table width="368" cellpadding="0" cellspacing="1" border="0">
Как видите, мы можем достаточно сильно менять внешний вид таблицы при помощи стандартных средств HTML 3.2. Варьируя толщину рамки, её цвет, цвет текста, цвет подзаголовков и расстояние между ячейками, мы можем сделать практически любую таблицу. Главное - экспериментировать, и тогда можно придумать совсем уж экзотические варианты. Источник: cherry-design.spb.ru |
КОНТАКТЫ
г. Екатеринбург info@vismech.ru |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
текущее: НОВОСТИ 05.12.2013 - Уход за флэш-накопителем 05.12.2013 - Компьютер самопроизвольно выключается 05.12.2013 - Почему не запускается компьютер? 27.11.2013 - Canon Legria HF R406 - Описание видеокамеры 27.11.2013 - TravelMate P645 новый лэптоп бизнес-класса от Acer |