Как рамку вокруг таблицы в html. Рамки и границы

Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.

Теги, используемые для построения таблицы в html

table - обязательный тег, открывающий и закрывающий таблицу
caption - необязательный тег, обозначающий заголовок таблицы
th - необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr - обязательный тег, с которого открывается и закрывается строка
td - обязательный тег, обозначающий открытие и закрытие ячейки в строке

Пример кода простой таблицы

Название таблицы

Стобец 1	Стобец 2
Текст в первой ячейке	Текст во второй ячейке

В браузере отобразится

Назначение таблиц в html

Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ , ширину , границу и другие параметры , что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна ! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...

Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

У тега table есть следующие атрибуты:

width - ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor - цвет фона ячеек таблицы
background - заливает фон таблицы рисунком
border - рамка и границы в таблице. Толщина указывается в пикселях
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.

Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th ) и зададим параметр атрибуту border (граница) , width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

В результате в браузере будет выведена таблица следующего вида

frame - атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:

Void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки.

rules - атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:

None - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.

Рассмотрим пример кода

Стобец 1	Стобец 2

Результат

Теперь попробуем создать красивую таблицу. Для этого давайте начнём использовать выравнивание в таблице . Для этого есть следующие уже знакомые параметры:

align - выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing - расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца

В браузере отобразится выравненная по центру таблица следующего вида

Строки tr и ячейки td в таблицах HTML

Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек (td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.

Для тегов tr и td есть следующие

align - выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign - выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor - задает цвет строки
width - ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height - высота ячейки (все ячейки в строке примут данный параметр)

Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца
Стобец 1	Стобец 2

Результат

С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!)

Спасибо за внимание! Надеюсь материал был полезен!

Здравствуйте, сегодня мы поговорим о таком важном атрибуте в CSS как создание рамки. Рамка очень часто используется для того чтобы обрамить текст, отделить один элемент дизайна от другого и для каждого вебмастера полезно знать как задать рамку в CSS.

Задаем стиль оформления рамки в CSS.

Первым что нужно задать вам при создании рамки на своем сайте это стиль рамки для CSS. Благодаря этому вы дадите понять браузеру какой линией выводить рамку. Давайте для примера для одного заголовка просто зададим сплошную линию, как на обычных рамках. Для этого нам конечно же нужен файл стилей который вы можете создать самостоятельно и как это сделать я рассказывал уже на других статьях своего блога.

Я не буду создавать новый файл а буду использовать старый, кроме того здесь сохранились заголовки разного уровня для которых мы будем создавать рамки. Давайте зададим разные виды рамки для заголовка первого уровня и который задается тегом h1. Для этого в файл стилей прописываем такой текст: h1 {border-style:solid;} и коротко рассмотрим что мы написали. h1 это мы определили для какого элемента мы будем задавать рамку, border-style команда которая означает что для данного элемента нужно задать рамку определенного стиля ну а solid обозначает стиль отображения рамки, в данном случае это сплошная черта.

Мы можем менять стиль отображения рамки и для этого нам просто нужно задавать новые параметры и сейчас я покажу какие имеются команды и как они отображаются на сайте.
Параметры рамки:

solid или сплошная линия.

Dotted-пунктирная линия.

dashed-штрихованная линия.

double-двойная сплошная линия.

Это основные стили которые вы можете задать стиль рамки в CSS , более подробно о всех командах вы можете узнать с спецификации по CSS.

До этого мы задавали стиль полностью для всей рамки но мы можем задать также параметр конкретно для любой из сторон и таблицы стилей дает нам такую возможность. В этом нам помогут четыре команды: border-left-style (левая линия) border-top-style (верхняя линия) border-right-style (правая линия) и border-bottom-style (нижняя линия).

Давайте теперь зададим для нашего заголовка стиль для каждой стороны свой. Напишем команду для всех четырех сторон:

h1 {
border-left-style:groove;
border-top-style:solid;
border-right-style:double;
border-bottom-style:dotted;}

И на практике мы увидим вот такой результат.

Для задания рамки нам нужно использовать атрибут стиля border-width для которого мы можем задать несколько параметров: первый это задать размер рамки в пикселах или задать толщину командами thin (тонкая линия), medium (средняя линия) или thick (толстая линия). Толщину линии мы также можем задать для любой стороны рамки независимо от того какой стиль задан для остальных.

Давайте для начала изучим как задать толщину линии рамки непосредственно для всех сторон. Для этого нам просто нужно взять и задать команду border-width и определить для него размер линии. Для того чтобы задать толщину текст будет выглядеть так:

h1 {
border-style:solid;
border-width:thin;
}

Команду thin можно заменить на medium или thick или же задать толщину в пикселях обязательно указав единицу измерения, например размер в четыре пикселя-4px.

Теперь мы будем задавать параметры толщины для каждой стороны нашей рамки. Также как и с заданием стиля нам помогут параметры border-left-width (толщина левой линии), border-top-width (толщина верхней линии), border-right-width (толщина правой линии) и border-bottom-width (толщина нижней линии). Для этого мы в файл стилей добавим четыре строчки следующего содержания:

h1 {
border-style:solid;
border-left-width:medium;
border-top-width:thin;
border-right-width:thick;
border-bottom-width:7px;
}

И теперь все четыре стороны нашей рамки будут иметь свою толщину.

Как задать цвет рамки в CSS.

Давайте теперь зададим цвет рамки в CSS и в этом нам поможет команды border-left-color, border-top-color, border-right-color и border-bottom-color для задания цвета для левой,верхней,правой и нижней линии рамки соответственно. Для этого мы прописываем команды и к каждой команде добавляем по параметру цвета.

h1 {
border-style:solid;
border-left-color:#00CCCC;
border-top-color:#6633CC;
border-right-color:#CCCCCC;
border-bottom-color:#66CC99;
}

И теперь посмотрим результат применения данного параметра.

Задание глобальной переменной для сокращения записи.

Теперь давайте разберем как нам можно избавиться от таких громоздких конструкций и записей. Для этого нам нужно будет задать глобальный атрибут border в который мы зададим такие параметры как толщина рамки,стиль рамки и цвет и все это поместиться не в три строчки как минимум а всего лишь в одну строчку.

Для этого мы пишем строчку:
h1 {
border:5px solid #3399FF;
}

в строчке сначала мы указываем толщину линии рамки потом пробел и указываем стиль оформления рамки и снова через пробел указываем цвет рамки. Вот и все мы сократили запись до одной строчки.

Надеюсь что благодаря данной статье вы сможете задавать рамки для всех элементов в CSS. Я постарался остановить ваше внимание на самых необходимых командах и подробно вам рассказать о том как задать рамку в CSS, задать стиль рамки в CSS и задать цвет рамки в CSS.

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .

Оформление рамок и границ HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца

border-style (border-top-style, border-right-style, border-bottom-style, border-left-style)
Значения:
none	Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hidden	Эквивалентно none .
dotted	dotted
dashed	dashed
solid	solid
double	double
groove	groove
ridge	ridge
inset	inset
outset	outset
{1,4}	Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style: {border-style: solid dotted none dotted;}
initial
inherit

Синтаксис

P {border-style: solid;} p {border-top-style: solid;}

2. Цвет рамки border-color

Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.

border-color (border-top-color, border-right-color, border-bottom-color, border-left-color)
Значения:
transparent	Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
цвет	Цвет рамок задается при помощи значений свойства . {border-color: #cacd58;}
{1,4}	Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color: {border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

P {border-color: #cacd58;}

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

Синтаксис

P {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:

Div { width: 100px; height: 100px; border: 2px solid grey; }

При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.

5. Задание рамки для одной границы элемента

В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width , border-style и border-color . Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .

Синтаксис

P {border-top: 2px solid grey;}

6. Внешний контур outline

Свойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей.

Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.

Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius .

Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию.

Div { width: 100px; height: 100px; outline: #cacd58 solid 2px; }

6.1. Стиль внешнего контура outline-style

Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.

Синтаксис

P {outline-style: ridge;}

6.2. Цвет внешнего контура outline-color

Цвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется.

Синтаксис

P { outline-style: ridge; outline-color: silver; }

6.3. Толщина внешнего контура outline-width

Толщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется.

Синтаксис

P { outline-style: dotted; outline-width: 5px; }

21.01.06 5.9K

Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте
(Например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).
Однако, стандарт html имеет небольшое количество стандартных элементов оформления страницы, и не все элементы одинаково отображаются в разных браузерах. Каждая компания пытается разработать свой собственный html, порой уходя далеко от основной концепции html, разработанной консорциумом WWW.
Поэтому веб-мастеру приходится эксперементировать с элементами, которые являются общими для всех браузеров.
Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать информацию.
Кроме того, таблицы в html имеют атрибут "border="0" — этот атрибут со значением "0" скрывает границы таблицы т.е остаётся видно содержимое ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.

Цветная граница рамки таблицы.
Сразу отмечу, что в html, по умолчанию, встроен атрибут, который отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не подойдёт, потому что данный атрибут поддерживается только браузером Internet Explorer. В других браузерах этот элемент не работает. Но нам необходимо, чтобы страница одинаково отображалась в любом браузере. К нам на помощь приходят таблицы. Давайте сначала создадим обычную таблицу.

Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы).
Атрибут "cellspacing" служит для того, чтобы указать расстояние между двумя ячейками. В данном случае, он будет указывать расстояние между двумя таблицами.
Зальём таблицу черным цветом, используя атрибут "bgcolor" Вообще вы можете выбрать любой другой цвет, в зависимости от того, какого цвета будет ваша рамка.

С помощью этого тега указывается, откуда следует располагать информацию. В данном примере нам понадобится расположить информацию, начиная с верхнего края таблицы.

Вставляем в ячейку нашей таблицы другую таблицу.

Текст

Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон.

Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково.

Напоследок, приведу весь код, который мы создали.

Текст

Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального содержимого веб-страницы и расширить набор средств по дизайну таблиц.

Для создания рамки применяется стилевое свойство border , которое добавляется к селектору TABLE . Также эффектно смотрится таблица, когда цвет рамки совпадает с цветом фона заголовка (тег ), как показано на рис. 1.

В примере 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. Использование фонового рисунка

	2004	2005	2006
Рубины	43	51	79
Изумруды	28	34	48
Сапфиры	29	57	36

В данном примере тег охватывает только верхнюю строку таблицы с ее заголовком. Для этого тега в стилях одновременно устанавливается цвет фона и картинка, которая приведена на рис. 4. Хотя цвет под рисунком не виден, лучше его всегда добавлять, например, для случая отключения пользователем отображения изображений в браузере.