Учимся применять cellpadding и cellspacing в CSS

2021-10-13 0 ∞ 1

В HTML атрибуты cellpadding и cellspacing можно установить следующим образом:

<table cellspacing="1" cellpadding="1">

Если нужно полностью убрать расстояние между ячейками (установить cellspacing="0"), не забудьте задать свойство border-collapse: collapse. Но как реализовать cellspacing в CSS?

Рабочий CSS-эквивалент cellspacing – это border-spacing, но при этом он не работает в браузере Internet Explorer. Можно установить border-collapse: collapse, что также приведет к нулевым промежуткам между ячейками. Но единственным полностью кроссбраузерным решением остается применение атрибута cellspacing:

table
{
    border-collapse: collapse; /* эквивалент 'cellspacing' */
}

table td, table th
{
    padding: 0; /* эквивалент 'cellpadding' */
}

Также можно просто использовать cellpadding="0" cellspacing="0", так как эти атрибуты еще не считаются устаревшими.

Основы
- Проблемы с IE ниже 7 версии

Основы

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

td { 
    padding: 10px;
}

Что касается эквивалентов CSS table cellspacing, то можно использовать свойство border-spacing, примененное к таблице. Например:

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

Данное свойство также позволит получить горизонтальные и вертикальные промежутки. То есть, реализовать то, что невозможно при помощи атрибута cellspacing.

Проблемы с IE ниже 7 версии

Эти методы будут работать практически во всех современных браузерах, за исключением Internet Explorer 7. Все они поддерживают свойство border-collapse, которое объединяет границы смежных ячеек в таблице. Если попробовать убрать промежутки между ячейками (cellspacing="0"), то у border-collapse:collapse будет тот же эффект: отсутствие расстояния между ячейками. Стоит обратить внимание, что поддерживается этот вариант «криво», так как существующий HTML-атрибут cellspacing в CSS не переписывается.

Если вы не работаете с Internet Explorer 5-7, используйте border-spacing. Если же вам не повезло, то используйте cellspacing:0 или border-collapse:collapse:

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Если же вам не нужно нулевое значение cellspacing, то попробуйте то, что сработало у меня. Но имейте в виду, что этот вариант был протестирован только в Firefox:

table {
    border-collapse: separate;
    border-spacing: 2px;
}

Этот хак cellpadding cellspacing CSS работает в IE 6 и выше, Google Chrome, Firefox и Opera:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

Объявление * предназначено для Internet Explorer 6 и 7, а также всех остальных браузеров, которые могут проигнорировать это свойство. expression('separate', cellSpacing = '10px') возвращает значение 'separate', но выполняются оба состояния, так как в JavaScript можно передать больше аргументов, и все они будут использованы.

У этой проблемы есть простое решение:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Установки по умолчанию

Стандартное поведение браузера эквивалентно следующему:

table {border-collapse: collapse;}
td    {padding: 0px;}

<h4>Cellpadding</h4>

Позволяет задать расстояние между содержимым ячеек:

table {border-collapse: collapse;}
td    {padding: 6px;}

Cellspacing

cellspacing CSS отвечает за расстояние между самими ячейками:

table {border-spacing: 2px;}
td    {padding: 0px;}

Комбинация свойств

table {border-spacing: 2px;}
td    {padding: 0px;}

Комбинация свойств (дополнительно)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Примечание: если установлен атрибут border-spacing, то это указывает на то, что border collapse CSS имеет значение separate.

Можете попробовать в действии!

Оберните содержимое ячейки в div, и сможете сделать что угодно, но тогда придется оборачивать каждую ячейку в колонке. Например, чтобы получить более широкие левое и правое поля, нужно использовать следующий CSS-код:

div.cellwidener {
  margin:0px 15px 0px 15px;
}
td.tight {
  padding:0px;
}

А также следующий HTML-код:

<table border="0">
  <tr>
     <td class="tight"><div class="cellwidener">My content</div></td>
  </tr>
</table>

Здесь можно опробовать код в действии.

Этот подход работает в IE! На самом деле, я и тестировал его только в Internet Explorer. Из W3C-спецификации я понял, что тег <table> предназначался исключительно для отображения контента.

Гораздо проще создать <div> с нужными фонами, а затем поверх этого элемента позиционировать таблицы с использованием position: absolute и background: transparent. Данный метод работает в Chrome, IE (6 и выше), а также Mozilla (2 и выше).

Отступы (margin) предназначены для создания промежутков между контейнерными элементами <table>, <div>, <form>, а не для <tr>, <td>, <span> или <input>. Применение их для чего-то другого потребует много времени на подготовку сайта ко всем последующим обновлениям браузеров.

После border-collapse я использовал атрибут !important, чтобы получилось border-collapse: collapse !important. В IE 7 этот вариант отлично работал. Он переписывал исходный атрибут cellspacing.

Попробуйте следующий метод реализации CSS table cellspacing:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Или немного по-другому:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

Для таблиц можно использовать border-collapse: collapse, а для th или td - указать padding:

table th,td {
         padding: 8px 2px;
           }
     table {
         border-collapse: separate;
         border-spacing: 2px;
          }

CSS:

selector{
    padding:0 0 10px 0; // Верхняя, левая, нижняя, правая 
}

Для содержимого таблицы можно применять CSS-отступы:

td { 
    padding: 20px;
}

А для границ:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

Это может вызвать проблемы в старых версиях Internet Explorer из-за различий в реализации блочной модели.

Ниже приведен код для сброса всех стилей cellpadding cellspacing CSS. Он находится у меня в файле reset.css:

table{
    border:0;          /* Замена границ */
    border-spacing: 0px; /* Замена cellspacing */
    border-collapse: collapse; /* Патч для Internet Explorer 6 и Internet Explorer 7 */
}
table td{
    padding: 0px;/* Замена cellpadding*/
}

Cellpadding используется для создания промежутков между содержимым ячеек и их границами:

td
{
    padding: 10px;
}

Атрибут cellspacing создает пространство вокруг каждой ячейки в таблице. Чтобы добиться эффекта cellspacing в CSS, используйте свойство border-spacing:

table,th,td
{
    border:2px solid green;
    border-spacing: 10px;
}

Если свойство margin не сработало, попробуйте установить свойство display у элемента tr на block, и тогда оно точно заработает.

Стили добавляются в разметку таблиц только для того, чтобы не использовать CSS. Это может вызвать сложности, если на странице много таблиц:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

В HTML5 свойства cellspacing и cellpadding для таблиц считаются устаревшими. Теперь, чтобы получить эффект cellspacing, нужно использовать border-spacing, а cellpadding компенсировать border-collapse.

И всегда старайтесь задавать значения cellpadding cellspacing CSS в стилевом файле:

<table >
  <th>Col 1</th>
    <th>Col 2</th>
      <th>Col 3</th>
  <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  </tr>
</table>

cellpadding можно реализовать с помощью отступов в CSS, в то время как cellspacing можно компенсировать свойством border-spacing, примененным к таблице:

table{
  border-spacing:10px;
}
td{
  padding:10px;
}

Посмотреть пример.

table{border-spacing:4px; color: #000; background:#ccc; } td{padding-left:4px;}

В HTML-таблице cellpadding cellspacing CSS можно установить следующим образом: чтобы получить промежутки между контентом ячеек, используйте отступы для td/th:

/******Call-Padding**********/

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}
	<table>
		<tr>
			<th>Head1 </th>
			<th>Head2 </th>
			<th>Head3 </th>
			<th>Head4 </th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>
table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

Для получения cellspacing CSS используйте свойство border-spacing для table:

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}
	<table>
		<tr>
			<th>Head1</th>
			<th>Head2</th>
			<th>Head3</th>
			<th>Head4</th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>
/********* Cell-Spacing   ********/

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}