Таблицы являются широко используемым элементом для представления различных
данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря
своей наглядности, универсальности и простоте таблицы также повсеместно применяют
на сайтах, чтобы лучше донести до читателя нужный материал. Однако в большинстве
случаев на веб-страницах используют весьма убогие средства по представлению
табличных данных. Вместе с тем воспользовавшись мощью стилей, можно весьма расширить
средства по оформлению таблиц, удачно вписать их в дизайн сайта и нагляднее
представить табличные данные.
Далее речь пойдет об оформлении таблиц с помощью стилей. Но в начале обговорим
некоторые моменты, которые помогут лучше понять, что же мы делаем.
Цвет фона ячеек
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background,
которое применяется к селектору TABLE. При этом следует
помнить о правилах использования стилей, в частности, наследовании свойств элементов.
Если одновременно с TABLE задать цвет у селектора TD
или TH, то он и будет установлен в качестве фона (пример 1).
Пример 1. Цвет фона
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблицы</title>
<style type="text/css">
TABLE {
background: maroon; /* Цвет фона таблицы */
color: white; /* Цвет текста */
}
TD {
background: navy; /* Цвет фона ячеек */
}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="1">
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>
В данном примере получим синий цвет фона у ячеек (тег <td>)
и красный у заголовка (тег <th>). Это связано
с тем, что стиль для селектора TH не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE.
А цвет для селектора TD указан явно, вот ячейки и «заливаются»
синим цветом.
То же самое происходит и с цветом текста. Для всех элементов таблицы в примере
он установлен белым.
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цвета фона
Поля внутри ячеек
Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно
для этой цели применяется атрибут cellpadding
тега <table>. Он определяет значение поля в пикселах
со всех сторон ячейки. Допускается использовать стилевое свойство padding,
добавляя его к селектору TD, как показано в примере 2.
Пример 2. Поля в таблицах
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблицы</title>
<style type="text/css">
TABLE {
background: white; /* Цвет фона таблицы */
color: white; /* Цвет текста */
}
TD, TH {
background: maroon; /* Цвет фона ячеек */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<table cellspacing="1">
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>
В данном примере с помощью группирования селектором поля установлены одновременно
для селектора TD и TH.
Результат данного примера показан на рис. 2.
Рис. 2. Поля в ячейках
Если применяется стилевое свойство padding для ячеек таблицы,
то действие атрибута cellpadding тега <table>
игнорируется.
Границы и рамки
Линии между ячейками можно установить несколькими методами, при этом рассмотрим
два из них, которые непосредственно связаны со стилями.
Использование атрибута cellspacing
Известно, что атрибут cellspacing тега <table>
задает расстояние между ячейками таблицы. Если используется разный цвет фона
таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает
с цветом таблицы, а толщина равна значению атрибута cellspacing
в пикселах. В вышеприведенном примере 2 этот эффект показан, поэтому повторять
его не будем.
Заметим, что это не совсем удобный способ создания границ, поскольку он имеет
ограниченную область применения. Так можно получить только одноцветную сетку,
а не вертикальные или горизонтальные линии в нужных местах.
Применение свойства border
Стилевое свойство border одновременно задает цвет
границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные
линии на разных сторонах, лучше использовать его производные —
border-left, border-right,
border-top и border-bottom,
они соответственно определяют границу слева, справа, сверху и снизу.
Применяя свойство border к селектору TABLE,
мы добавляем рамку вокруг таблицы в целом, а к селектору TD
или TH — рамку вокруг ячеек (пример 3).
Пример 3. Добавление двойной рамки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблицы</title>
<style type="text/css">
TABLE {
background: #dc0; /* Цвет фона таблицы */
border: 5px double #000; /* Рамка вокруг таблицы */
}
TD, TH {
padding: 5px; /* Поля вокруг текста */
border: 1px solid #fff; /* Рамка вокруг ячеек */
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>
В данном примере используется двойная рамка черного цвета вокруг самой таблицы
и сплошная рамка белого цвета вокруг каждой ячейки.
Результат примера показан на рис. 3.
Рис. 3. Граница вокруг таблицы и ячеек
Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они
получаются опять же за счет действия атрибута cellspacing
тега <table>. Хотя в коде примера этот атрибут
нигде не фигурирует, браузер использует его по умолчанию. Если задать <table cellspacing=»0″>,
то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения
указанной особенности применяется стилевое свойство border-collapse
со значением collapse, которое добавляется к селектору
TABLE (пример 4).
Пример 4. Создание одинарной рамки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблицы</title>
<style type="text/css">
TABLE {
border-collapse: collapse; /* Убираем двойные границы между ячейками */
background: #dc0; /* Цвет фона таблицы */
border: 4px solid #000; /* Рамка вокруг таблицы */
}
TD, TH {
padding: 5px; /* Поля вокруг текста */
border: 2px solid green; /* Рамка вокруг ячеек */
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>
В данном примере создается сплошная линия зеленого цвета между ячейками и черная
вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину.
Результат примера показан на рис. 4.
Рис. 4. Граница вокруг таблицы
При добавлении border-collapse: collapse
значение атрибута cellspacing тега <table>
игнорируется.
Выравнивание содержимого ячеек
По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением
из этого правила служит тег <th>, он определяет
заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ
выравнивания применяется стилевое свойство text-align
(пример 5).
Пример 5. Выравнивание содержимого ячеек по горизонтали
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблицы</title>
<style type="text/css">
TABLE {
border-collapse: collapse; /* Убираем двойные линии между ячейками */
width: 300px; /* Ширина таблицы */
}
TH {
background: #fc0; /* Цвет фона ячейки */
text-align: left; /* Выравнивание по левому краю */
}
TD {
background: #fff; /* Цвет фона ячеек */
text-align: center; /* Выравнивание по центру */
}
TH, TD {
border: 1px solid black; /* Параметры рамки */
padding: 4px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>
В данном примере содержимое тега <th> выравнивается
по левому краю, а содержимое тега <td> —
по центру. Результат примера показан ниже.
Рис. 5. Выравнивание текста в ячейках
Выравнивание по вертикали в ячейке всегда происходит по ее центру, если это
не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое
ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему
краю ячейки с помощью свойства vertical-align,
как показано в примере 6.
Пример 6. Выравнивание содержимого ячеек по вертикали
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблицы</title>
<style type="text/css">
TABLE {
border-collapse: collapse; /* Убираем двойные линии между ячейками */
width: 300px; /* Ширина таблицы */
}
TH, TD {
border: 1px solid black; /* Параметры рамки */
text-align: center; /* Выравнивание по центру */
padding: 4px; /* Поля вокруг текста */
}
TH {
background: #fc0; /* Цвет фона ячейки */
height: 40px; /* Высота ячеек */
vertical-align: bottom; /* Выравнивание по нижнему краю */
padding: 0; /* Убираем поля вокруг текста */
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
</table>
</body>
</html>
В данном примере устанавливается высота заголовка <th>
как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат
примера показан на рис. 6.
Рис. 6. Выравнивание текста в ячейках
border-color — цвет рамки | CSS справочник
Поддержка браузерами
12.0+
4.0+
1.0+
1.0+
3.5+
1.0+
Описание
CSS свойство border-color задает цвет рамки для элемента. Можно использовать от 1 до 4 значений, разделяемых между собой пробелами. Цвет устанавливается начиная с верхней позиции. Если задано два цвета подряд, это значит первое значение для верхней и нижней границы, второе значение для правой и левой границы.
Пример:
border-color: red green blue pink;
Верхняя рамка — красная
Правая рамка — зеленая
Нижняя рамка — синяя
Левая рамка — розовая
border-color: red green blue;
Верхняя рамка — красная
Правая и левая рамка — зеленые
Нижняя рамка — синяя
border-color: red green;
Верхняя и нижняя рамка — красные
Правая и левая рамка — зеленые
border-color: red;
Все 4 рамки — красные
Примечание: свойство border-color используется только в паре с border-style, так как без него, оно не даст никакого эффекта.
Значение по умолчанию:
совпадает с цветом текста
Применяется:
ко всем элементам, а также к псевдо-элементу ::first-letter
Анимируется:
да
Наследуется:
нет
Версия:
CSS1
Синтаксис JavaScript:
object.style.borderColor=»#FF0000 blue»
Синтаксис
border-color: цвет|transparent|inherit;
Значения свойства
Значение
Описание
цвет
Цвет рамки, который можно установить различными способами, например: указать название цвета, использовать шестнадцатеричные значения (HEX) или с помощью синтаксиса RGB.
transparent
Указывает, что цвет рамки должен быть прозрачным.
inherit
Указывает, что значение наследуется от родительского элемента.
Пример
border-color:
red
blue
red green blue yellow
red green
#000000
#ff9900
rgb(255,255,255)
rgb(255,130,255)
transparent
div {
border-style: solid; border-width: 5px; border-color: red;
}
Что атрибут HTML Bordercolor делает с вашими таблицами? [Подсказка: Цвет!] »
В атрибутах HTML
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше
Атрибут
Создайте таблицу HTML быстро и легко с помощью нашего примера кода
Что делает Что делает атрибут HTML Bordercolor с вашими таблицами? [Подсказка: Цвет!] делать?
Используется для указания цвета границ таблицы. Этот атрибут устарел. Используйте CSS для оформления границ таблицы.
Атрибут цвета границы таблицы устарел Следующая информация предоставляется для его исторической ценности. Этот атрибут устарел и не должен использоваться. Поддержка этого атрибута браузерами ограничена, и его использование может привести к неожиданным результатам. Вместо bordercolor используйте CSS для стилизации таблиц.
БОРДЕРЦОЛОР Атрибут
В этом разделе мы рассмотрим настройку цветов границ таблицы. Во-первых, мы рассмотрим настройку границ одного цвета. Далее мы рассмотрим установку светлых и темных оттенков границы.
Цвет границ таблицы в целом задается атрибутом BORDERCOLOR тега
. Например, этот код устанавливает красную границу:
морковь
чеснок
сельдерей
лук
Вот как это выглядит:
Морков
Чеснок
Секрета
лук
Netscape и MSIE имеют очень различные способы рендеринга . Netscape поддерживает трехмерный внешний вид. MSIE отображает все границы одного цвета, делая границу плоской. MSIE также устанавливает цвет внутренних границ.
Браузер
Как это выглядит
Internet Explorer
Netscape
Границы таблицы: светлые и темные
В предыдущем примере мы установили один цвет для всех границ таблицы. На этой странице мы рассмотрим настройку «светлых» и «темных» границ по отдельности. Обратите внимание, что в настоящее время только MSIE распознает разметку, необходимую для раздельной установки светлых и темных границ.
Визуальные веб-браузеры, такие как Netscape и MSIE, отображают границы таблиц в трехмерном виде. Они делают это, делая верхнюю и левую границы светлее, чем нижние правые границы. Это делает стол таким, как будто он частично находится под источником света, а частично в тени. Если вы визуализируете источник света сверху и слева от таблицы, вам будет легче запомнить, какие границы светлые, а какие темные.
Устанавливаем светлую и темную границы с помощью BORDERCOLORLIGHT и BORDERCOLORDARK . Так, например, этот код устанавливает для светлых границ желтые, а для темных — синие:
бла-бла-бла
да да да
что угодно
Давай!
Вот как этот код отображается в браузере, но обратите внимание, что это устаревший атрибут, и он может неправильно отображаться в современных браузерах.
бла-бла-бла
да да да
что угодно
прямо сейчас!
Использование всех трех атрибутов
BORDERCOLOR одновременно
Netscape и MSIE распознают BORDERCOLOR , но в настоящее время только MSIE распознает BORDERCOLORLIGHT и ЦВЕТ ГРАНИЦЫ ТЕМНЫЙ . Однако вы можете использовать все три сразу, потому что MSIE игнорирует BORDERCOLOR , если находит BORDERCOLORLIGHT и BORDERCOLORDARK . Вы можете использовать эту функцию, чтобы немного больше контролировать цвета границ, чем если бы вы использовали только один или два из этих атрибутов.
Например, этот код указывает, что общий цвет границы — синий, но также указывает, что светлая часть — светло-голубая, а темная часть — обычный синий:
Вот как этот код отображается в браузере, но обратите внимание, что это устаревший атрибут, и он может неправильно отображаться в современных браузерах.
бла-бла-бла
да да да
как угодно
сразу!
Адам Вуд
Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.
Search HTML.com
Search for:
Most Popular
Тег HTML
Тег HTML Body: Master The Most Important HTML Element Now
Это связано
с тем, что стиль для селектора TH не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE.
А цвет для селектора TD указан явно, вот ячейки и «заливаются»
синим цветом.
Все границы внутри таблицы имеют одинаковую толщину.
Результат примера показан ниже.
Результат
примера показан на рис. 6.
Этот атрибут устарел. Используйте CSS для оформления границ таблицы.
Этот атрибут устарел. Используйте CSS для оформления границ таблицы.
Netscape поддерживает трехмерный внешний вид. MSIE отображает все границы одного цвета, делая границу плоской. MSIE также устанавливает цвет внутренних границ.
Вы можете использовать эту функцию, чтобы немного больше контролировать цвета границ, чем если бы вы использовали только один или два из этих атрибутов.