Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.
table
- обязательный тег, открывающий и закрывающий таблицу
caption
- необязательный тег, обозначающий заголовок таблицы
th
- необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr
- обязательный тег, с которого открывается и закрывается строка
td
- обязательный тег, обозначающий открытие и закрытие ячейки в строке
Пример кода простой таблицы
Стобец 1 | Стобец 2 |
---|---|
Текст в первой ячейке | Текст во второй ячейке |
В браузере отобразится
width
- ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor
- цвет фона ячеек таблицы
background
- заливает фон таблицы рисунком
border
- рамка и границы в таблице. Толщина указывается в пикселях
cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.
Стобец 1 | Стобец 2 | ||
|
Стобец 1 | Стобец 2 | ||
Текст в первой ячейке первого столбца | Текст во второй ячейке второго столбца |
Стобец 1 | Стобец 2 | ||
Текст в первой ячейке первого столбца | Текст во второй ячейке второго столбца | ||
Стобец 1 | Стобец 2 |
Стобец 1 | Стобец 2 | ||
Текст в первой ячейке первого столбца | Текст во второй ячейке второго столбца |
Заголовок 1 | Заголовок 2 |
---|---|
Ячейка 3 | Ячейка 4 |
В данном примере получим синий цвет фона у ячеек (тег
Результат данного примера показан на рис. 2.4.
Рис. 2.4. Изменение цвета фона
Полем называется расстояние между краем содержимого ячейки и её границей. Обычно для этой цели применяется атрибут cellpadding тега
Заголовок 1 | Заголовок 2 |
---|---|
Ячейка 3 | Ячейка 4 |
В данном примере с помощью группирования селекторов поля установлены одновременно для селектора TD и TH . Результат примера показан на рис. 2.5.
Рис. 2.5. Поля в ячейках
Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега
Леонардо | 5 | 8 |
Рафаэль | 4 | 11 |
Микеланджело | 24 | 9 |
Донателло | 2 | 13 |
Результат данного примера показан на рис. 2.6.
Рис. 2.6. Вид таблицы при использовании border-spacing
Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing , поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию (обычно оно равно 2px).
При добавлении к селектору TABLE свойства border-collapse со значением collapse , атрибут cellspacing игнорируется, а значение border-spacing обнуляется.
По умолчанию границы в таблице изначально нет, а её добавление происходит с помощью атрибута border тега
Заголовок 1 | Заголовок 2 |
---|---|
Ячейка 3 | Ячейка 4 |
В данном примере используется двойная рамка черного цвета вокруг самой таблицы и сплошная рамка белого цвета вокруг каждой ячейки. Результат примера показан на рис. 2.7.
Рис. 2.7. Граница вокруг таблицы и ячеек
Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет действия атрибута cellspacing тега
Заголовок 1 | Заголовок 2 |
---|---|
Ячейка 3 | Ячейка 4 |
В данном примере создается сплошная линия зеленого цвета между ячейками и черная вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину. Результат примера показан на рис. 2.8.
Рис. 2.8. Граница вокруг таблицы
По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег
Пример 2.8. Выравнивание содержимого ячеек по горизонтали
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Заголовок 1 | Ячейка 1 | Ячейка 2 |
---|---|---|
Заголовок 2 | Ячейка 3 | Ячейка 4 |
В данном примере содержимое тега
Рис. 2.9. Выравнивание текста в ячейках
Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 2.9.
Пример 2.9. Выравнивание содержимого ячеек по вертикали
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Заголовок 1 | Заголовок 2 |
---|---|
Ячейка 1 | Ячейка 2 |
В данном примере устанавливается высота заголовка
Рис. 2.10. Выравнивание текста в ячейках
Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причём пробел в расчёт не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.
Старые браузеры не отображали цвет фона пустых ячеек вида
К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.
Для управления видом пустых ячеек используется свойство empty-cells , при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях:
Добавление неразрывного пробела воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10).
Пример 2.10. Пустые ячейки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Леонардо | 5 | 8 |
Рафаэль | 11 | |
Микеланджело | 24 | |
Донателло | 13 |
Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б.
а. В браузере Safari, Firefox, Opera, IE8, IE9
б. В браузере IE7
Рис. 2.11. Вид таблицы с пустыми ячейками
Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального содержимого веб-страницы и расширить набор средств по дизайну таблиц.
Для создания рамки применяется стилевое свойство border , которое добавляется к селектору TABLE . Также эффектно смотрится таблица, когда цвет рамки совпадает с цветом фона заголовка (тег
В примере 1 показано, как создать такую простую таблицу.
Пример 1. Создание рамки вокруг таблицы
2004 | 2005 | 2006 | |
---|---|---|---|
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
В данном примере выравнивание текста во всех ячейках происходит по левому краю, что не всегда удобно. На рис. 2 показана таблица, у которой содержимое ячеек выравнивается по центру за исключением левой колонки, где текст выравнивается по левому краю.
Изменение выравнивания происходит с помощью стилевого свойства text-align , при этом для отдельных ячеек требуется вводить новый класс, чтобы гибко управлять некоторыми характеристиками (пример 2).
Пример 2. Таблица с выравниванием содержимого ячеек
2004 | 2005 | 2006 | |
---|---|---|---|
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
В данном примере добавляется стилевой класс с именем lc , он добавляется к ячейкам левой колонки для изменения выравнивания содержимого и создания жирного начертания текста.
Эффектно смотрится таблица, у которой фон заголовка выполнен в виде градиента (рис. 3). При этом создание подобной таблицы не представляет особой сложности.
При этом в качестве фона применяется заранее заготовленный рисунок, например, как показано на рис. 4.
Для добавления фона только к одной строке таблицы имеется несколько способов.
Можно воспользоваться тегом
, который
предназначен для хранения одной или нескольких строк, которые представлены вверху
таблицы. Для этого тега добавляем стилевое свойство background
,
оно одновременно определяет цвет фона и фоновый рисунок, а также его повторяемость
(пример 3).
Пример 3. Использование фонового рисунка
В данном примере тег
охватывает только
верхнюю строку таблицы с ее заголовком. Для этого тега в стилях одновременно
устанавливается цвет фона и картинка, которая приведена на рис. 4. Хотя
цвет под рисунком не виден, лучше его всегда добавлять, например, для случая
отключения пользователем отображения изображений в браузере.
21.01.06
5.9K
Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте Цветная граница рамки таблицы. Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы). С помощью этого тега указывается, откуда следует располагать информацию. В данном примере нам понадобится расположить информацию, начиная с верхнего края таблицы. Вставляем в ячейку нашей таблицы другую таблицу. Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон. Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково. Напоследок, приведу весь код, который мы создали.
2004 2005 2006
Рубины 43 51 79
Изумруды 28 34 48
Сапфиры 29 57 36
(Например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).
Однако, стандарт html имеет небольшое количество стандартных элементов оформления страницы, и не все элементы одинаково отображаются в разных браузерах. Каждая компания пытается разработать свой собственный html, порой уходя далеко от основной концепции html, разработанной консорциумом WWW.
Поэтому веб-мастеру приходится эксперементировать с элементами, которые являются общими для всех браузеров.
Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать информацию.
Кроме того, таблицы в html имеют атрибут "border="0" — этот атрибут со значением "0" скрывает границы таблицы т.е остаётся видно содержимое ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.
Сразу отмечу, что в html, по умолчанию, встроен атрибут, который отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не подойдёт, потому что данный атрибут поддерживается только браузером Internet Explorer. В других браузерах этот элемент не работает. Но нам необходимо, чтобы страница одинаково отображалась в любом браузере. К нам на помощь приходят таблицы. Давайте сначала создадим обычную таблицу.
Атрибут "cellspacing" служит для того, чтобы указать расстояние между двумя ячейками. В данном случае, он будет указывать расстояние между двумя таблицами.
Зальём таблицу черным цветом, используя атрибут "bgcolor" Вообще вы можете выбрать любой другой цвет, в зависимости от того, какого цвета будет ваша рамка.