«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


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

Результат

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта