Сколько бы ни хвалились производители суперплоских мониторов, всегда есть сила, действующая в обратном направлении: это программисты, которые никак не могут примирится с двумерностью экрана и на каждом шагу скандируют: «даёшь 3D!».
Псевдотрехмерность окружает нас везде: где надо и не надо. Если, к примеру, button по определению должен выпирать из монитора, то в чем провинились безобидные hr и table ? Первый уже рассматривался в заметке № 12 , теперь поговорим о том, как на корню убить трехмерность последнего.
Задача : получить следующую таблицу:
Способ первый
Воспользуемся атрибутом cellspacing , создающим прозрачную рамку меж всех клеток таблицы. Нужно лишь окрасить ее в определенный цвет, а сделать это можно с помощью свойства bgcolor тэгов table и td:
Милостивый читатель спросит: а почему нельзя поместить bgcolor=white сразу в тэг tr , тем самым значительно сжав код? На что автор ответит: а потому, деточка моя, что двоечник по рендерингу NN6 окрасит всю строку белым цветом, и плакали наши вертикальные рамочки.
Тем не менее, код действительно получается громоздким, поэтому на подходе…
Способ второй
Идея подсмотрена в исходниках Студии Лебедева и принципиально не отличается от предыдущей: полностью включаем исходную таблицу во внешнюю, для которой и прописываем нужный bgcolor .
Код значительно полегчал, хвала кодерам Студии Лебедева. Но и этот способ не лишен недостатков: попробуйте распечатать такую таблицу на принтере. Получилось? Фигушки, потому что Internet Explorer по умолчанию не печатает цвета и рисунки фона.
«Прежде чем распечатать эту страницу, пожалуйста, зайдите в меню Сервис , выберите пункт Свойства обозревателя, откройте вкладку Дополнительно и в разделе Печать отметьте галочку Печатать цвета и рисунки фона . Спасибо». Хватит бредить, лучше покланяемся в ножки CSS:
Способ третий
Действительно, что нам мешает указать каждой ячейке свойство border ?
td{
border: solid black 1px
}
А то, мои дорогие, что таким образом на месте соприкасания ячеек получится рамка толщиной в два пикселя. По спецификации , эту проблему должно решать свойство border-collapse со значением collapse . В этом случае соседние границы должны «проглатывать» друг друга. Оставим это счастье нашим внукам, потому что нынче ни один браузер это свойство не поддерживает. Отсюда вытекает…
Способ четвертый
По-научному это называется разделением труда:
table.border{
border-color: black;
border-style: solid;
border-width: 0 1px 1px 0
}
border-color: black;
border-style: solid;
border-width: 1px 0 0 1px
}
Всё просто до безобразия. Каждая ячейка отвечает только за верхнюю и левую рамки. Осталось лишь дорисовать длинные правую и нижнюю рамки. Это возложено на свойство border самой таблицы.
Примечание автора сайта . На самом деле, CSS свойство border-collapse полностью (значения separate и collapse) поддерживается IE5+, NN6/Mozilla, Opera 4+, что вполне оправдывает его использование. Учтите только, что задавать свойство border-collapse необходимо при декларации тега table , в то время как бордер задаётся при описании ячеек:
table.border{
border-collapse:collapse
}
Table.border td, table.border th{
border:1px solid #CC0000
CSS свойства границы позволяют вам указывать стиль и цвет границы элемента.
Стиль Границы
Свойство border-style указывает, какой тип границы отображать.
Никакое из свойств границы не возымеет КАКОЙ-ЛИБО эффект до тех пор, пока свойство border-style не установлено!
Значения border-style
none: Отсутствие границы
dotted: Граница из точек
dashed: Пунктирная граница
solid: Сплошная граница
double: Двойная граница. Ширина двойной границы равна значению border-width
groove: Определяет 3D рельефную границу. Эффект зависит от значения border-color
ridge: Определяет 3D хребтообразную границу. Эффект зависит от значения border-color
inset: Определяет 3D вдавленную границу. Эффект зависит от значения border-color
outset: Определяет 3D выпуклую границу. Эффект зависит от значения border-color
Ширина Границы
Свойство border-width используется, чтобы установить ширину границы.
Ширина устанавливается в пикселях, или с помощью одного из трех предопределенных значений: thin (тонкая), medium (средняя), or thick (толстая).
Свойство "border-width" не работает, если используется в одиночку. Используйте сначала свойство "border-style", чтобы установить границы.
Цвет Границы
Свойство border-color используется, чтобы установить цвет границы. Цвет может быть установлен с помощью:
- названия - укажите название цвета, например "red"
- RGB - укажите RGB значение, например "rgb(255,0,0)"
- Hex - укажите шестнадцатеричное значение, например "#ff0000"
Также вы можете установить цвет границы в "transparent".
Свойство "border-color" не работает, если используется в одиночку. Укажите сначала свойство "border-style", чтобы установить границы.
Граница - Индивидуальное оформление сторон
В CSS можно указать различные границы для разных сторон:
Пример выше можно переделать, используя одно свойство:
Свойство border-style может иметь от одного до четырех значений.
- border-style:dotted solid double dashed;
- верхняя граница - из точек
- правая граница - сплошная
- нижняя граница - двойная
- левая граница - пунктирная
- border-style:dotted solid double;
- верхняя граница - из точек
- нижняя граница - двойная
- border-style:dotted solid;
- верхняя и нижняя границы - из точек
- правая и левая границы - сплошные
- border-style:dotted;
- все четыре границы - из точек
Свойство border-style используется в примере выше. Однако, это также работает и со свойствами border-width и border-color.
Граница - Стенографическое (сокращенное) свойство
Как вы можете видеть в примерах выше, для границ имеется довольно много свойств.
Чтобы укоротить код, можно указать все свойства границы в одном свойстве. Оно называется стенографическим (или сокращенным) свойством.
Стенографическое свойство для свойств границы - "border":
При использовании свойства border, порядок значений таков:
- border-width
- border-style
- border-color
Можно пропустить некоторые значения (хотя, свойство border-style все-таки необходимо), главное - сохранять указанный порядок.
Еще примеры |
Все свойства верхней границы в одном объявлении
Этот пример демонстрирует стенографическое свойство для установки всех свойств верхней границы в одном объявлении.
Установка стиля нижней границы
Этот пример демонстрирует, как установить стиль нижней границы.
Установка ширины левой границы
Этот пример демонстрирует, как установить ширину левой границы.
Установка цвета четырех границ
Этот пример демонстрирует, как установить цвет четырех границ. Они могут иметь от одного до четырех цветов.
Установка цвета правой границы
Этот пример демонстрирует, как установить цвет правой границы.
Все CSS Свойства Границы
| Свойство | Описание |
|---|---|
| border | Устанавливает все свойства границы в одном объявлении |
| border-bottom | Устанавливает все свойства нижней границы в одном объявлении |
| border-bottom-color | Устанавливает цвет нижней границы |
| border-bottom-style | Устанавливает стиль нижней границы |
CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .
Оформление рамок и границ HTML-элементов с помощью CSS-свойств
1. Стиль рамки border-style
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
| 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:
|
| 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:
|
| 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; }
Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.
Теги, используемые для построения таблицы в html
table
- обязательный тег, открывающий и закрывающий таблицу
caption
- необязательный тег, обозначающий заголовок таблицы
th
- необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr
- обязательный тег, с которого открывается и закрывается строка
td
- обязательный тег, обозначающий открытие и закрытие ячейки в строке
Пример кода простой таблицы
| Стобец 1 | Стобец 2 |
|---|---|
| Текст в первой ячейке | Текст во второй ячейке |
В браузере отобразится
Назначение таблиц в html
Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ , ширину , границу и другие параметры , что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна ! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...
Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)
У тега table есть следующие атрибуты:width
- ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor
- цвет фона ячеек таблицы
background
- заливает фон таблицы рисунком
border
- рамка и границы в таблице. Толщина указывается в пикселях
cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.
| Стобец 1 | Стобец 2 |
| |
| Стобец 1 | Стобец 2 |
Текст в первой ячейке первого столбца | Текст во второй ячейке второго столбца |
| Стобец 1 | Стобец 2 |
Текст в первой ячейке первого столбца | Текст во второй ячейке второго столбца |
| Стобец 1 | Стобец 2 |
| Стобец 1 | Стобец 2 |
Текст в первой ячейке первого столбца | Текст во второй ячейке второго столбца |
