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


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

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

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

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

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

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

Атрибут cellpadding

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

Значения

Размер отступов может задаваться двумя способами.

  • 1. Любое неотрицательное число задающее размеры в пикселях. Тогда для всех четырех сторон будут установлены одинаковые размеры отступов.
  • 2. Любое неотрицательное число задающее размеры в процентах, исходя из высоты и ширины ячеек равных 100%. В этом случае горизонтальные и вертикальные отступы могут быть разные и каждый из отступов получит половину от указанного размера. Например: мы задали cellpadding= «20%» . Тогда у нас будут отступы по 10% с каждой стороны исходя из размеров ячеек. Если у нас ячейки с шириной 100px и высотой 60px, то боковые отступы будут по 10px, а сверху и снизу по 6px.

В любом случае ни один из популярных браузеров не поддерживает процентные значения атрибута cellpadding . Они просто игнорируют знак процента (%) и считают значения в пикселях.

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

Синтаксис

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

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

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

Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Да Нет Да Да

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

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

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

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

Илон Маск рекомендует:  AnsiMidStr - Функция Delphi

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

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

Те, кто беспокоится о валидности своей вёрстки по HTML5, столкнулись с той проблемой, что в HTML5 убрали атрибуты cellpadding и cellspacing. Безусловно, имеется вариант указать cellpadding и cellspacing через CSS, о чём я сейчас и напишу.

Начнём с атрибута cellpadding, отвечающего за поля внутри ячеек. Думаю, что многие догадались, как им управлять. Давайте с Вами попробуем обнулить cellpadding через CSS:

Как видите, всё достаточно очевидно. А теперь перейдём к атрибуту cellspacing.

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

table <
border-collapse: collapse;
>

Данный код обнулит cellspacing, как правило, это и требуется. А если же нужно не обнулить, а изменить значения, то можно использовать border-spacing:

table <
border-spacing: 1px 2px 4px 5px;
>

Это отступы ячеек друг от друга сверху, справа, снизу и слева. То есть числа идут по часовой стрелке, аналогично, как и в свойствах margin и padding.

Вот так легко можно задавать атрибуты cellpadding и cellspacing на CSS.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Илон Маск рекомендует:  Парные теги

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 5 ):

    Может, побольше статей по PHP делать?

    Их и так побольше. Да и большинство статей берутся на основе вопросов и просьб у учеников.

    Спасибо, меня всегда напрягала необходимость обнулять cellpadding и cellspacing в html. Теперь для всего body в css пропишу body table

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

    название статьи «Атрибуты cellpadding и cellspacing на CSS», вопрос а где упомянается о cellpadding?

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    В HTML5, что касается таблиц, что заменяет cellpadding, cellspacing, valign и align?

    В Visual Studio я вижу следующие предупреждения:

    • Проверка (HTML 5): атрибут ‘cellpadding’ не является допустимым атрибутом элемента ‘table’.
    • Проверка (HTML 5): атрибут ‘cellspacing’ не является допустимым атрибутом элемента ‘table’.
    • Проверка (HTML 5): атрибут ‘valign’ не является допустимым атрибутом элемента ‘td’.
    • Проверка (HTML 5): атрибут ‘align’ не является допустимым атрибутом элемента ‘td’.

    Если они не являются допустимыми атрибутами в HTML5 , что заменит их в CSS?

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

    Группа: Active User
    Сообщений: 559
    Регистрация: 23.2.2013
    Поблагодарили: 20 раз
    Репутация: 1


    Здравствуйте. На дефолтном шаблоне dle всё отображается, а на моём нет. Собственно не работают вот эти атрибуты:

    Какие бы значения не вписывал изменения не наблюдаются. Сама таблица:

    Описание Описание. Описание. Описание. Описание. Описание.

    Подскажите куда смотреть?

    В стилях нашёл только это:

    Сообщение отредактировал stixia007 — 6.4.2015, 11:19

    Группа: Super Moderator
    Сообщений: 3812
    Регистрация: 30.6.2011
    Из: Железнодорожный (Балашиха)
    Поблагодарили: 3198 раз
    Репутация: 314

    Topic Starter

    Группа: Active User
    Сообщений: 559
    Регистрация: 23.2.2013
    Поблагодарили: 20 раз
    Репутация: 1

    Решил таким способом:

    Но блин как то это по деревенски

    Да я по не много разбираюсь. А понял, все атрибуты определить в css, а на смой странице использовать просто

    ?

    Или вы имели ввиду перевести всё в ?

    Группа: Super Moderator
    Сообщений: 3812
    Регистрация: 30.6.2011
    Из: Железнодорожный (Балашиха)
    Поблагодарили: 3198 раз
    Репутация: 314

    Что по деревенски, css для оформления использовать?
    А напрямую в тегах атрибутами — так сразу стиляга получается.
    border-collapse — свойство для таблицы, не ячейки. border-spacing — аналогично.

    а на смой странице использовать просто

    ?

    table.tab <
    border-collapse: collapse;
    border-spacing: 0;
    >

    table.tab td <
    padding:2px;
    >

    фигень1 фигень2
    Topic Starter

    Группа: Active User
    Сообщений: 559
    Регистрация: 23.2.2013
    Поблагодарили: 20 раз
    Репутация: 1

    x64, спасибо, понял, буду исправлять

    Вот что получилось, нужно было ещё задать цвет рамки:

    table td, th <
    border-collapse: collapse;
    border-spacing: 0;
    border-color: #9b9b9b; /* Цвет границы */
    border-style: solid; /* Стиль границы */
    border-width: 1px;
    >

    table.tab <
    border-collapse: collapse;
    border-spacing: 0;
    >

    table.tab td, th <
    padding: 2px;
    vertical-align: middle;
    >

    Заголовок (в теге стронг) Описание.

    Какой то массивный css получился, всё ли правильно?

    Замечание модератора:
    Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
    Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

    или обратитесь к любому из модераторов.

    Сообщение отредактировал stixia007 — 6.4.2015, 14:36

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

    примеров

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

    Month Savings
    January $100

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

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

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

    HTML5 не поддерживает атрибут CELLPADDING. Вместо этого используйте CSS.

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

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

    Совет: С практической точки зрения, то лучше не указано CELLPADDING, но использование CSS , чтобы добавить отступы (дополнение) .

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

    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, вы указываете приоритет стилю.

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