CSS атрибуты и значения, определяющие свойства таблиц

CSS таблица и пример оформления ее границы:

<title>CSS рамка таблицы</title> <style type="text/css"> table.t_example { background-color: #cccccc; width: 400px }.t_example tr { background-color: #ffffff; height: 100px } </style> </head> <body> <table border="0" cellspacing="1" align="center" class="t_example"> <tr> <td>   </td><td>   </td><td>   </td><td>   </td> </tr> <tr> <td>   </td><td>   </td><td>   </td><td>   </td> </tr> </table>

Отметьте, что рамка таблицы определена не значением атрибута border, а значением атрибута background-color: и значением атрибута cellspacing="", при этом ее толщина равна значению атрибута cellspacing="", которое указано в пикселях.

Пустые ячейки содержат символ пробела, так надо.

Очередной пример по оформлению таблиц:

<title>Таблица CSS и ее граница</title> <style type="text/css"> table.t_example { background-color: #999999; width: 600px } .t_example tr { background-color: #ffeeee; height: 150px } </style> </head> <body> <table border="0" cellspacing="3" align="center" class="t_example"> <tr> <td>   </td><td>   </td><td>   </td><td>   </td> </tr> <tr> <td>   </td><td>   </td><td>   </td><td>   </td> </tr></table>

Границы элемента

В этой главе мы поговорим о том, как сделать с помощью CSS рамку - бордюр, вокруг того или иного элемента. В HTML эта задача лежала на плечах атрибута border, однако его можно было применить далеко не к каждому тегу (элементу) да и не всегда он мог решить ту или иную дизайнерскую задумку.

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

Стиль границы.

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

Свойство border-style может присваивать элементу один из ниже перечисленных стилей границы.

· none - граница отсутствует (по умолчанию).

· dotted - граница из ряда точек.

· dashed - пунктирная граница.

· solid - сплошная граница

· double - двойная граница

· groove - граница "бороздка"

· ridge - граница "гребень"

· inset - вдавленная граница

· outset - выдавленная граница

Пример:

<html>

<head>

<title>Стиль границы</title>

<style type="text/css">

p {

background-color: #f5f5f5;

text-align: center;

}

</style>

</head>

<body>

<p style=" border-style: none; ">граница отсутствует</p>

<p style=" border-style: dotted; ">граница из ряда точек</p>

<p style=" border-style: dashed; ">пунктирная граница</p>

<p style=" border-style: solid; ">сплошная граница</p>

<p style=" border-style: double; ">двойная граница</p>

<p style=" border-style: groove; ">граница "бороздка"</p>

<p style=" border-style: ridge; ">граница "гребень"</p>

<p style=" border-style: inset; ">вдавленная граница</p>

<p style=" border-style: outset; ">выдавленная граница</p>

</body>

</html>

Стиль бордюра может быть задан как для всех сторон элемента одновременно, так и для каждой его стороны отдельно в зависимости от того, сколько значений присвоено свойству border- style. Таковых значений может быть от одного до четырёх по числу сторон элемента.

В каждом из четырёх случаев действуют свои "правила" по присуждению стиля рамки той или иной стороне элемента, которые приведены в таблице ниже:

Число значений	Результат
	Пример: div {border-style: solid;} · Первое значение - Устанавливает единый стиль бордюра для всех сторон элемента.
	Пример: div {border-style: solid double;} · Первое значение - Устанавливает стиль верхней и нижней границы элемента. · Второе значение - Устанавливает стиль левой и правой границы элемента.
	Пример: div {border-style: solid double dashed;} · Первое значение - Устанавливает стиль верхней границы элемента. · Второе значение - Устанавливает стиль левой и правой границы элемента. · Третье значение - Устанавливает стиль нижней границы элемента.
	Пример: div {border-style: solid double dashed ridge;} · Первое значение - Устанавливает стиль верхней границы элемента. · Второе значение - Устанавливает стиль правой границы элемента. · Третье значение - Устанавливает стиль нижней границы элемента. · Четвёртое значение - Устанавливает стиль левой границы элемента.

Толщина границы.

Свойство border-width - устанавливает ширину границы элемента.

Ширина бордюра может быть заданна с помощью следующих аргументов:

· thin - тонкая граница

· medium - средняя толщина границы

· thick - толстая граница

А также в пикселях или любых других единицах измерения принятых в CSS.

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

Число значений	Результат
	Пример: div {border-style: solid; border-width: 1px;} · Первое значение - Устанавливает единую толщину бордюра со всех сторон.
	Пример: div {border-style: solid; border-width: 1px 4px;} · Первое значение - Устанавливает толщину верхней и нижней границы элемента. · Второе значение - Устанавливает толщину левой и правой границы элемента.
	Пример: div {border-style: solid; border-width: 1px 4px 7px;} · Первое значение - Устанавливает толщину верхней границы элемента. · Второе значение - Устанавливает толщину левой и правой границы элемента. · Третье значение - Устанавливает толщину нижней границы элемента.
	Пример: div {border-style: solid; border-width: 1px 4px 7px 5px;} · Первое значение - Устанавливает толщину верхней границы элемента. · Второе значение - Устанавливает толщину правой границы элемента. · Третье значение - Устанавливает толщину нижней границы элемента. · Четвёртое значение - Устанавливает толщину левой границы элемента.

Пример:

<html><head>

<title>Толщина границы</title>

</head>

<body>

<div style="border-style: solid; border-width: 3px 1px 10px 4px ">

Толщина границ данного блока:

<ul>

<li>Сверху 3 пикселя

<li>Справа 1 пиксель

<li>Снизу 10 пикселей

<li>Слева 4 пикселя

</ul>

</div>

<br><br>

<div style="border-style: double; border-width: thick ">В этом блоке границы со всех сторон одинаково толстые</div>

</body>

</html>

Цвет границы.

Цвет рамки или её сторон по отдельности определяется свойством border-color.

Цвет бордюра может иметь следующие значения:

· #ff0000 - шестнадцатеричное значение цвета RGB.

· red - именное значение цвета.

· RGB(255,0,0) - значение цвета RGB.

· transparent - прозрачная граница.

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

Число значений	Результат
	Пример: div {border-style: solid; border-width: 3px; border-color: #008000;} · Первое значение - Устанавливает единый цвет бордюра со всех сторон.
	Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff;} · Первое значение - Устанавливает цвет верхней и нижней границы элемента. · Второе значение - Устанавливает цвет левой и правой границы элемента.
	Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000;} · Первое значение - Устанавливает цвет верхней границы элемента. · Второе значение - Устанавливает цвет левой и правой границы элемента. · Третье значение - Устанавливает цвет нижней границы элемента.
	Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000 #ffff00;} · Первое значение - Устанавливает цвет верхней границы элемента. · Второе значение - Устанавливает цвет правой границы элемента. · Третье значение - Устанавливает цвет нижней границы элемента. · Четвёртое значение - Устанавливает цвет левой границы элемента.

Что то уж больно много почти идентичных таблиц получилось.. ну не судите строго у каждого читателя свой уровень подготовки, да и учебник этот с маркой: -"CSS для начинающих" так что лучше перестраховаться, рассмотрев каждый случай отдельно, не желе чем быть непонятым.

Так вот перестраховываясь, привожу пример:

<html>

<head>

<title>Цвет границы</title>

</head>

<body>

<div style="border-style: solid; border-width: 10px; border-color: #ff0000 #ffff00 #00ff00 #0000ff; ">

<p style="border-style: double; border-width: 5px; border-color: #008000; ">Зелёный</p>

<p style="border-style: double; border-width: 5px; border-color: red; ">Красный</p>

<p style="border-style: double; border-width: 5px; border-color: rgb(0,0,255); ">Синий</p>

</div>

</body>

</html>