ZODIOS.net

cellpading и cellspacing через CSS

09.28.2008  –  Рубрика: HTML&CSS

Есть несколько атрибутов таблицы, которые начинающим верстальщикам, кажутся незаменимыми при использовании CSS. К таким атрибутам относится cellspacing, cellpadding.Умные верстальщики cellpadding, cellspacing не используют. Для того, чтоб понять какими атрибутами CSS их можно заменить нужно, разобраться в том, что они делают.

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

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td>Содержимое ячейки</td>
  </tr>
</table>

Нужно прописать стиль таблице:

#tableId {
   border:0;
   padding:0;
   border-collapse:collapse;
}
#tableId td {
   padding:0;
}

В коде выше видно параметр border-collapse. Одно из свойств таблицы состоит в том, что параметр border, в виде атрибута тега, задает рамку не только внешней части таблицы, но и всем ячейкам. Таким образом, две ячейки подряд находятся на интервале равном двойной ширине рамки (рамка одной ячейки и потом рамка другой ячейки), чтоб этого избежать применяется этот параметр. Он указывает на то, что рамки боковых ячеек сливаются в одну рамку, таким образом, избавляются от двойного отступа. Это нехитрое свойство часто является причиной возникновение непонятных отступов в таблице при обнулении всех параметров таблицы.

Нюансом также является то, что параметр Cellspacing задает отступы между ячейками, то есть если задать ячейке border и использовать этот параметр, то между ними появится отступ равный величине этого параметра. Для того что добиться этого эффекта необходимо к таблице (НЕ ячейке) применить css параметр border-spacing:10px;, который к сожалению не кроссбраузерный, как обычно подвел Internet Explorer.

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

Tags: CSS, HTML