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

Cellpadding и cellspacing в CSS

Время идёт, стандарты меняются и в HTML5 аттрибуты таблиц cellpadding и cellspacing стали устаревшими.

table cellpadding = «1» cellspacing = «10» > . / table >

Если DOCTYPE Вашего сайта выставлен в HTML5, то эта строка при валидации w3c выдаст такие ошибки:

The cellpadding attribute on the table element is obsolete. Use CSS instead.
The cellspacing attribute on the table element is obsolete. Use CSS instead.

Поэтому вместо этих аттрибутов следует использовать css-стили:

/* cellpadding */
td , th <
padding : 10px ;
>

/* cellspacing */
table <
border-spacing : 1px ;
border-collapse : separate ;
>

Переход на стили, кроме соответствия стандартам, несёт ряд других плюсов: использование сразу для всех таблиц на сайте, возможность использовать комплексное значение и т.д.

/* cellpadding */
td , th <
padding : 5px 10px ;
>

/* cellspacing */
table <
border-spacing : 1px 0 ;
border-collapse : separate ;
>

/* Если отступы между ячейками не нужны */
table .noSpacing <
border-collapse : collapse ;
>

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

БлогNot. Какими стилями заменить атрибуты тега table

Какими стилями заменить атрибуты тега table

Пожалуй, такая памятка может быть полезна, думаю, не у одного меня, прошедшего этап табличной вёрстки сайтов, рука так и тянется написать

или нечто подобное

Ниже приводится краткая справка по широко используемым стилям таблиц.

Выравнивание таблицы по центру окна

Если граница для таблицы не указана, она будет отображаться без границ. Граница задается с помощью свойства CSS border :

Если требуется свернуть границы в одну границу, добавьте свойство CSS border-collapse :

Добавление заполнения ячеек

Заполнение ячеек определяет пространство между содержимым ячейки и ее границами. Если заполнение не задано, ячейки таблицы будут отображаться без заполнения. Чтобы задать заполнение, используйте свойство CSS padding :

Добавление интервала между ячейками

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

Если таблица имеет свернутые границы, border-spacing не имеет эффекта. Заменяет cellspacing=»5″

Выравнивание заголовков и содержимого ячеек

По умолчанию заголовки таблиц являются полужирными и центрированными. Чтобы выровнять заголовки таблицы по левому краю, используйте свойство CSS text-align :

Для выравнивания содержимого ячеек примените подобный стиль к тегу td . Заменяет указание атрибутов align у ячеек.

Добавление набора цветов и фонов для ячеек

Создавайте CSS-классы со свойствами color и background-color , а затем применяйте их к ячейкам, например:

Заменяет атрибут bgcolor и подобное.

Установка ширины и высоты ячеек

Добавляйте соответствующие стилевые классы ячеек с указанием свойств width и height , например:

Cellpadding и Cellspacing с помощью CSS

Каждый HTML-верстальщик ежедневно сталкивается в своей работе с таблицами. Хочется делать их аккуратно, правильно, чтобы HTML-код был отделен от CSS. При объявлении таблицы мы в теге table часто указываем cellspacing и cellpadding, обозначая расстояние между ячейками и отступы в них. Это портит верстку, делает ее громоздкой и труднообслуживаемой. Поэтому возникает вопрос, а можно ли в HTML указать только тег table, перенеся все остальное в CSS?

Вот так выглядит код, о котором идет речь, без применения CSS:

Мы хотим сделать такой, убрав всё ненужное из HTML:

Абсолютно всё оформление таблицы должно лежать на плечах CSS, избавляя HTML-верстку от замусоривающих атрибутов. Аналог cellspacing и cellpadding легко сделать, применив к table и td следующие стили в CSS:

Привожу в качестве иллюстрации работающий пример:

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

Cellpadding и cellspacing в CSS

Постоянное использование cellpadding и cellspacing в table – прошлый век. О том, как убрать cellpadding и cellspacing в CSS.

Можно убирать промежутки между ячейками с помощью короткого CSS кода. Здесь мы будем использовать такой атрибут, как border-collapse . У этого атрибута есть три варианта значений, мы же выбираем значение collapse . Соответственно, это будет означать cellspacing=»0″ . C cellpadding все проще, достаточно для td прописать значение padding – 0. Для кого-то все это пустые слова, сам код вы можете видеть ниже.

Код CSS

200?’200px’:»+(this.scrollHeight+5)+’px’);»> table <
border: 0px; /* border=»0″ */
border-collapse: collapse; /* cellspacing=»0″ */
>

table td <
padding: 0px; /* cellpadding=»0″ */
>

Код HTML

200?’200px’:»+(this.scrollHeight+5)+’px’);»>

Первая ячейка

Вторая ячейка

HTML код, как вы видите, прост, и не нужно использовать длинные атрибуты, ведь наши cellpadding и cellspacing в CSS.

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

Стилевое свойство вместо атрибута cellspacing для тега

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

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

Необходимо запомнить, что border-spacing будет работать в селекторе table, если будет отсутствовать свойство border-collapse.

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

Если селектору table будет добавлено свойство border-collapse, в значении которого будет указано collapse, то значение border-spacing будет обнулено, а атрибут cellspacing игнорироваться.

cellspacing, cellpadding средствами css

Андрей Анатольич [досье] cellspacing так не делается. Для этого есть свойство border-spacing, но оно не всеми поддерживается.

Сергей (4ебурек) [досье] Если нужно всего лишь убрать межячеечный интервал, то можно сделать так: table < border-collapse: collapse; >. Это заставит бордюры таблиц перехлестываться, а когда их нет, то просто убирает любые пробелы.

Т.е., как я понял полноценной замены нет?
использование table < border-collapse: collapse; >не универсально в случае, если есть border,
а вот .pTable tr td , так это насколько я понимаю вообще из другой области:

по-моему это не взаимозаменяемо, или я ошибаюсь?

Атрибут cellspacing

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

Значения

Значением атрибута является любое неотрицательное число задающее размеры в пикселях.

Значение по умолчанию: 2.

Спецификацией HTML описывается еще процентный вариант указания расстояний, но он не поддерживается ни одним из популярных браузеров. Они либо игнорируют знак процента (%) и отображают расстояния в пикселях, либо вообще не понимают процентную запись.

Синтаксис

Обязательный атрибут: нет.

Пример HTML: применение атрибута cellspacing

Поддержка версиями HTML

Данный атрибут отсутствует в HTML 5, вместо него рекомендуется использовать стили (CSS).

Свойство в CSS заменяющее атрибут cellspacing

Свойство, заменяющее картинку при нажатии на неё
Нужно свойство типа :active, но проблема в том, что :active, после того, как перестаешь нажимать на.

заменить атрибут start на css в списках
Здравствуйте, Столкнулся с такой вот проблемой, валидатор не пропускает следующию конструкцию .

Почему CSS иногда приминяют через атрибут id?
Какая разница между «#left_column» и «.left_column»? Как лучше присваивать цсс через id или сlass?

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

Решение

Селекторы CSS: выбрать все