GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Создание рамок(16136)
Особенности верстки веб-страниц(12783)
Правила грамотной верстки сайта(9608)
Как оформить таблицу?(9602)
Несколько слов о <META HTTP-EQUIV...>(8717)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » HTML » Как оформить таблицу?

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


Михаил Мельников
cherry-design@mail.ru
http://www.cherry-design.spb.ru/

Для изменения вида таблицы мы можем воспользоваться некоторыми параметрами, управляющими её внешним видом:

  • bgcolor - цвет фона в таблице или ячейке;
  • border - толщина рамки таблицы;
  • cellspaсing - расстояние между ячейками;
  • cellpadding - расстояние от рамки до содержимого ячейки.

Обычная таблица
Начнём с обычной таблицы. Как видите, даже устанавливая атрибут border равным единице, мы не получаем рамку толщиной в один пиксель. Это происходит из-за того, что при отрисовке таблицы используются псевдотрёхмерные границы и реальная толщина рамки всегда больше указанной. В дополнение к цвету, которым нарисована таблица, используются ещё два: цвет тени и цвет подсветки. В IE имеются атрибуты borderColor, borderColorDark и borderColorLight, которые позволяют контролировать три этих цвета. Установив borderColorDark и borderColorLight равными цвету фона, мы можем добиться толщины рамки в один пиксель, но ведь это будет работать только в IE - а значит, нам не подходит.

<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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">&nbsp;</td>
<td bgcolor="#e0e0e0">&nbsp;</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. Варьируя толщину рамки, её цвет, цвет текста, цвет подзаголовков и расстояние между ячейками, мы можем сделать практически любую таблицу. Главное - экспериментировать, и тогда можно придумать совсем уж экзотические варианты.

 
19.01.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.