Чтобы четко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает параметр border тега
| Чебурашка | Крокодил Гена | Шапокляк |
Рамки созданные таким образом незначительно отличаются по своему виду в разных браузерах.
Рис. 1. Рамка, полученная с помощью параметра border
Чтобы получить рамку одного вида, рекомендуется применить стилевым тегом border , применяя его к ячейкам таблицы (тегу
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
Разница между границами таблицы при добавлении параметра border-collapse , а также без него представлена на рис. 2.
a
б
Рис. 2. Вид таблицы при использовании атрибута border-collapase
На рис. 2а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление параметра border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 2б).
Для разработки однотипных линий внутри таблицы можно пойти и другим путем. Следует добавляем для селектора
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
У этого способа возможны вариации, например, для селектора
или
В данном примере цвет фона web-страницы вводится через свойство background , добавленное к селектору BODY . Хотя белый цвет установлен по умолчанию, его иногда желательно задавать, чтобы пользователь не указал свой цвет фона через настройки браузера. Такой же цвет должен быть и у линий таблицы, в этом случае они явно не выдаются и лишь делят ячейки между собой. Результат примера 4 показан ниже.
Рис. 3. Вид границ, совпадающих с цветом фона Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п. 1. Синтаксис CSS borderborder : border-width border-style border-color | inherit ;
Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность "толщина стиль цвет". 2. Примеры с различными границами рамок CSS border2.1. Пример. Разные стили оформления границы рамки border-style
border-style: dotted border-style: dashed border-style: solid border-style: double border-style: groove border-style: ridge border-style: inset border-style: outset Четыре разных рамки 2.2. Пример. Изменения цвета рамки при наведении курсора мышиЭтот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).
Вот как это выглядит на странице: 2.3. Пример. Как сделать прозрачную рамку borderРамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0) Вот как это выглядит на странице: 3. Толщина границы: свойство border-widthЗадает толщину линии. Ранее мы задавали ее в едином описании border. Синтаксис CSS border-width border-width : thin | medium | thick | значение ;
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.
Вот как это выглядит на странице: border-width: thin border-width: medium border-width: thick Разная толщина у границ 4. Как сделать рамку border только с одного края (границы)У свойства CSS border есть производные свойства для задания односторонних границ у элемента:
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border. Также есть свойства
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми /* Описание двух одинаковых стилей: */ 4.1. Пример. Красивая рамка для выделения цитат
Вот как это выглядит на странице: Пример рамки для цитаты Примечание
5. Как сделать несколько границ border у элемента htmlИногда требуется сделать несколько границ. Приведем пример 5.1. Первый вариант с несколькими границамиВот как это выглядит на странице: Есть второй способ через наложение теней. 5.2. Наложение теней для создания нескольких границВот как это выглядит на странице: 6. Скругление углов у границ (border-radius)Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например 7. Вдавленная линия CSSВдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту. Вот как это выглядит на странице: Для обращения к border из JavaScript нужно писать следующую конструкцию: document.getElementById("elementID").style.border ="VALUE " Не кажется ли вам, что черно-белая таблица выглядит скучновато? Вот и мы так думаем! Поэтому в этом уроке мы поговорим о том, как изменить цвет таблицы в HTML. Существует три возможности добавления цвета, для каждой из которых присутствует свое свойство.
Ранее, чтобы изменить цвет, применялась более сжатая форма описания рамки. Выглядела она вот так: Border: 1px solid lightgray И за цвет здесь отвечала последняя часть – lightrgay . Существуют различные способы, позволяющие задать значение цветов в CSS . Мы же покажем вам, как происходит описание цвета с использованием атрибутов. Как изменить цвет ячейкиДавайте посмотрим, как выглядит код в CSS , в котором задан цвет для ячейки. Td { background-color: цвет-фона; } Разумеется, изменять цвета можно и у table , и у td , и у th . Давайте попробуем придать нашей таблице умножения более солидный вид. Добавим стили для ячеек-заголовков с тегом th , а также для ячеек по диагонали, в которых расположены квадраты чисел:
Результат в браузере: Как изменить цвет рамки в таблицеКак вы уже заметили в примере выше, в таблице мы изменили цвет рамки. Для этого мы использовали свойство border. В нём задаются параметры в порядке, перечисленном ниже:
Напомним ещё раз, как выглядит задание цвета рамки для ячейки: Td { border: 1px solid blue; } Как изменить цвет строки в таблицеИтак, мы с вами научились менять цвета ячеек, а также ячеек-заголовков, используя возможности CSS. Если мы указываем стили для таких тегов, как th или td , то должны понимать, что применимы стили будут и к остальным тегам. Однако, бывают ситуации, когда надо изменить цвет конкретной ячейки или же несколько ячеек, или же всю строку целиком. Что делать в данном случае? Здесь следует использовать классы, а также осуществлять применение их стилей. На практике это выглядит вот так: RowGreen { background-color:green; } А чтобы изменить цвет с помощью этого класса определённые строки нужно сделать следующее:
И результат в браузере: Как изменить цвет текста в таблицеДля того, чтобы изменить цвет текста в таблице используется свойство color . Применять его можно к самым разным элементам: к table, tr, th, td. В зависимости от этого цвет в выбранном элементе будет изменён. Например, для всей таблицы зададим зелёный цвет шрифта: Table { color: green; ... } Аналогично можно изменять цвет для отдельных ячеек. А на этом данный урок заканчивается, не забудьте сделать домашнее задание. Всем пока! Рамка таблиц важный элемент. Она универсальна и часто используема. В этом уроке будет разобрано, как сделать рамку таблицы, ячейки и строки при помощи атрибута, но основная часть урока будет направлена на свойства CSS, потому что рамка становится универсальной при использовании стилей CSS. Создание рамки при помощи атрибутаВообще не расширяемый атрибут, я бы сказал бессмысленный. Атрибут border устанавливает толщину рамки и все. Далее пример:
Простой способ создать рамку вокруг элементаСразу говорю, подробные записи приводить не буду, так как о свойстве border будет огромный урок в дальнейшем и может не один. Универсальное свойство border способно установить сразу и толщину, и стиль, и цвет границ (рамки). Толщина может быть любой, цвет границ устанавливается в шестнадцатеричном формате, rgb формате и ключевыми словами (red, black и т.д.). Какие бывают стили, картинка ниже (картинка взята с сайта htmlbook.ru) и далее пример: td { Рамка слева, справа, снизу и сверхуПри использовании border рамка создается со всех сторон. Но можем контролировать, с какой же стороны обрисовывать рамку. Рамка слева border-left: 2px solid black ; рамка справа border-right: 1px dotted #FF0000 ; рамка снизу border-bottom: 10px solid #000000 ; рамка сверху border-top: 1px solid green . Как видите, они не обязательно должны иметь одинаковые значения, а так же их можно комбинировать, то есть написать несколько, например, левую и правую границу (рамку) и т.д. Все. Далее лезть не буду, эта тема другого урока. Пример: table { Закругленные углыТеперь немного затронем тему «красивостей» и юзабилити. Чтобы сделать края рамок закругленными, существует свойство border-radius . Это тоже отдельный урок, сильно подробно разбирать не будем. Он принимает разное количество аргументов. Мы будем писать (только в этом уроке) один аргумент, и если пишем одно значение, значит, будет одинаковое закругление со всех сторон (углов). Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример: td { Поля или внутренний отступДабы текст не был впритык к рамке, нужно делать отступ от нее. В этом нам поможет свойство padding . Оно тоже многофункционально, но мы рассмотрим его частично, все по той же причине. Будем использовать только одно значение. Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример: td { Сами по себе таблицы выглядят довольно «бедно», к тому же браузеры по-своему отображают некоторые характеристики таблиц, в частности, рамки. Вместе с тем эти недостатки легко исправить воспользовавшись мощью стилей. При этом весьма расширяются средства по оформлению таблиц, что позволяет удачно вписать таблицы в дизайн сайта и нагляднее представить табличные данные. Цвет фона ячеекЦвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Хотя свойство background не наследуется, для ячеек значением фона по умолчанию выступает transparent , т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE задать цвет у селектора TD или TH , то этот цвет будет установлен в качестве фона ячейки (пример 2.3). Пример 2.3. Цвет фона
В данном примере получим синий цвет фона у ячеек (тег
)
и красный у заголовка (тег |
). Это связано
с тем, что стиль для селектора TH
не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE
.
А цвет для селектора TD
указан явно, вот ячейки и «заливаются»
синим цветом.
| Результат данного примера показан на рис. 2.4. Рис. 2.4. Изменение цвета фона Поля внутри ячеекПолем называется расстояние между краем содержимого ячейки и её границей. Обычно для этой цели применяется атрибут cellpadding тега
В данном примере с помощью группирования селекторов поля установлены одновременно для селектора TD и TH . Результат примера показан на рис. 2.5.
Рис. 2.5. Поля в ячейках Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега
Результат данного примера показан на рис. 2.6.
Рис. 2.6. Вид таблицы при использовании border-spacing Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing , поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию (обычно оно равно 2px). При добавлении к селектору TABLE свойства border-collapse со значением collapse , атрибут cellspacing игнорируется, а значение border-spacing обнуляется. Границы и рамкиПо умолчанию границы в таблице изначально нет, а её добавление происходит с помощью атрибута border тега
В данном примере используется двойная рамка черного цвета вокруг самой таблицы и сплошная рамка белого цвета вокруг каждой ячейки. Результат примера показан на рис. 2.7.
Рис. 2.7. Граница вокруг таблицы и ячеек Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет действия атрибута cellspacing тега
В данном примере создается сплошная линия зеленого цвета между ячейками и черная вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину. Результат примера показан на рис. 2.8.
Рис. 2.8. Граница вокруг таблицы Выравнивание содержимого ячеекПо умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег
, он определяет
заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ
выравнивания применяется стилевое свойство text-align
(пример 2.8).
| Пример 2.8. Выравнивание содержимого ячеек по горизонтали XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
В данном примере содержимое тега
выравнивается
по левому краю, а содержимое тега |
—
по центру. Результат примера показан ниже (рис. 2.9).
|
Рис. 2.9. Выравнивание текста в ячейках Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 2.9. Пример 2.9. Выравнивание содержимого ячеек по вертикали XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
В данном примере устанавливается высота заголовка
как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат
примера показан на рис. 2.10.
|
Рис. 2.10. Выравнивание текста в ячейках Пустые ячейкиБраузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причём пробел в расчёт не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает. Старые браузеры не отображали цвет фона пустых ячеек вида
, поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел (). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил однопиксельный прозрачный рисунок. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.
| К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек. Для управления видом пустых ячеек используется свойство empty-cells , при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях:
Добавление неразрывного пробела воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10). Пример 2.10. Пустые ячейки XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б.
а. В браузере Safari, Firefox, Opera, IE8, IE9
б. В браузере IE7 Рис. 2.11. Вид таблицы с пустыми ячейками Возможно вас заинтересует |
