Необходимо ли добавлять cellspacing = "0" cellpadding = "0" в <table>? - PullRequest
19 голосов
/ 16 января 2010

Эрик Мейер: сброс css предполагает, что «таблицам все еще нужно« cellspacing = «0» »в разметке». Это необходимо? и в чем выгода border-collapse: collapse; и border-spacing: 0;?

и он предлагает только использование cellspacing, в то время как таблица имеет другое свойство, называемое cellpadding?

/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: collapse;
        border-spacing: 0;
}

Ответы [ 3 ]

11 голосов
/ 16 января 2010

cellpadding не предлагается, поскольку свойство padding css в достаточной степени переопределяет свойства по умолчанию для атрибута таблицы cellpadding. Как говорится в другом ответе, в старых браузерах нет совместимого свойства CSS для cellspacing, поэтому атрибут HTML в качестве единственного способа полностью «сбросить» этот параметр на 0. border-spacing: 0; позаботится об этом для браузеров, которые поддерживают это.

Что касается border-collapse & mdash; по умолчанию каждая ячейка таблицы имеет свою собственную границу, и collapse объединит границы между смежными ячейками, создавая видимость (обычно однопиксельной) сетки, чего невозможно достичь другим способом, когда cellspacing="0". До того, как border-collapse получал широкую поддержку, именно поэтому вы могли видеть таблицы с cellspacing="1" и цветом фона на столе, и белым фоном на ячейках таблицы.

border-collapse:collapse; находится в файле reset.css просто потому, что это наиболее распространенный желаемый результат. Если вам не нужен этот режим, вы можете удалить его из файла reset.css.

6 голосов
/ 16 января 2010

Internet Explorer 6 и 7, а также, возможно, другие ранние браузеры, не распознают атрибут border-spacing, поэтому он предлагает вам также указывать значения в HTML.

Проверьте таблицу совместимости на SitePoint

2 голосов
/ 16 января 2010

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

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

Не существует стиля CSS для границы таблицы между ячейками до CSS 2, поэтому его необходимо отключить с помощью атрибута HTML cellspacing="0" в таблице для поддержки старых браузеров, таких как IE 7 *. Если между ячейками есть границы таблиц, свертывание границ, естественно, не будет работать, поскольку границы не находятся рядом друг с другом.

* Мне очень понравилось ощущение, что IE 7 - это «старый браузер»;)

...