Border таблица: border-collapse | htmlbook.ru

border-collapse | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

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

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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


а	б

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

Синтаксис

border-collapse: collapse | separate | inherit

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    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>
   <tr> 
    <th>&nbsp;</th><th>2013</th>
    <th>2014</th><th>2015</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. Вид таблицы при использовании свойства border-collapse

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
В IE6 и IE7 не отменяется действие атрибута cellspacing.

Таблица

CSS по теме

border-collapse

Статьи по теме

Объемная таблица
Сетка таблицы
Строки таблицы
Таблицы и стили
Таблицы и стили

Рецепты CSS

Рамка и отступы таблицы (свойства border-spacing, empty-cells, border-collapse)

Как сделать рамку для таблицы

Вид, толщину, цвет рамки таблицы определяет свойство border. Его можно указать в атрибуте style.

Ячейка	Ячейка
Ячейка	Ячейка

<table style="border: 1px solid red;">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Установить рамку каждой ячейке также можно с помощью атрибута style. Но предпочтительней стиль вынести в тег style или файл .css: кода меньше, возможности шире, удобства больше (чтобы изменить цвет рамки у всех ячеек, достаточно поменять значение один раз).

Ячейка	Ячейка
Ячейка	Ячейка

<table style="border: 1px solid red;">
  <tr>
    <td style="border: 1px solid red;">Ячейка
    <td style="border: 1px solid red;">Ячейка
  <tr>
    <td style="border: 1px solid red;">Ячейка
    <td style="border: 1px solid red;">Ячейка
</table>



<style>
.raz,
.raz td {
  border: 1px solid red;
}
</style>

<table class="raz">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

border-spacing: расстояние между ячейками таблицы

слева+справа em rem ex ch vh vw vmin vmax px mm cm in pt pc сверху+снизу em rem ex ch vh vw vmin vmax px mm cm in pt pc
initial: 0
inherit: наследует значение родителя
unset: наследует значение родителя

Ячейка	Ячейка
Ячейка	Ячейка

<style>
. raz {
  border-spacing: 0;
  
  border-spacing: 0 0; 
}
.raz,
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Убрать промежутки от ячеек до краёв таблицы

Ячейка	Ячейка	Ячейка
Ячейка	Ячейка	Ячейка
Ячейка	Ячейка	Ячейка
Ячейка	Ячейка	Ячейка

<style>



.raz {
  border-spacing: 0;
  padding: 0 2em 3em 0;  
}
.raz,
.raz td {
  position: relative;
  border: 1px solid red;
}
.raz td:nth-child(2) {
  left: 1em;
}
. raz td:nth-child(3) {
  left: 2em;  
}
.raz tr:nth-child(2) td {
  top: 1em;
}
.raz tr:nth-child(3) td {
  top: 2em;
}
.raz tr:nth-child(4) td {
  top: 3em;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
</table>

empty-cells: наличие границ и фона у пустых ячеек

show: у пустой ячейки есть граница и фон
hide: у пустой ячейки нет границы и фона
initial: show
inherit: наследует значение родителя
unset: наследует значение родителя

Ячейка
Ячейка	Ячейка

<style>
. raz {
  empty-cells: show; 
}
.raz,
.raz td {
  border: 1px solid red;
}
.raz td {
  background: lightpink;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Скрыть пустые ячейки в таблице c border-collapse: collapse; можно с помощью псевдоклассов :empty или :blank.

border-collapse: схлопывание границ ячеек

separate: у каждой ячейки и таблицы в целом своя граница, игнорируется свойство border у thead, tfoot, tbody и tr
collapse: между ячейками и контейнером единая граница, отсутствуют двойные рамки таблицы, игнорируются свойства border-spacing, empty-cells, padding у table
initial: separate
inherit: наследует значение родителя
unset: наследует значение родителя

Ячейка	Ячейка
Ячейка	Ячейка

<style>
. raz {
  border-collapse: collapse; 
}
.raz,
.raz td {
  border: 1px solid red;
}
.raz tbody,
.raz tr,
.raz td {
  margin: 1em; 
}
.raz tbody,
.raz tr {
  padding: 1em; 
}
</style>

<table>
  <tbody>
    <tr>
      <td>Ячейка
      <td>Ячейка
    <tr>
      <td>Ячейка
      <td>Ячейка
</table>

Жирные внешние границы таблицы

Ячейка	Ячейка
Ячейка	Ячейка

<style>
.raz {
  border-collapse: collapse;
  border: 4px solid red;
}
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Таблица без границ аки сетка без внешней рамки

Ячейка	Ячейка
Ячейка	Ячейка

<style>
. raz {
  border-collapse: collapse;
  border-style: hidden;
}
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Свойство

border у tr

Заголовок	Заголовок
Ячейка	Ячейка
Ячейка	Ячейка

<style>
.raz {
  border-collapse: collapse;
}
.raz tr:first-child {
  border-bottom: 1px solid red;
}
.raz th+th,
.raz td+td {
  padding-left: 1em;  
}
</style>

<table>
  <tr>
    <th>Заголовок
    <th>Заголовок
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Свойство

padding у table при border-collapse: collapse;

Ячейка	Ячейка
Ячейка	Ячейка

<style>
. raz {
  border-collapse: collapse;
  outline: 1px solid red;  
  outline-offset: 2px;
  margin: 3px;  
}
.raz,
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Отступы внутри ячейки таблицы

Расстояние от содержимого до края ячейки определяет свойство padding.

Ячейка	Ячейка
Ячейка	Ячейка

<style>
.raz {
  border-collapse: collapse;
}
.raz td {
  border: 1px solid red;
  padding: .3em 1em;  
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Таблицы стилей CSS

❮ Назад
Далее ❯

Внешний вид HTML-таблицы можно значительно улучшить с помощью CSS:

Компания	Контакт	Страна
Альфред Футтеркисте	Мария Андерс	Германия
Берглундс снабжение	Кристина Берглунд	Швеция
Торговый центр Моктесума	Франсиско Чанг	Мексика
Эрнст Гендель	Роланд Мендель	Австрия
Островная торговля	Хелен Беннет	Великобритания
Кениглич Эссен	Филип Крамер	Германия
Винные погреба Смеющегося Вакха	Йоши Таннамури	Канада
Магазин Алиментари Риунити	Джованни Ровелли	Италия

Попробуйте сами »

Границы таблицы

Чтобы указать границы таблицы в CSS, используйте свойство border .

В приведенном ниже примере указывается сплошная рамка для элементов

Обратите внимание, что я использовал border-collapse: Collapse; против элемента таблицы . Это сворачивает границу, так что вы не видите никакого пространства между ячейками и внешней частью таблицы.

`Без разрушения границы`

Вот это без обрушения границы. Я также применил границу к элементу таблицы , чтобы продемонстрировать эффект:

<стиль> стол, т, тд { граница: 1px сплошной оранжевый; } й, тд { отступ: 10 пикселей; } <таблица>

Как видите, я также добавил отступы к селекторам th и td , но , а не к самой таблице. Если мы добавим отступ к таблице, мы получим дополнительный отступ между внешними ячейками и внешней частью таблицы.

Таким образом, мы получим это:

<стиль> стол, т, тд { граница: 1px сплошной оранжевый; отступ: 10 пикселей; } <таблица>

В этом нет ничего плохого, если ты этого хочешь. Однако, если вы не хотите, чтобы заполнение между таблицей и ее ячейками, вам нужно применить заполнение только к ячейкам.

`Нижняя граница`

В приведенных выше примерах для установки границ используется свойство CSS border . Это сокращенное свойство для установки ширины, стиля и цвета границы со всех сторон таблицы.

Если вы не хотите, чтобы граница проходила по всему столу (или если вы хотите, чтобы каждая сторона стола имела разные границы), вы можете использовать любое из следующих свойств: граница вверху , граница справа , граница внизу и граница слева .

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

<стиль> table.bottomBorder { граница коллапса: коллапс; } table.bottomBorder тд, table.bottomBorder й { нижняя граница: 1 пиксель сплошной желто-зеленый; отступ: 10 пикселей; выравнивание текста: по левому краю; } <таблица>

`Граница и чередующиеся цвета фона`

Обычно в таблицах используется чередующийся цвет фона каждой строки.

Вы можете применить границы к этим таблицам так же, как и к любой другой таблице:

<стиль> стол { граница коллапса: коллапс; } й, тд { граница: 1px сплошная #ccc; отступ: 10 пикселей; выравнивание текста: по левому краю; } tr: n-й ребенок (четный) { цвет фона: #eee; } tr: n-й ребенок (нечетный) { цвет фона: #fff; } <таблица>

`Нет границы в заголовках таблиц`

Также можно убрать границу с -го элемента .

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

Вот пример более позднего:

<стиль> стол { граница коллапса: коллапс; } тд { граница: 1px сплошная #ccc; } й, тд { отступ: 10 пикселей; выравнивание текста: по левому краю; } tr: n-й ребенок (четный) { цвет фона: #eee; } tr: n-й ребенок (нечетный) { цвет фона: #fff; } <таблица>

`Закругленные углы`

Вот пример добавления рамки с изогнутыми/закругленными углами к таблице.


This entry was posted in Популярное on May 27, 2023 by alexxlab.


Post navigation
← Заливка объекта в иллюстраторе: Простой способ раскрасить объект в Иллюстраторе. Подробный видео урок.
Sean archer фото: Станислав Пучковский (Sean Archer) – Рецепт успеха →


Categories

Uncategorized

Аксессуары

Видеокамеры

Мониторы

Ноутбуки

Объективы

Популярное

Принтеры

Смартфоны

Фотоаппараты

Имя	Фамилия
Питер	Гриффин
Лоис	Гриффин

Пример

table, th, td {
граница: 1px сплошная;
}

Попробуйте сами »

Таблица полной ширины

В некоторых случаях приведенная выше таблица может показаться маленькой. Если вам нужна таблица, которая должна занимать весь экран (во всю ширину), добавьте width: 100% к
Элемент

Имя	Фамилия
Питер	Гриффин
Лоис	Гриффин

Пример

таблица {
ширина: 100 %;
}

Попробуйте сами »

Двойные границы

Обратите внимание, что таблица в приведенных выше примерах имеет двойные границы. Это
потому что и таблица, и элементы

имеют отдельные границы.

Чтобы удалить двойные границы, взгляните на пример ниже.

Свернуть границы таблицы

Свойство border-collapse устанавливает границы таблицы
должны быть свернуты в одну границу:

Имя	Фамилия
Питер	Гриффин
Лоис	Гриффин

Пример

стол
{
граница-коллапс: коллапс;
}

Попробуйте сами »

Если вам нужна только рамка вокруг таблицы, укажите свойство border только для
<таблица>:

Имя	Фамилия
Питер	Гриффин
Лоис	Гриффин

Пример

стол
{
граница: сплошная 1 пиксель;
}

Попробуйте сами »

❮ Предыдущая
Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

902 32 лучших примера

Примеры HTML
Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.

Граница таблицы HTML

Эта страница содержит HTML-код границы таблицы — HTML-коды для указания или изменения границы ваших таблиц в вашем блоге или на веб-странице.

Границы таблицы HTML задаются с помощью каскадных таблиц стилей (CSS). Чтобы установить границу HTML-таблицы, используйте свойство CSS border .

Типовая рамка стола

Вот распространенный способ установить границы таблицы:

таблица {
граница коллапса: коллапс;
}
тд, й {
граница: 1px сплошной оранжевый;
}

Это обеспечивает эффект «сетки», когда граница окружает каждую ячейку, а также всю таблицу.

Вот так:

<стиль>
стол {
граница коллапса: коллапс;
}
й, тд {
граница: 1px сплошной оранжевый;
отступ: 10 пикселей;
выравнивание текста: по левому краю;
}

<таблица>