Атрибут cellspacing в HTML

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 ;
>

Table cellspacing Attribute

Cellspacing

The Cellspacing attribute places space, in pixels, around each cell in the table.

The above code will Set the space between the cells to 5 pixels .

HTML Source Code :

In the above HTML code we set cell-spacing as 15. That means each adjacent table cells create 15 pixels space to another. For display purpose set the table background Color as Red and Cell background Color as White. So you can see the cell spacing in red color.

If you want no spaces at all, you should set Cellspacing=»0″, otherwise the default is Cellspacing=»1″ will set, even if you don’t mention Cellspacing. The below picture is the same HTML code with default Cellsapcing, that is no Cellspacing is set or Cellspacing=»1″ .

The cellspacing is applied both vertically and horizontally. The cell spacing is uniform for the entire table. Individual cell spacing between each row or column cannot be specified.

The Cellspacing attribute is similar to the cellpadding attribute, which control the spacing between the contents of a Cell and the Cell’s border.

Задание cellpadding и cellspacing в CSS как в тегах таблицы

Для начала, Вы можете контролировать cellspacing через применение CSS-свойства border-spacing к Вашей таблице. Это сработает в большинстве популярных браузеров, кроме IE 7-й версии и ниже. Для браузеров, которые поддерживают это свойство, оно даже позволяет задать горизонтальный и вертикальный промежуток. Если Вам нужна поддержка Internet Explorer 5, 6, или 7 версии — тогда Вам, коротко говоря, не повезло.

Я сказал «коротко говоря», потому что эти браузеры поддерживают свойство border-collapse , которое полностью разрушает рамки между смежными ячейками в таблице. Задание этого свойства даёт тот же эффект, что и cellspacing:0 (между ячейками таблицы не будет никаких промежутков). При таком подходе не будет вытесняться установленный в HTML атрибут cellspacing на элемент таблицы.

Илон Маск рекомендует:  Псевдокласс last-of-type в CSS

Короче: для браузеров, кроме IE 5-7, Вы задаёте border-spacing . Для IE, в ситуации, когда Вы хотите установить cellspacing в 0 и в Вашей таблице это не определено заранее, вы можете использовать border-collapse:collapse .

HTML атрибут таблицы CELLSPACING

примеров

Промежуток ячейка таблицы 10 пикселей:

Month Savings
January $100

Поддержка браузеров

Все основные браузеры поддерживают атрибут CELLSPACING.

Определение и использование

HTML5 не поддерживает атрибут CELLSPACING.

CELLSPACING атрибут определяет пространство между элементами в пикселях.

Примечание: Не используйте этот атрибут CELLPADDING атрибут спутать, CELLPADDING атрибут указывает , что пространство между краем и ячейки содержимого ячейки.

HTML\CSS → Атрибуты cellpadding и cellspacing таблицы

По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно. Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse . Значение collapse убирает внутренние рамки ячеек.

Отступы внутри ячеек таблицы можно добавлять с помощью атрибута cellpadding тега table, но лучше использовать CSS свойство padding для ячейки td таблицы.

Помимо внутренних отступов существует возможность задавать отступы между ячейками таблицы. Однако, эту возможность почти не используют. Отступы между ячейками таблицы можно задавать с помощью атрибута cellspacing тега table.

Но атрибут не работает с border-collapse: collapse , необходимо задать предварительно border-collapse:separate .

Для задания отступов лучше использовать следующие CSS-свойства:

Атрибут cellspacing в HTML

Sharing is caring!

Controlling the Space Between Table Cells

The cellspacing attribute was used to control the amount of space between cells of a table. This attribute has been deprecated, and if you want to add space between table cells you can do so with CSS. The cellspacing attribute, which was used to add space between table data cells, should not be confused with the cellpadding attribute, which was used to add space between the contents of a data cell and the edge of the cell. If you want to add space between table cells with CSS, you can do so with the border-spacing property.

Here’s how that bit of code looks rendered in the browser.

Стилизация таблиц с помощью CSS

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

HTML-таблица состоит из ячеек, строк и столбцов, у нее может быть заголовок, подпись, шапка, тело и футер. Через CSS ее можно стилизовать, используя в качестве селекторов как внутренние теги таблицы, так и собственные классы и идентификаторы.

Для придания таблицам красивого внешнего вида можно использовать многие CSS-свойства, с которыми вы уже хорошо знакомы: padding , border , width , height , color , display и прочие.

Давайте вспомним стандартный стиль HTML-таблицы:

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

Как видите, все свойства нам уже знакомы. К самому тегу

мы применили атрибут cellspacing со значением 0 , который убрал пробелы между ячейками. Но того же эффекта можно добиться и без атрибута, используя только CSS. Таким же образом можно заменять и другие табличные атрибуты. Об этом мы и поговорим далее.

Замена атрибутов таблиц на стили CSS

Как вы знаете, в HTML существуют специальные атрибуты для настройки базового стиля таблиц: cellpadding , cellspacing , border , bordercolor и другие. Но намного удобнее настраивать внешний вид элементов через CSS. Мы расскажем, какие свойства являются аналогами табличных атрибутов.

Атрибут align

С помощью этого атрибута можно выровнять всю таблицу относительно края окна браузера, выбрав одно из трех значений — left , center либо right . Обратите внимание, атрибут выравнивает не текст, а сам блок таблицы. Аналогом CSS в данном случае является комбинация свойств:

Также таблицу можно выровнять, задав ее родительскому элементу свойство text-align с соответствующим значением. Но это сработает только при условии, что для таблицы установлено свойство display со значением inline либо inline-block .

Атрибут background

Данный атрибут позволяет задать фоновое изображение для всей таблицы, указав его URL-адрес в качестве значения. Контролировать поведение такого фона нет возможности, в отличие от аналога CSS — свойства background-image и других свойств для настройки фона.

Атрибут bgcolor

Устанавливает цвет фона для всей таблицы. Вы наверняка уже догадались, каким CSS-свойством можно успешно заменить атрибут bgcolor :

Атрибуты border, bordercolor и frame

Атрибуты таблицы border , bordercolor и frame задают толщину рамки, ее цвет и расположение соответственно. Рекомендуем забыть о них и пользоваться CSS-свойством border (и его производными), которое объединяет эти атрибуты и дает даже больше.

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

Атрибут rules

Атрибут, который определяет, где отображать границы (вокруг ячеек, между колонками, между строками и т. д.), опять-таки можно заменить CSS-свойством border , применяя его к соответствующим тегам таблицы.

Атрибут cellpadding

Устанавливать отступы между внутренними сторонами ячейки и ее содержимым можно не только через атрибут, но и с помощью CSS-свойства padding , примененного к тегу

.

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

Атрибут cellspacing

Этот атрибут устанавливает расстояние между самими ячейками таблицы. В качестве аналога существует CSS-свойство border-spacing , при помощи которого тоже можно создать промежутки между ячейками. Кроме того, это свойство может принимать два значения одновременно (разделяются пробелом): одно для промежутков по горизонтали, второе — по вертикали.

Атрибуты width и height

Разумеется, эти атрибуты можно легко заменить на CSS width и height :

Завершение

Как вы уже знаете, в современной веб-разработке принято отделять структуру документа от его визуального оформления. Именно поэтому рекомендуется использовать CSS и не обращаться к HTML-атрибутам, которые предназначены для изменения внешнего вида. Это обеспечивает более удобную разработку, редактирование и дальнейшую поддержку стилей на сайте.

Далее в учебнике: CSS-стили для форм.

Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this:

How can the same be accomplished using CSS?

26 Answers 26

Basics

For controlling «cellpadding» in CSS, you can simply use padding on table cells. E.g. for 10px of «cellpadding»:

For «cellspacing», you can apply the border-spacing CSS property to your table. E.g. for 10px of «cellspacing»:

This property will even allow separate horizontal and vertical spacing, something you couldn’t do with old-school «cellspacing».

Issues in IE border-collapse property, which merges the borders of adjoining table cells. If you’re trying to eliminate cellspacing (that is, cellspacing=»0″ ) then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn’t have it defined already), you can use border-collapse:collapse .

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

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

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

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

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

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

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

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

CSS Cellspacing

HTML used to have a cellspacing attribute for defining the space between cells on a table, but it has been phased out (as of HTML version 5).

And there never was a «CSS cellspacing» property.

But, although there isn’t a «CSS cellspacing» property, there is a property that may be just what you’re looking for.

CSS border-spacing Property

The CSS border-spacing property is kind of a CSS equivalent to the HTML cellspacing attribute of the element. You can use this in conjunction with the CSS padding property to provide spacing and padding within your table cells.

The example table below has border-spacing applied to the table. Also, the table has a solid black border, while each cell within the table has a dotted orange border. These borders highlight the effect of the border-spacing property.

Note that, although the CSS padding property can be applied to any element, the border-spacing property only applies to tables and inline tables. Also, whereas the padding property can be applied against any side of an element, the border-spacing is applied to all sides of an element.

Check out CSS Cellpadding to see how to create padding within each table cell. Now that we’ve got the CSS border-spacing and padding properties, we’ll never need to use HTML cellspacing and cellpadding again!

Илон Маск рекомендует:  Что такое код call_user_method
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL