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