Рамка таблиц важный элемент. Она универсальна и часто используема. В этом уроке будет разобрано, как сделать рамку таблицы, ячейки и строки при помощи атрибута, но основная часть урока будет направлена на свойства CSS, потому что рамка становится универсальной при использовании стилей CSS.
Создание рамки при помощи атрибута
Вообще не расширяемый атрибут, я бы сказал бессмысленный. Атрибут border устанавливает толщину рамки и все. Далее пример:
| Ячейка 1 | Ячейка 2 |
Простой способ создать рамку вокруг элемента
Сразу говорю, подробные записи приводить не буду, так как о свойстве border будет огромный урок в дальнейшем и может не один. Универсальное свойство border способно установить сразу и толщину, и стиль, и цвет границ (рамки). Толщина может быть любой, цвет границ устанавливается в шестнадцатеричном формате, rgb формате и ключевыми словами (red, black и т.д.). Какие бывают стили, картинка ниже (картинка взята с сайта htmlbook.ru) и далее пример:
td {
border: 5px solid #CCCCCC;
}
Рамка слева, справа, снизу и сверху
При использовании border рамка создается со всех сторон. Но можем контролировать, с какой же стороны обрисовывать рамку. Рамка слева border-left: 2px solid black ; рамка справа border-right: 1px dotted #FF0000 ; рамка снизу border-bottom: 10px solid #000000 ; рамка сверху border-top: 1px solid green . Как видите, они не обязательно должны иметь одинаковые значения, а так же их можно комбинировать, то есть написать несколько, например, левую и правую границу (рамку) и т.д. Все. Далее лезть не буду, эта тема другого урока. Пример:
table {
border-left: 5px solid #CCCCCC;
border-right: 5px solid #CCCCCC;
}
td {
border-top: 5px solid #CCCCCC;
border-bottom: 5px solid #CCCCCC;
}
Закругленные углы
Теперь немного затронем тему «красивостей» и юзабилити. Чтобы сделать края рамок закругленными, существует свойство border-radius . Это тоже отдельный урок, сильно подробно разбирать не будем. Он принимает разное количество аргументов. Мы будем писать (только в этом уроке) один аргумент, и если пишем одно значение, значит, будет одинаковое закругление со всех сторон (углов). Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:
td {
border: 5px solid #CCCCCC;
border-radius: 10px;
}
Поля или внутренний отступ
Дабы текст не был впритык к рамке, нужно делать отступ от нее. В этом нам поможет свойство padding . Оно тоже многофункционально, но мы рассмотрим его частично, все по той же причине. Будем использовать только одно значение. Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:
td {
border: 5px solid #CCCCCC;
border-radius: 10px;
padding: 10px;
Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального содержимого веб-страницы и расширить набор средств по дизайну таблиц.
Для создания рамки применяется стилевое свойство 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. Хотя
цвет под рисунком не виден, лучше его всегда добавлять, например, для случая
отключения пользователем отображения изображений в браузере.
Свойство CSS border
слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п. Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность "толщина стиль цвет". border-style: dotted border-style: dashed border-style: solid border-style: double border-style: groove border-style: ridge border-style: inset border-style: outset Четыре разных рамки Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover
и рамку CSS border для создания простых эффектов (например, для меню). Вот как это выглядит на странице: Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P)
, где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0) Вот как это выглядит на странице: Задает толщину линии. Ранее мы задавали ее в едином описании border. Синтаксис CSS border-width
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны. Вот как это выглядит на странице: border-width: thin border-width: medium border-width: thick Разная толщина у границ У свойства CSS border
есть производные свойства для задания односторонних границ у элемента: Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border. Также есть свойства На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми Вот как это выглядит на странице: Пример рамки для цитаты Примечание
Иногда требуется сделать несколько границ. Приведем пример Вот как это выглядит на странице: Есть второй способ через наложение теней. Вот как это выглядит на странице: Для создания красивых рамок используют свойство CSS border-radius
(доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту. Вот как это выглядит на странице: Для обращения к border
из JavaScript нужно писать следующую конструкцию: Влад Мержевич С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border
, как наиболее универсальное, а также outline
и, как ни удивительно, box-shadow
, основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой. Самое простое свойство для создания рамок. Имеет те же параметры, что и border
, но существенно отличается от него некоторыми деталями: Возникает вопрос - в каких случаях нужен outline
, когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border
? Ситуаций не так и много, но они встречаются: Надо понимать, что outline
ни в коей мере не заменяет border
и вполне может существовать вместе с ним, как показано в примере 1. Пример 1. Создание рамки
В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1). Рис. 1. Рамка вокруг элемента При добавлении рамки через border
происходит увеличение ширины элемента, что довольно заметно при сочетании border
и псевдокласса :hover
. Есть два способа, как это «победить». Самое простое - заменить border
на outline
, которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2). Пример 2. Рамка при наведении
outline
не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод - добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width
, border
слева и border
справа. Аналогично обстоит и с высотой. Пример 3. Рамка при наведении
В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline
значение none
, как показано в примере 4. Рис. 2. Рамка вокруг полей Пример 4. Убираем рамку
Хотя свойство box-shadow
предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border
или outline
. Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую. Чтобы получить рамку, первые три параметра следует задать нулевыми, они отвечают за положение тени и её размытие. Четвёртый параметр в данном случае отвечает за толщину границы, а пятый устанавливает цвет рамки. Для второй рамки четвёртый параметр равняется сумме толщин двух рамок. В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow
. Пример 4. Использование box-shadow
Результат данного примера показан на рис. 3. Рис. 3. Рамки, созданные свойством box-shadow Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте Цветная граница рамки таблицы. Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы). С помощью этого тега указывается, откуда следует располагать информацию. В данном примере нам понадобится расположить информацию, начиная с верхнего края таблицы. Вставляем в ячейку нашей таблицы другую таблицу. Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон. Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково. Напоследок, приведу весь код, который мы создали.
2004 2005 2006
Рубины 43 51 79
Изумруды 28 34 48
Сапфиры 29 57 36
1. Синтаксис CSS border
border
: border-width border-style border-color | inherit
;
Примечание
2. Примеры с различными границами рамок CSS border
2.1. Пример. Разные стили оформления границы рамки border-style
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
2.3. Пример. Как сделать прозрачную рамку border
3. Толщина границы: свойство border-width
border-width
: thin | medium | thick | значение
;
4. Как сделать рамку border только с одного края (границы)
/* Описание двух одинаковых стилей:
*/
4.1. Пример. Красивая рамка для выделения цитат
Можно задать отдельную границу для каждой из сторон.5. Как сделать несколько границ border у элемента html
5.1. Первый вариант с несколькими границами
5.2. Наложение теней для создания нескольких границ
6. Скругление углов у границ (border-radius)
7. Вдавленная линия CSS
document.getElementById("elementID").style.border
="VALUE
"
Свойство outline
Разноцветные рамки
Рамка при использовании:hover
Рамка вокруг полей формы
Рамки через box-shadow
(Например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).
Однако, стандарт html имеет небольшое количество стандартных элементов оформления страницы, и не все элементы одинаково отображаются в разных браузерах. Каждая компания пытается разработать свой собственный html, порой уходя далеко от основной концепции html, разработанной консорциумом WWW.
Поэтому веб-мастеру приходится эксперементировать с элементами, которые являются общими для всех браузеров.
Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать информацию.
Кроме того, таблицы в html имеют атрибут "border="0" — этот атрибут со значением "0" скрывает границы таблицы т.е остаётся видно содержимое ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.
Сразу отмечу, что в html, по умолчанию, встроен атрибут, который отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не подойдёт, потому что данный атрибут поддерживается только браузером Internet Explorer. В других браузерах этот элемент не работает. Но нам необходимо, чтобы страница одинаково отображалась в любом браузере. К нам на помощь приходят таблицы. Давайте сначала создадим обычную таблицу.
Атрибут "cellspacing" служит для того, чтобы указать расстояние между двумя ячейками. В данном случае, он будет указывать расстояние между двумя таблицами.
Зальём таблицу черным цветом, используя атрибут "bgcolor" Вообще вы можете выбрать любой другой цвет, в зависимости от того, какого цвета будет ваша рамка.
Лучшие статьи по теме
