«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS


Рассмотрим несколько свойства 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>

Результат

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

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

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

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

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

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Пустые ячейки в CSS </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>
<html>
<head>
<meta charset="utf-8">
<title> Ширина ячеек таблицы в CSS </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>

Результат


CSS по шагам

Все cвойства CSS