Создание сайтов на WebPagesDesign.ru (495) 508-5716.

Главная
Портфолио (сайты)
Изготовление сайтов
Продвижение сайта
Информация
   Техническая поддержка
   Прочие услуги
   Документация
   Cправочник html
   Cправочник css
   Cправочник php
Новости и события

тел.: (495) 508-5716
info@webpagesdesign.ru


Новые сайты



www.hutor-2.ru




www.patrisa-nail.ru


Изготовление сайта жилого комплекса "Кореневский хуторок 2"
подробнее

Все работы на одной странице
подробнее

Создание сайта для логистической компании Way Logistic.
подробнее

Сайт ЦСВМ "Штурман"
подробнее

Справочник css.

<border-collapse>

вернуться
CSS CSS1
Значение по умолчанию separate
Наследуется Нет
Применяется К тегу <TABLE> или к элементам, у которых значение свойство display установлено как table или inline-table
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/REC-CSS2/tables.php#propdef-border-collapse

Описание

Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

Рис. 1а Рис. 1б
а б

Рис. 1. Вид таблицы при использовании атрибута border-collapase

Синтаксис

border-collapse: collapse | separate

Аргументы

collapse
Линия между ячейками отображается только одна.
separate
Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.

Пример

Валидный CSS
Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>border-collapse</title>
<style type="text/css">
TABLE {
 width: 300px; /* Ширина таблицы */
 border: 4px double black; /* Рамка вокруг таблицы */
 border-collapse: collapse; /* Отображать только одинарные линии */
}

TH {
 text-align: left; /* Выравнивание по левому краю */
 background: #ccc; /* Цвет фона ячеек */
 padding: 5px; /* Поля вокруг содержимого ячеек */
 border: 1px solid black; /* Граница вокруг ячеек */
}

TD {
 padding: 5px; /* Поля вокруг содержимого ячеек */
 border: 1px solid black; /* Граница вокруг ячеек */
}
</style>
</head>
<body>

<table cellspacing="0">
<tr>
<th>&nbsp;</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
</tr>
<tr>
<td>Нефть</td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Золото</td>
<td>29</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Дерево</td>
<td>38</td>
<td>57</td>
<td>36</td>
</tr>
</table>

</body>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2

Рис. 2. Вид таблицы при использовании параметра border-collapse



Таблицы

  • border-collapse устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии.
  • table-layout определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
  • border-spacing задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.

  • главная

    статьи
    контакты
    команда

    главная

    2003 - 2010 © Хамикулён | Изготовление сайтов
    тел.: (495) 508-5716
    e-mail: info@webpagesdesign.ru