... |
| ... |
...
2. Свойство background="URL"
- задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.
Пример
Пример таблицы
|
Столбец 1
|
Столбец 2
|
Преобразуется на странице в следующее:
В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif
. Обратите внимание на то, что в теге мы добавили style="color:white;"
. Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.
3. Свойство bgcolor="цвет"
- задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)
4. Свойство border="число"
- задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1"
, что означает толщина рамки - 1 пиксель.
5. Свойство bordercolor="цвет"
- задает цвет рамки. Если border="0"
, то рамки не будет и цвет рамки не будет иметь смысла.
6. Свойство cellpadding="число"
- отступ от рамки до содержимого ячейки в пикселях.
7. Свойство cellspacing="число"
- расстояние между ячейками в пикселях.
8. Свойство cols="число"
- число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.
9. Свойство frame="параметр"
- как отображать границы вокруг таблицы. Может принимать следующие значения:
- void
- не отрисовывать границы
- border
- граница вокруг таблицы
- above
- граница по верхнему краю таблицы
- below
- граница снизу таблицы
- hsides
- добавить только горизонтальные границы (сверху и снизу таблицы)
- vsides
- рисовать только вертикальные границы (слева и справа от таблицы)
- rhs
- граница только на правой стороне таблицы
- lhs
- граница только на левой стороне таблицы
10. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах.
11. Свойство rules="параметр"
- где отображать границы между ячейками. Может принимать следующие значения:
- all
- линия рисуется вокруг каждой ячейки таблицы
- groups
- линия отображается между группами, которые образуются тегами , , ,
или
- cols
- линия отображается между колонками
- none
- все границы скрываются
- rows
- граница рисуется между строками таблицы, созданными через тег
12. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах.
13. Свойство class="имя_класса"
- можно указать имя класса, которому принадлежит таблица.
14. Свойство style="стили"
- стили можно задать индивидуально для каждой таблицы.
Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге
.
Атрибуты и свойства и
1. Свойство align="параметр"
- задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:
- left
- выравнивание по левому краю
- center
- выравнивание по центру
- right
- выравнивание по правому краю
2. Свойство background="URL"
- задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.
3. Свойство bgcolor="цвет"
- задает цвет фона ячейки.
4. Свойство bordercolor="цвет"
- задает цвет рамки ячейки.
5. Свойство char="буква"
- задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.
6. Свойство colspan="число"
- задает число объединяемых горизонтальных ячеек.
7. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах %.
8. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах %.
9. Свойство rowspan="число"
- задает число объединяемых вертикальных ячеек.
10. Свойство valign="параметр"
- выравнивание содержимого ячейки по вертикали.
- top
- выравнивание содержимого ячейки по верхнему краю строки
- middle
- выравнивание по середине
- bottom
- выравнивание по нижнему краю
- baseline
- выравнивание по базовой линии
Примечание 1
Для тега | доступны такие же параметры, что и для . Параметры для одного тега | будут иерархично применены ко всем внутри него
Как сделать, чтобы границы ячеек в таблице не склеивались
В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse
:
...
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
Хотя линии между ячейками позволяют четко отделить одни данные от других, ту
же самую функцию выполняет и пустое пространство вокруг текста. А чтобы таблица
выделялась на веб-страницы, для нее устанавливают определенный цвет фона. Заголовок
при этом допустимо задать другого цвета, как показано на рис. 1.
Для изменения цвета фона таблицы используем атрибут background
,
добавляя его к селектору TABLE
. Для красоты внизу таблицы
рисуем линию с помощью параметра border-bottom
(пример 1).
Пример 1. Создание таблицы без рамки
|
2004 |
2005 |
2006 |
---|
Рубины |
43 |
51 |
79 |
Изумруды |
28 |
34 |
48 |
Сапфиры |
29 |
57 |
36 |
Поскольку содержимое тега
исходно выравнивается
по центру, то для изменения этой характеристики в данном примере применяется
стилевой атрибут text-align
со значением left
.
Можно поступить наоборот и задать выравнивание по центру для ячеек |
.
Но содержимое первой колонки с названиями камней лучше оставить выровненным
по левому краю. Чтобы установить для разных колонок различное выравнивание содержимого
рассмотрим два способа.
Первый метод заключается в использовании тега
,
он добавляется в контейнер
и устанавливает,
в частности, выравнивание для отдельных колонок (пример 2).
Пример 2. Выравнивание с помощью тега
|
2004 |
2005 |
2006 |
---|
Рубины |
43 |
51 |
79 |
Изумруды |
28 |
34 |
48 |
Сапфиры |
29 |
57 |
36 |
Аргумент align
тега
указывает, по какой стороне выравнивать ячейки колонки, а span
определяет число колонок, к которым будут применяться заданные параметры. Если
этот атрибут отсутствует, то тег
работает
только для одной колонки.
Замечание
Выравнивание содержимого колонок с помощью тега
работает в браузере Internet Explorer и не действует в браузере Firefox и некоторых
других.
Второй метод универсальный, работает во всех браузерах и основан на добавлении
отдельного класса для определенных ячеек.
Создаем стилевой класс, например, с именем jewel
и применяем его к ячейкам левой колонки (пример 3).
Пример 3. Выравнивание с помощью стилей
|
2004 |
2005 |
2006 |
---|
Рубины |
43 |
51 |
79 |
Изумруды |
28 |
34 |
48 |
Сапфиры |
29 |
57 |
36 |
В данном примере изменяется цвет фона и способ выравнивания для всех ячеек,
где установлен параметр class="jewel"
.
Результат примера показан на рис. 2.
Сетка представляет собой набор горизонтальных и вертикальных линий между ячейками
таблицы, которые отделяют содержимое ячеек друг от друга. Сетка используется
по умолчанию, если включить отображение границ с помощью атрибута border
тега
. Однако такие линии отображаются
по-разному в различных браузерах, поэтому применение стилей не только позволит
удобно управлять видом таблиц, но и сделает их однотипными.
Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить
стилевое свойство border
для каждой ячейки и воспользоваться свойством border-collapse
.
При добавлении свойства border
к селектору TD
или TH
между ячейками возникают двойные линии, которые
образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло,
для селектора TABLE
указывается свойство border-collapse
со значением collapse
, как показано в примере 1.
Пример 1. Создание сетки
Таблица
| 2004 | 2005 | 2006 |
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
В данном примере также устанавливается цвет фона для ячеек заголовка (тег
)
через свойство background
.
Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии
внутри нее (рис. 2).
При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет,
совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан
белым и такого же цвета используется граница, которая добавляется к селектору
TABLE
.
Пример 2. Таблица без внешней рамки
Таблица
| 2004 | 2005 | 2006 |
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
В данном примере толщина линий между ячейками составляет один пиксел,
а белая рамка вокруг — два пиксела, т.е. на один пиксел больше. Это требуется
для того, чтобы надежно скрыть внешнюю границу вокруг таблицы.
Чтобы четко отделить содержимое одной ячейки от другой, к ячейкам добавляются
границы. За их создание отвечает параметр border
тега
, который определяет толщину рамки.
В примере 1 показано создание границы вокруг ячеек.
Пример 1. Добавление рамки к таблице
Толщина границы
Чебурашка |
Крокодил Гена |
Шапокляк |
Рамки созданные таким образом незначительно отличаются по своему виду в разных браузерах.
Рис. 1. Рамка, полученная с помощью параметра border
Чтобы получить рамку одного вида, рекомендуется применить стилевым тегом
border
, применяя его к ячейкам таблицы (тегу
или |
). Однако и здесь нас подстерегают подводные
камни. Поскольку рамка создается для каждой ячейки, то в местах соприкосновения
ячеек получается граница удвоенной толщины. Для решения указанной особенности
существует несколько путей. Самый простой — применить свойством border-collapse
со значением collapse
. В его задачу входит отслеживать
соприкосновение линий и вместо двойной границы изображать одинарную. Этот атрибут
дастаткова добавляем к тегу
, а дальше
он все сделает самостоятельно (пример 2).
Пример 2. Применение border-collapse при создании рамок таблицы
Создание рамки
Разница между границами таблицы при добавлении параметра border-collapse
,
а также без него представлена на рис. 2.
a
б
Рис. 2. Вид таблицы при использовании атрибута border-collapase
На рис. 2а показана рамка таблицы, используемая по умолчанию. Обратите внимание,
что внутри таблицы все линии имеют удвоенную толщину. Добавление параметра border-collapse
убирает эту особенность, и толщина всех линий становится одинаковой (рис. 2б).
Для разработки однотипных линий внутри таблицы можно пойти и другим путем. Следует
добавляем для селектора
рамку, но отменить
линию справа и снизу, задавая соответствующим атрибутам значение none
.
Тогда при состыковке ячеек их границы не будут накладываться друг с другом по
той причине, что линия будет только одна. Однако при этом методе формирования
границ нет линий снизу и справа у самой таблицы. Добавляя параметры border-right
и border-bottom
к селектору
,
получим в итоге нужную рамку (пример 3). Для однотипности следует позаботиться,
чтобы стиль, толщина и цвет границы во всех случаях совпадали.
Пример 3. Создание рамки у таблицы с помощью атрибута border
Создание рамки
У этого способа возможны вариации, например, для селектора
добавляем границу только справа и снизу, а у
,
наоборот, добавляем атрибут border
, но линию справа
и снизу убрать. В любом случае представленный результат будет один.
Простой и оригинальный вид таблицы можно получить, если цвет границ сделать
совпадающим с цветом фона. Но чтобы линии были видны, обязательно следует сделать
заливку фона у тега
или
.
Тогда ячейки таблицы получаются, словно рассеченные резцом между собой (пример 4).
Пример 4. Использование невидимых границ в таблице
Создание границ
В данном примере цвет фона web-страницы вводится через свойство background
,
добавленное к селектору BODY
. Хотя белый цвет установлен
по умолчанию, его иногда желательно задавать, чтобы пользователь не указал свой
цвет фона через настройки браузера. Такой же цвет должен быть и у линий таблицы,
в этом случае они явно не выдаются и лишь делят ячейки между собой.
Результат примера 4 показан ниже.
Рис. 3. Вид границ, совпадающих с цветом фона
Хотя линии между ячейками позволяют четко отделить одни данные от других, ту
же самую функцию выполняет и пустое пространство вокруг текста. А чтобы таблица
выделялась на веб-страницы, для нее устанавливают определенный цвет фона. Заголовок
при этом допустимо задать другого цвета, как показано на рис. 1.
Для изменения цвета фона таблицы используем свойство background
,
добавляя его к селектору TABLE
. Для красоты внизу таблицы
рисуем линию с помощью свойства border-bottom
(пример 1).
Пример 1. Создание таблицы без рамки
Таблица
| 2004 | 2005 | 2006 |
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
Поскольку содержимое тега
исходно выравнивается
по центру, то для изменения этой характеристики в данном примере применяется
стилевое свойство text-align
со значением left
.
Можно поступить наоборот и задать выравнивание по центру для ячеек |
.
Но содержимое первой колонки с названиями камней лучше оставить выровненным
по левому краю. Чтобы установить для разных колонок различное выравнивание содержимого
рассмотрим два способа.
Первый метод заключается в использовании тега
,
он добавляется в контейнер
и устанавливает,
в частности, выравнивание для отдельных колонок (пример 2).
Пример 2. Выравнивание с помощью тега
Таблица
| 2004 | 2005 | 2006 |
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
Атрибут align
тега
указывает, по какой стороне выравнивать ячейки колонки, а span
определяет число колонок, к которым будут применяться заданные параметры. Если
этот атрибут отсутствует, то тег
работает
только для одной колонки.
Выравнивание содержимого колонок с помощью тега
работает в браузере Internet Explorer и не действует в браузере Firefox и некоторых
других.
Второй метод универсальный, работает во всех браузерах и основан на добавлении
отдельного класса для определенных ячеек.
Создаем стилевой класс, например, с именем jewel
и применяем его к ячейкам левой колонки (пример 3).
Пример 3. Выравнивание с помощью стилей
Таблица
| 2004 | 2005 | 2006 |
Рубины | 43 | 51 | 79 |
Изумруды | 28 | 34 | 48 |
Сапфиры | 29 | 57 | 36 |
В данном примере изменяется цвет фона и способ выравнивания для всех ячеек,
где установлен атрибут class="jewel"
.
Результат примера показан на рис. 2.
| | | | | | |
| |
|