Каким стилевым атрибутом заменить параметр cellspacing тега TABLE?

🕛 22.01.2009, 23:45

Параметр cellspacing задает расстояние между ячейками таблицы, оно особенно заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне страницы. Сочетание параметров cellpadding, cellspacing и border с разными значениями позволяет получить разнообразные виды таблиц. Но хочется не повторять для каждой таблицы одни и те же значения, а управлять ими через стили.

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

Атрибут border-spacing действует только в том случае, если для селектора TABLE не задан атрибут border-collapse со значением collapse (пример 1).

Пример 1. Расстояние между границами ячеек

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Замена cellspacing</title> <style type="text/css"> 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>

Браузер Internet Explorer до седьмой версии включительно не поддерживает атрибут border-spacing, поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию. Обычно оно равно 2 пиксела.

При добавлении к селектору TABLE атрибута border-collapse со значением collapse, параметр cellspacing игнорируется, а значение border-spacing обнуляется.