Logo Host-telecom.com — профессиональный хостинг в Европе! Море(!) аналитической информации!
IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware
Ваш сайт в 8 раз быстрее конкурентов. Хостинг от $2.95

VPS: SSD, KVM, бесплатные бэкапы и администрирование

Все необходимое для вашего сайта и лучшая техподдержка 24/7

хостинг сайтов ГиперХост — хостинг сайтов который Вы искали.

Виртуальный хостинг, Аренда VPS серверов, рация доменных имен, SSL сертификаты

💰 Самые низкие цены на домены

🔒 Отличный хостинг на SSD c бесплатными SSL

💻 Огромнейший выбор dedicated выделенных серверов

Виртуальные VPS серверы в РФ и ЕС

Dedicated серверы в РФ и ЕС

По промокоду CITFORUM скидка 30% на заказ VPS\VDS

2000 г

Как оформить таблицу?

Mike Melnikov (cherry-design@mail.ru)
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">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</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">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</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">&nbsp;</td>
<td bgcolor="#e0e0e0">&nbsp;</td>
<td bgcolor="#e0e0e0">& </td>
<td bgcolor="#e0e0e0">& </td>
</tr>
<tr>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</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. Варьируя толщину рамки, ее цвет, цвет текста, цвет подзаголовков и расстояние между ячейками, мы можем сделать практически любую таблицу. Главное - экспериментировать и тогда можно придумать совсем уж экзотические варианты.

Назад | Содержание | Вперед

 

VDS хостинг Облачный сервер в Нидерландах и Украине

Аренда виртуального сервера от $7.91

Партнёрская программа
$20 за клиента

Wildcard сертификаты от $74,97 в год.

Дешевые ssl сертификаты для домена

Sectigo сертификаты от $7,67 в год.

хостинг Украина Виртуальный хостинг для сайта от $4,87

Регистрация домена от $2 в год

Партнерская программа – $20 за клиента

VPS с гибкой конфигурацией: за 1€

Мощные выделенные сервера: от 25€

Собственный Дата-Центр
Поддержка 24/7

Бесплатный конструктор сайтов и Landing Page

Хостинг с DDoS защитой от 2.5$ + Бесплатный SSL и Домен

SSD VPS в Нидерландах под различные задачи от 2.6$

ATLEX Выделенные серверы: в Европе / в России.

Виртуальные серверы: в Европе / в России.

Партнерская программа

Новости мира IT:

Архив новостей

Последние комментарии:

IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

Информация для рекламодателей PR-акции, размещение рекламы — adv@citforum.ru,
тел. +7 495 7861149
Пресс-релизы — pr@citforum.ru
Обратная связь
Информация для авторов
Rambler's Top100 TopList liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня This Web server launched on February 24, 1997
Copyright © 1997-2000 CIT, © 2001-2019 CIT Forum
Внимание! Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Подробнее...