Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Свойства ячеек Еще несколько свойств...

Свойства ячеек таблицы

Border-collapse Border-spacing Empty-cells Table-layout

Общие границы
Расстояние между ячейками
Пустые ячейки
Ширина ячеек


Рассмотрим несколько свойства CSS, определяющих некоторые особенности отображения ячеек таблицы.

Общие границы

Одним из таких свойств CSS является свойство border-collapse. Оно определяет характер отображения границ ячеек и границы таблицы.

По умолчанию свойство border-collapse имеет значение separate. При этом каждая ячейка, также как и таблица, имеет собственную границу.

При значении collapse свойства border-collapse ячейки таблицы имеют общие границы в том числе и с таблицей.

Свойство применимо к тегу <table>.

Пример

Фрагмент кода:

<table width="700" border="1" style="border-collapse:separate;">
<tr>
<td>
Индивидуальная граница </td>
<td>
У каждой ячейки </td>
<td>
И у таблицы. </td>
</tr>
</table>


<table width=
"700" border="1" style="border-collapse:collapse;">
<tr>
<td>
Общие границы </td>
<td>
У ячеек между собой </td>
<td>
И у ячеек с таблицей. </td>
</tr>
</table>

Результат:


Индивидуальная граница У каждой ячейки И у таблицы

Общие границы У ячеек между собой И у ячеек с таблицей.

Расстояние между ячейками

В случае, когда и таблица, и каждая ячейка имеют собственные границы (при значении separate свойства border-collapse), к таблицам применимо свойство border-spacing, позволяющее задать расстояние между границами ячеек, в том числе и расстояние между границами ячеек и границей таблицы.

Расстояние задается в пикселях. Если указано одно значение, тогда расстояние между всеми ячейками одинаковое; если два, то первое значение задает расстояние между ячейками по вертикали, а второе - по горизонтали.

Свойство применимо к таблицам.

Свойство не поддерживается Internet Explorer до версии 8.0.

Пример

Фрагмент кода:

<table border="1" align="center" style="border-spacing:20px;">
<tr>
<td>
Расстояние между всеми ячейками одинаковое </td>
<td>
Также как и расстояние между ячейками и границей таблицы </td>
<td>
И составляет 20 пикселей. </td>
</tr>
</table>


<table border="1" align="center" style="border-spacing:20px 5px
;">
<tr>
<td>
Вертикальные расстояния </td>
<td>
Составляют 20 пикселей </td>
<td>
Горизонтальные - 5 пикселей. </td>
</tr>
</table>

Результат:


Расстояние между всеми ячейками одинаковое Также как и расстояние между ячейками и границей таблицы И составляет 20 пикселей.

Вертикальные расстояния Составляют 20 пикселей Горизонтальные - 5 пикселей.

Пустые ячейки

Свойство empty-cells позволяет скрыть пустые ячейки, но опять же лишь при значении separate свойства border-collapse.

По умолчанию граница и фон пустых  ячеек отображены. При значении hide свойства empty-cells граница и фон будут скрыты.

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

Свойство применимо к тегам <td> и <th>.

Свойство не поддерживается Internet Explorer до версии 8.0.

Пример

Фрагмент кода:

<!DOCTYPE ...>
<html>
<head>
<meta http-...>
<title> Пустые ячейки </title>

<style type="text/css">
td{ border:#FF0033 solid 1px; padding:5px;}
</style>

</head>
<body>

<table style="border:#0099CC solid 2px; width:700px; empty-cells:show;">
<tr>
<td>
Нижние ячейки пусты </td>
<td>
Давайте их скроем. </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
Следующая строка </td>
<td>
Следующая строка </td>
</tr>
</table>

<table style="border:#0099CC solid 2px; width:700px; empty-cells:hide;">
<tr>
<td>
Теперь, как видите </td>
<td>
Пустые ячейки скрыты. </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
Следующая строка </td>
<td>
Осталась на своем месте. </td>
</tr>
</table>


</body>
</html>

Результат:

Ширина ячеек

То каким образом браузер определит ширину ячеек таблицы зависит от свойства table-layout. И здесь возможны два варианта.

По умолчанию (при значении auto свойства table-layout) ширина ячеек определяется браузером автоматически исходя из размеров их содержимого.

При значении fixed ширина ячеек фиксируется. При этом возможны следующие варианты:

- если ширина ячеек не указана, то она будет одинакова у всех ячеек;

- если указана ширина лишь некоторых ячеек, то ширина остальных также будет одинакова.

Свойство применимо к тегу <table>.

Пример

Фрагмент кода:

<!DOCTYPE ...>
<html>
<head>
<meta http-...>
<title> Ширина ячеек таблицы </title>

<style type="text/css">
table {border:#FF0033 solid 2px; width:700px;}
td {
border:#00CC66 solid 2px; padding:5px;}
</style>

</head>
<body>

<table>
<tr>
<td>
Ширина ячеек таблицы </td>
<td>
Определяется </td>
<td>
Автоматически! </td>
</tr>
</table>

<table style="
table-layout:fixed;">
<tr>
<td>
Ширина ячеек таблицы фиксирована </td>
<td>
И она одинакова </td>
<td>
У всех ячеек! </td>
</tr>
</table>

<table style="
table-layout:fixed;">
<tr>
<td width=
"400"> Ширина этой ячейки 400 пикселей </td>
<td>
Ширина остальных фиксирована </td>
<td>
И одинакова! </td>
</tr>
</table>


</body>
</html>

Результат:

Cкрытие элементов Свойства ячеек Еще несколько свойств...
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru