Использование таблицИспользование таблиц с невидимой границей для разделения страницы на блоки - довольно мощный прием для верстки веб-страниц, который нашел применение в большинстве сайтов. Верстка с помощью таблиц используется в следующих случаях:
- выравнивание элементов на странице, по правой, левой стороне, по центру и их сочетание;
- создание колонок;
- заливка областей однородным цветом или фоном;
- создание вертикальных линий;
- объединение разрезанных кусочков изображений в одно;
- отступы вокруг текста;
- создание различных рамок. Ниже описаны некоторые широко используемые приемы использования таблиц.
Создание колонокКолонки легко делаются с помощью таблицы с двумя ячейками. Надо только задать параметр cellpadding или cellspacingотличным от нуля, чтобы осталось расстояние между колонками. Пример 1. Создание двух колонок с помощью таблицы
<table border=0 cellpadding=10 cellspacing=0>
<tr>
<td valign=top>1 колонка</td>
<td valign=top>2 колонка</td>
</tr>
</table> |
|
По умолчанию содержимое ячейки выравнивается по ее центру, поэтому обязательно используем параметр valign=top, чтобы в колонках все было выровнено по верхнему краю. Какой параметр выбрать - cellpadding или cellspacing зависит от вкуса и желания. В данном случае абсолютно никакой разницы нет.
Колонки с разделителямиДве и более колонки позволяют разбить длинный текст или другое содержимое на блоки. Такие блоки разделяют между собой вертикальной линией, чтобы взгляд читателя не перескакивал с одной колонки на другую. Колонки с разделителем создаются с помощью таблицы с тремя ячейками. Среднюю ячейку делаем шириной 1-2 пиксела и заливаем каким-нибудь цветом с помощью bgcolor - вот и получится линия. А параметр cellspacingопределяет расстояние между линией и текстом. Пример 2. Создание двух колонок с линией между ними
<table border=0 cellpadding=0 cellspacing=10>
<tr>
<td valign=top>1 колонка</td>
<td width=1 bgcolor=#000000><img src=1x1.gif width=1 height=1></td>
<td valign=top>2 колонка</td>
</tr>
</table> |
|
По умолчанию содержимое ячейки выравнивается по ее центру, поэтому обязательно используем параметр valign=top, чтобы в колонках все было выровнено по верхнему краю. Чтобы разделитель был виден в Netscape, в ячейку нужно что-нибудь поместить. Неразделяемый пробел для этой цели не годится, он может сделать линию слишком толстой, что нам не нужно. Самое идеальное - прозрачный рисунок размером 1 на 1 пиксел (в примере он называется 1x1.gif).Если значение параметра cellpadding задать больше нуля, то линия получится слишком толстой. Поэтому расстояние между колонками следует менять с помощью cellspacing.
Создание вертикальных линийСоздаем таблицу, одна из ячеек которой имеет ширину 1-2 пиксела. Параметры cellpadding и border должны быть равны нулю, а cellspacing определяет расстояние от текста до линии. А затем в этой ячейке указываем фон нужного цвета: <td width=1 bgcolor=#ff0000>
Чтобы линия была видна в Netscape, в ячейку нужно поместить прозрачный рисунок размером 1 на 1 пиксел. Пример 3. Вертикальная линия
<table width=600 cellpadding=0 cellspacing=12 border=0 align=center>
<tr>
<td width=2 bgcolor=#990000><img src=1x1.gif width=2 height=1></td>
<td>Пакуйте всю свою огромную страницу в одну единственную таблицу. Этим Вы добьетесь не только шикарного форматирования с элегантными краями страницы, но и позволите посетителю посвятить себя занятию какой-нибудь важной деятельности, поскольку содержание таблицы будет показано только тогда, когда вся табличная информация загрузится. Если же речь идет о больших страницах, равно как и о больших
таблицах, ободренный Вами посетитель наконец-то протрет свой экран монитора от грязи, которую очень хорошо видно на пустом, матового цвета экране. </td>
</tr>
</table> |
|
Этим же самым способом можно воспользоваться для создания не сплошных, а декоративных линий, только вместо параметра bgcolor используем background.
Центрирование по вертикалиОдним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположен рисунок или flash-заставка, выражающие главную идею сайта. Это изображение также является и ссылкой на остальные разделы сайта. Задача - разместить такой рисунок по центру окна браузера вне зависимости от разрешения монитора. Добавление нескольких тегов BR перед рисунком является неверным, поскольку при изменении разрешения или размера шрифта изменится и положение изображения. Правильное решение следующее. Необходимо поместить рисунок, центрированный по горизонтали, внутрь таблицы со 100% шириной и высотой. Пример 4. Центрирование рисунка по вертикали
<table width=100% height=100%>
<tr>
<td align=center>
<img src="images/title.gif" width="413" height="100" alt="Рецепты HTML">
</td>
</tr>
</table> |
|
По вертикали ячейку можно не центрировать, это положение задается по умолчанию.
Создание таблицыТаблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. Для добавления таблицы на веб-страницу используется тег-контейнер TABLE. Таблица должна содержать хотя бы одну строку и колонку. Пример 1. Создание таблицы
<table>
<tr>
<td>Содержимое таблицы</td>
</tr>
</table> |
|
Для добавления строк используются теги <tr> и </tr>. Чтобы разделить строки на колонки применяются теги <td> и</td> (пример 2). Пример 2. Ячейки таблицы
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table> |
|
Ниже показано расположение ячеек таблицы.
| Ячейка 1 | Ячейка 2 | | Ячейка 3 | Ячейка 4 |
|
Параметры таблицыДля изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге TABLE. <table параметр1=... параметр2=...> |
Описание параметров таблицы и их свойств описано ниже. | Свойство | Значение | Описание | Пример |
|---|
| align= | left
right
center | Выравнивание таблицы | align=center | | background= | URL | Фоновый рисунок | background=pic.gif | bgcolor=
| #rrggbb | Цвет фона таблицы | bgcolor=#FF9900 | | border= | n | Толщина рамки в пикселах | border=2 | | bordercolor= | #rrggbb | Цвет рамки | bordercolor=#333333 | | bordercolordark= | #rrggbb | Тень рамки | bordercolordark=#f0f0f0 | | cellpadding= | n | Расстояние между ячейкой и ее содержимым | cellpadding=7 | | cellspacing= | n | Дистанция между ячейками | cellspacing=3 | | nowrap | | Запрещает переносы строк в тексте | <table nowrap> | frame=
| void
above
below
lhs
rhs
hsides
vsides
box
| Задание типа рамки таблицы | frame=hsides | valign=
| top
bottom | Выравнивание по высоте | valign=top | | width= | n
n% | Минимальная ширина таблицы, можно задавать в пикселах или процентах | width=90% | | height | n
n% | Минимальная высота таблицы, можно задавать в пикселах или процентах | height=18 |
Примечание - Таблица, если не указано особо, всегда выравнивается по левому краю;
- Параметр background, отвечающий за рисунок фона, своеобразно понимается в разных браузерах. IE вставляет картинку во всю таблицу, если таблица по размеру больше фонового рисунка, он повторяется по горизонтали или вертикали. Netscape добавляет фоновое изображение в каждую ячейку таблицы;
- По умолчанию, таблица выводится без рамки. Однако Netscape добавляет тонкую линию между ячеек. Чтобы ее не было, всегда указывайте параметр border=0;
- Если ширина таблицы не указана, она подгоняется под содержание ячеек.
Параметры ячеекБлагодаря большому количеству свойств ячеек, можно изменять вид и оформление таблиц. Эти параметры могут быть добавлены к тегам TR и TD. | Свойство | Значение | Описание | Пример |
|---|
| align= | left
right
center | Выравнивание содержимого ячейки | align=center | | background= | URL | Устанавливает фоновый рисунок в ячейке | background=pic.gif | bgcolor=
| #rrggbb | Цвет фона ячейки | bgcolor=#FF9900 | valign=
| top
midlle
bottom | Выравнивание содержимого ячейки по высоте | valign=top | | width= | n
n% | Минимальная ширина ячейки, можно задавать в пикселах или процентах | width=90% | | height | n
n% | Минимальная высота ячейки, можно задавать в пикселах или процентах | height=37 |
Параметры используемые только для тега TD. | Свойство | Значение | Описание | Пример |
|---|
| nowrap | | Запрещает переносы строк в тексте | <td nowrap> | | colspan= | n | Количество объединяемых колонок | <td colspan=3> | | rowspan= | n | Количество объединяемых строк | <td rowspan=3> |
Примечание - Содержимое ячеек по умолчанию выравнивается по левому краю по горизонтали и по центру – по вертикали;
- Параметры тега TD имеют больший приоритет чем параметры тега TR, а свойства ячеек выше свойств самой таблицы.
| 