border-spacing — расстояние между ячейками
Поддержка браузерами
| 12.0+ | 8.0+ | 1.0+ | 1.0+ | 4.0+ | 1.0+ |
Описание
CSS свойство border-spacing позволяет увеличивать или уменьшать расстояние между ячейками таблицы и общей рамкой таблицы.
По умолчанию браузеры обычно оставляют небольшое пустое пространство (2px) между смежными ячейками таблицы, и, чтобы увеличивать или уменьшать его, можно использовать свойство border-spacing. Значение этого свойства обычно задается в пикселях. Можно указать два значения, если нужно отдельно настроить горизонтальное и вертикальное расстояние.
Если для ячеек таблицы задана рамка, то в местах соприкосновения ячеек линия будет в 2 раза толще, чем по краям таблицы. Чтобы предотвратить это, следует воспользоваться CSS свойством border-collapse.
| Значение по умолчанию: | 2px |
|---|---|
| Применяется: | к table и inline-table элементам |
| Анимируется: | да |
| Наследуется: | да |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.borderSpacing=»15px» |
Синтаксис
border-spacing: расстояние|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| расстояние | Указывает расстояние между рамками смежных ячеек и общей рамкой таблицы в единицах измерения CSS.
|
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
| Ячейка таблицы | Ячейка таблицы |
| Ячейка таблицы | Ячейка таблицы |
table#myTable {
border-spacing: 0px;
}
Свойство border-spacing — расстояние между ячейками таблицы
Свойство border-spacing задает отступ между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы). Значением свойства служат любые единицы для размеров, кроме процентов.
Синтаксис
селектор {
border-spacing: одно или два значения;
}
Значения
| Значение | Описание |
|---|---|
| одно значение | Одно значения задает одинаковые отступы между ячейками по вертикали и по горизонтали. |
| два значения | Первое значение задает отступ по горизонтали, а второе значение — отступ по вертикали. |
Значение по умолчанию: 0. Однако, каждый браузер имеет свое, ненулевое значение атрибута cellspacing, поэтому по умолчанию вы увидите отступы между ячейками.
Замечания
Применяйте свойство для таблиц, а не для ее ячеек (для ячеек не будет работать).
Аналогичного эффекта нельзя добиться с помощью margin, так как margin для ячеек таблицы не работает.
Если задано свойство border-collapse в значении collapse — border-spacing работать не будет.
Пример . Одно значение
Давайте сделаем отступы между ячейками (и между ячейкой и границей таблицы) в 10px:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table> table {
border-spacing: 10px;
border-collapse: separate;
width: 400px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
:
Пример . Два значения
А теперь сделаем отступы в 10px по горизонтали и 30px по вертикали:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
table {
border-spacing: 10px 30px;
border-collapse: separate;
width: 400px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}:
Пример . Зададим border-collapse: collapse
А вот теперь border-spacing работать не будет из-за свойства border-collapse в значении collapse:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table> table {
border-collapse: collapse;
border-spacing: 10px 30px;
width: 400px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
:
Дизайн таблиц css. Расстояние между ячейками. Столбцы и их группировка
задаёт расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению атрибута cellspacing в пикселах. В вышеприведенном выше примере 2.3 этот эффект показан, поэтому повторять его не буду.Заметим, что это не совсем удобный способ создания границ, поскольку он имеет ограниченную область применения. Так можно получить только одноцветную сетку, а не вертикальные или горизонтальные линии в нужных местах.
Применение свойства border
Стилевое свойство border одновременно устанавливает цвет границы, её стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать производные — border-left , border-right , border-top и border-bottom , эти свойства соответственно определяют границу слева, справа, сверху и снизу.
Применяя свойство border к селектору TABLE , мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 2.6).
Пример 2.6. Добавление двойной рамки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Таблицы| Заголовок 1 | Заголовок 2 |
|---|---|
| Ячейка 3 | Ячейка 4 |
В данном примере используется двойная рамка черного цвета вокруг самой таблицы и сплошная рамка белого цвета вокруг каждой ячейки. Результат примера показан на рис. 2.7.
Рис. 2.7. Граница вокруг таблицы и ячеек
Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет действия атрибута cellspacing тега
Как устанавливать и изменять расстояние между ячейками в таблице
Как устанавливать и изменять расстояние между ячейками в таблице с помощью средств html и css
При оформлении сайта очень часто нужно создавать таблицы. С помощью таблиц можно упорядочить самые разные элементы: рисунки, ссылки, расположение блоков на сайте. Удобно использовать таблицу для публикации прайсов на продающих сайтах. Впрочем, продающие сайты, не единственных способ заработка, есть много других способов, как зарабатывать деньги в интернете и многие позволяют иметь постоянный и довольно приличный доход. Суть в том, что с таблицами при верстке сайтов приходится заниматься довольно часто и поэтому нужно знать, как изменять ее вид, чтобы таблица соответствовала дизайну сайта и страницы, на которой она вставлена.
При создании обычной HTML-таблицы можно заметить, что по умолчанию устанавливается определенное расстояние между ее ячейками. Для наглядности создадим обычную таблицу с 2-мя строками и 3-мя столбцами и раскрасим каждую ячейку в собственный цвет:
<table>
<tr>
<td bgcolor=»#00FF00″> 11111 </td>
<td bgcolor=»#0033CC»> 22222 </td>
<td bgcolor=»#FF3300″> 33333 </td>
</tr>
<tr>
<td bgcolor=»#FFFF00″> 44444 </td>
<td bgcolor=»#66FFFF»> 55555 </td>
<td bgcolor=»#CC33CC»> 66666 </td>
</tr>
</table>
Вот как это будет выглядеть в браузере:
| 11111 | 22222 | 33333 |
| 44444 | 55555 | 66666 |
Получилась таблица с двумя строками и тремя столбцами и с различным фоном ячеек.
Часто, для дизайна, расстояние между ячейками необходимо увеличить, уменьшить или вообще убрать. Делается это с помощью атрибута cellspacing, который записывается в тег <table>.
Примеры:
Пример использования атрибута cellspacing
cellspacing=0
| 11111 | 22222 | 33333 |
| 44444 | 55555 | 66666 |
cellspacing=10
| 11111 | 22222 | 33333 |
| 44444 | 55555 | 66666 |
Что получается, если значение cellspacing не задавать, уже было проиллюстрировано выше.
Аналогом атрибута cellspacing = «0» в CSS является table {border-collapse: collapse;}, а аналогом атрибута cellspacing со значением больше нуля является table {border-collapse: separate; border-spacing: 10px;}. 10рх поставлено просто для примера, это число пикселей, которому будет равен отступ между ячейками.
Теперь попробуем создать подобную таблицу, наполнением которой будет разрезанный на фрагменты рисунок. Фон, для наглядности зададим разным, а cellspacing выставим равным нулю:
<table cellspacing=»0″>
<tbody>
<tr>
<td bgcolor=»#00FF00″><img title=»ritsar1″ src=»http://seo-ask.net/wp-content/uploads/2012/07/ritsar1.jpg» alt=»» width=»150″ height=»82″ /></td>
<td bgcolor=»#0033CC»><img title=»ritsar3″ src=»http://seo-ask.net/wp-content/uploads/2012/07/ritsar3.jpg» alt=»» width=»150″ height=»82″ /></td>
</tr>
<tr>
<td bgcolor=»#FFFF00″><img title=»ritsar2″ src=»http://seo-ask.net/wp-content/uploads/2012/07/ritsar2.jpg» alt=»» width=»150″ height=»82″ /></td>
<td bgcolor=»#66FFFF»><img title=»ritsar4″ src=»http://seo-ask.net/wp-content/uploads/2012/07/ritsar4.jpg» alt=»» width=»150″ height=»82″ /></td>
</tr>
</tbody>
</table>
Получилась таблица с 2-мя строками и 2-мя столбцами, наполненная картинками
Однако, несмотря на то, что значение cellspacing задано равным 0 и между ячейками расстояния уже нет (все содержимое между картинками полностью заполнено фоном каждой ячейки), но все же рисунок не сплошной. Так происходит, из-за установленного по умолчанию отступа (расстояния) между границей ячейки и наполнением. Это отступление задается атрибутом cellpadding в теге <table>. Для того, чтобы в нашем примере картинка получилась сплошной, нужно просто установить данный атрибут равным нулю:
Вот так это записывается — <table cellspacing=»0″ cellpadding=»0″>
Аналогом атрибута cellpadding в CSS является table td {padding: 3px;}. 3px — здесь расстояние в 3 пикселя для примера, значение может быть любым, даже отрицательным.
Также различные версии некоторых браузеров (в том числе некоторые версии IE) могут самостоятельно установить какой-то из промежутков, даже при указанных cellspacing = «0» cellpadding = «0», или же могут сместить рисунок в ячейке в какую-нибудь сторону, например, ставя его не по центру, как мы указали, а вправо или влево и т.п. Часто в таких ситуациях помогает дополнительная установка размеров в каждой из ячеек по размерам картинки, которая в нее вставляется.
НОУ ИНТУИТ | Лекция | Оформление таблиц с помощью CSS
Аннотация: В лекции рассматриваются свойства CSS для управления основными параметрами таблицы.
Таблицы обеспечивают возможность расположения многомерных данных по строкам и столбцам. Структура и содержание таблицы описываются с помощью элементов HTML, а ее оформление задается с помощью правил CSS. Визуальное оформление таблиц состоит в задании правил отображения заголовков и ячеек таблицы, их выравнивания относительно друг друга, изображения рамок вокруг них и т.д. Далее будут рассмотрены основные приемы визуального оформления таблиц.
Для дальнейшего изложения будет использоваться следующая нестилизованная таблица, представленная на рисунке 15.1.
Рис. 15.1. Нестилизованная таблица
Ширина таблицы и ячеек
Для определения ширины таблицы и ячеек используется свойство width, в качестве значения которого принимаются любые единицы длины, принятые в CSS (пикселы, дюймы, пункты и др.) При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента, либо окна браузера. По умолчанию, браузер использует настройку TABLE {width: auto;}, что приводит к выводу таблицы во всю ширину окна браузера.
Следующие правила задают ширину таблицы в 100% доступной ширины, и ширину ячеек таблицы по 33% для каждой:
TABLE {width: 100%;}
TH, TD {width: 33%;}Браузеры неодинаково работают с шириной, кроме того, результат отображения зависит от используемого DOCTYPE. Так, в Internet Explorer при использовании переходного DOCTYPE или при его отсутствии, если содержимое превышает заданную ширину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width. В то время, как для строгого DOCTYPE ширина формируется путем сложения значений width, padding, margin и border. Если содержимое блока не помещается в заданные размеры, оно отображается поверх.
Выравнивание в таблице
Часто необходимо менять установленные по умолчанию настройки выравнивания текста в таблице. CSS позволяет задавать выравнивание текста в таблице по горизонтали и вертикали. Для этой цели служат свойства text-align и vertical-align. Два данных свойства подробно описаны в «Модель компоновки CSS» , поэтому ниже приведен лишь пример применения данных свойств к оформлению текста в ячейках таблицы:
TH, TD {
width: 33%;
text-align: left;
vertical-align: top;
}Отображение границ
Чтобы четко отделить содержимое одной ячейки от другой, к ним добавляются границы. За создание границ отвечает атрибут border элемента TABLE, который определяет толщину рамки. Однако, рамки, созданные с помощью данного атрибута, получаются разными по своему виду в каждом браузере. Чтобы этого избежать, рекомендуется пользоваться CSS-свойством border, применяя его к таблице или ее ячейкам (элементам TD или TH ).
Составное свойство border позволяет задать толщину, цвет и стиль границы всей таблицы и отдельных ее ячеек. Данное свойство и его производные подробно описаны в «Модель компоновки CSS» , поэтому ниже приведен лишь пример использования данных свойств для оформления таблиц:
TABLE {border: 1px solid #000;}
TH, TD {border-left: 1px dashed #000;}Поскольку границы создаются для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Самым простым способом устранения указанной особенности является применение свойства border-collapse, которое устанавливает, как именно отображать границы вокруг ячеек. Данное свойство имеет два значения: collapse и separate. Значение collapse заставляет браузер анализировать места соприкосновения ячеек в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка. При использовании значения separate, которое устанавливается по умолчанию, вокруг каждой ячейки отображается своя собственная рамка, а в местах соприкосновения ячеек показываются сразу две линии.
Различия между двумя значениями свойства border-collapse представлены на рисунке 15.2. Первая таблица соответствует границам удвоенной толщины и задается правилом
TABLE {
border: 1px solid #000;
border-collapse: separate;}Вторая таблица соответствует схлопнувшимся границам и задается правилом
TABLE {
border: 1px solid #000;
border-collapse: collapse;}Рис. 15.2. Результат применения различных значений свойства border-collapse
Когда задается схлопывание границ, необходимо помнить, что это может создавать проблемы, если к границам смежных ячеек были применены различные стили оформления. Схлопывание границ с различными стилями приводит к конфликтам, которые разрешаются согласно правилам разрешения конфликтов границ таблиц спецификации CSS2 (http://www.w3.org/TR/REC-CSS2/tables.html#border-conflict-resolution). Данные правила определяют, какие стили «выигрывают» при схлопывании границ.
Расстояние между ячейками
CSS позволяет также увеличивать расстояния между ячейками, используя свойство border-spacing. Данное свойство задает расстояние между границами ячеек в таблице и не действует в случае, когда для таблицы установлен параметр border-collapse со значением collapse. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.
Следующие правило позволяет установить расстояние между границами ячеек 150 пикселей по горизонтали и 20 пикселей по вертикали:
TABLE {
border-collapse: separate;
border-spacing: 150px 20px;}Браузер Internet Explorer до восьмой версии не обрабатывает свойство border-spacing, поэтому пользоваться данным свойством надо с осторожностью.
Заполнение
Для ячеек, которые имеют границу, можно добавить свободное пространство между границами ячеек и их содержимым. Для этого используется свойство padding.
Данное свойство рассмотрено в «Модель компоновки CSS» , поэтому ниже будет приведен пример применения данного свойства к оформлению ячеек:
TH, TD {
border: 1px solid #000;
border-collapse: collapse;
padding: 0.3em;
}Размещение заголовка таблицы
По умолчанию, заголовок таблицы размещается вверху таблицы. Однако в некоторых браузерах возможно переместить заголовок таблицы в другое место с помощью свойства caption-side. Значениями данного свойства являются top, bottom, left и right, размещающие заголовок вверху, внизу, слева или справа таблицы. В некоторых браузерах, как, например, Internet Explorer, доступны только два значения top и bottom. Следующее правило поместить заголовок таблицы под ней:
CAPTION {caption-side: bottom;}Аналогичного результата можно достичь, используя свойство
TABLE {caption-side: bottom;}Удалить расстояние между ячейками таблицы и строками (html, css, html-table, html-email, table)
42 Joe Mornin [2011-12-12 21:32:00]
Я разрабатываю шаблон электронной почты HTML, который заставляет меня использовать таблицы. В приведенном ниже коде у меня возникают проблемы (1) удаление интервала под изображением заполнителя и (2) удаление пробела между изображением и надписью. Вот скриншот о том, как он выглядит в Chrome 15 на OS X 10.6.8.:
<!DOCTYPE HTML>
<html>
<head>
<title>Email Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<h3>Major headline goes here</h3>
<table>
<tr><td><img src="placeholder.jpg" alt="Placeholder" /></td></tr>
<tr><td><p>Caption.</p></td></tr>
</table><!--/.main-story-image-->
<p>Lorem ipsum dolor sit amet.</p>
<p><a href="">Click here to read more </a></p>
<div></div>
</td><!--/#main-->
</tr>
</table>
</body>
</html>
Красные границы доступны только для отображения контуров ячеек. Я не хочу, чтобы они были там в финальной версии.
html css html-table html-email table
Каким стилевым свойством заменить атрибут cellspacing тега ?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Убрать атрибут cellspacing из таблицы и заменить его стилевым свойством.
Решение
Атрибут cellspacing задаёт расстояние между ячейками таблицы, оно особенно заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне страницы. Сочетание атрибутов cellpadding, cellspacing и border с разными значениями позволяет получить разнообразные виды таблиц. Но хочется не повторять для каждой таблицы одни и те же значения, а управлять ими через стили.
В качестве замены cellspacing выступает стилевое свойство border-spacing, оно устанавливает расстояние между границами ячеек. Если задать два значения, то первое определяет расстояние по горизонтали (т.е. слева и справа от ячейки), а второе — по вертикали (сверху и снизу).
Свойство border-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse (пример 1).
Пример 1. Расстояние между границами ячеек
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Замена cellspacing</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border: 1px solid #399; /* Граница вокруг таблицы */
border-spacing: 7px 5px; /* Расстояние между границ */
}
td {
background: #fc0; /* Цвет фона */
border: 1px solid #333; /* Граница вокруг ячеек */
padding: 5px; /* Поля в ячейках */
}
</style>
</head>
<body>
<table>
<tr><td>Леонардо</td><td>5</td><td>8</td></tr>
<tr><td>Рафаэль</td><td>4</td><td>11</td></tr>
<tr><td>Микеланджело</td><td>24</td><td>9</td></tr>
<tr><td>Донателло</td><td>2</td><td>13</td></tr>
</table>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Вид таблицы при использовании border-spacing
Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing, поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию. Обычно оно равно 2 пиксела.
При добавлении к селектору TABLE свойства border-collapse со значением collapse, атрибут cellspacing игнорируется, а значение border-spacing обнуляется.