Table html cellspacing: Атрибут cellspacing | htmlbook.ru

Leave a Comment / Html / By /

HTML/Атрибут cellspacing (Элемент table)

Синтаксис

(X)HTML

<table cellspacing="[значение]"> ... </table>

Описание

Атрибут / параметр cellspacing (от англ. «cell spacing» ‒ «расстояние между ячейками») устанавливает величину отступа от границ ячеек до границ соседних элементов (других ячеек или границы таблицы).

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2.0—
3. 2Tables
4.0111.3.3 Cell margins
cellspacing = length [CN]…
DTD: Transitional Strict Frameset
5.04.9.1 The table element
5.14.9.1. The table element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Значения

В качестве значения указывается длина отступа. Допустимы следующие значения длины:

<число>
Если в качестве значения указывается только число, то длина отступа рассчитывается в пикселях.
<процент>%
Если в качестве значения указывается число с «%» ЗНАКОМ ПРОЦЕНТА [U+0025], то длина отступа рассчитывается в процентах на основе доступного вертикального и горизонтального пространства.

Пример использования

Листинг кода

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Параметр cellspacing (Элемент table)</title>
</head>
<body>
<h2>Пример использования атрибута «cellspacing»</h2>
<h3>Таблица умножения на 3</h3>

<table border=»1″ cellspacing=»5″>
<tbody>
<tr> <td>1</td> <td>*3</td> <td>=</td> <td>3</td> </tr>
<tr> <td>2</td> <td>*3</td> <td>=</td> <td>6</td> </tr>
<tr> <td>3</td> <td>*3</td> <td>=</td> <td>9</td> </tr>
<tr> <td>4</td> <td>*3</td> <td>=</td> <td>12</td> </tr>
<tr> <td>5</td> <td>*3</td> <td>=</td> <td>15</td> </tr>
<tr> <td>6</td> <td>*3</td> <td>=</td> <td>18</td> </tr>
<tr> <td>7</td> <td>*3</td> <td>=</td> <td>21</td> </tr>
<tr> <td>8</td> <td>*3</td> <td>=</td> <td>24</td> </tr>
<tr> <td>9</td> <td>*3</td> <td>=</td> <td>27</td> </tr>
<tr> <td>10</td> <td>*3</td> <td>=</td> <td>30</td> </tr>
</tbody>
</table>
</body>
</html>

Параметр cellspacing (Элемент table)

Как применить к HTML-таблице только интервалы между ячейками по горизонтали?

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

  • html
  • html-таблица
1

Лучше, чем установка Cellspacing="10" , использовать CSS. Вы можете использовать следующий CSS, чтобы настроить интервал между ячейками таблицы.

 таблица {
  расстояние между границами: 10 пикселей 0;
}

Первое значение указывает интервал по горизонтали, а второе значение — интервал по вертикали.

4

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

Здесь я поместил некоторые пустые данные таблицы в первую строку и задал им ширину (в пикселях). Я сделал соответствующие пустые данные таблицы в последовательных строках. Это кажется настоящим олдскул , но он простой и работает.

 <таблица>
  
        некоторый контент для столбца 1
        <тд />
        другое содержимое для 2-го видимого столбца (фактически столбца 3)
        <тд />
        содержимое для 3-го видимого столбца (фактически столбец 5)
    
    
        
        <тд />
        
        <тд />
4

Если вам просто нужно разделить содержимое ячейки на , используйте интервалы внутри ячеек (и установите Cellspacing=0 в HTML). Это повсеместно поддерживается браузерами с поддержкой CSS.

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

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

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

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Table Cellpadding and Cellspacing with CSS

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

Это можно сделать следующим образом:

   
 Язык кода: HTML, XML (xml) 
 
 Хотя эти функции все еще работают по соображениям обратной совместимости и часто используются в электронной почте HTML, атрибуты  cellpadding  и  cellpacing  теперь устарели.
 Чтобы правильно выполнить отступы и интервалы между ячейками с помощью CSS, вы можете сделать следующее:
   table {
  граница коллапса: коллапс;
  интервал между границами: 0;
}

тд {
  заполнение: 0;
}
  
  Кодовый язык: CSS (css)  
 В этом случае атрибут  Cellspacing  заменяется свойствами  border-collapse  и  border-spacing , определенными в родительском элементе 


    
 9001 4 элемент. Свойство  cellpadding  заменяется свойством  padding  в элементе 
  
 . В большинстве случаев некоторые отступы в ячейках таблицы имеют смысл, поэтому это значение, скорее всего, не будет установлено равным нулю.
 Вы можете увидеть это в следующем интерактивном CodePen:
 Если вы хотите включить некоторое расстояние между ячейками, то вы должны установить  border-collapse  в его значение по умолчанию и добавить ненулевое значение к  border-spacing  .
   таблица {
  граница-коллапс: раздельная; /* Вы можете исключить эту строку, это значение по умолчанию */
  интервал между границами: 14px;
}

тд {
  отступ: 20 пикселей;
}
  
  Кодовый язык: CSS (css)  
 Это может быть полезно, если вам нужны «поля» для ячеек таблицы, поскольку свойство  margin  не работает с ячейками таблицы.
 
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *