Заменить атрибут cellspacing тега - «Таблицы» » Новости мира Интернет
Новая консоль Xbox Project Helix объединит игры для ПК и приставки - «Новости мира Интернет»
Новая консоль Xbox Project Helix объединит игры для ПК и приставки - «Новости мира Интернет»
Microsoft добавила в PowerPoint функцию для редактирования изображений - «Новости мира Интернет»
Microsoft добавила в PowerPoint функцию для редактирования изображений - «Новости мира Интернет»
Яндекс Браузер добавил чат с нейросетью на все страницы - «Новости мира Интернет»
Яндекс Браузер добавил чат с нейросетью на все страницы - «Новости мира Интернет»
Главные обновления в Яндекс Рекламе - «Новости мира Интернет»
Главные обновления в Яндекс Рекламе - «Новости мира Интернет»
GAMR создали игровой коврик, который может заменить контроллер в играх - «Новости мира Интернет»
GAMR создали игровой коврик, который может заменить контроллер в играх - «Новости мира Интернет»
Уязвимость в чипах MediaTek позволяет взломать Android-смартфон за 45 секунд даже не включая его - «Новости сети»
Уязвимость в чипах MediaTek позволяет взломать Android-смартфон за 45 секунд даже не включая его - «Новости сети»
Xbox Project Helix получит ИИ-генератор кадров и рейтрейсинг нового поколения — девкиты выйдут в 2027 году - «Новости сети»
Xbox Project Helix получит ИИ-генератор кадров и рейтрейсинг нового поколения — девкиты выйдут в 2027 году - «Новости сети»
Intel представила мечту анонимов — чип Heracles для работы с зашифрованными данными без дешифровки - «Новости сети»
Intel представила мечту анонимов — чип Heracles для работы с зашифрованными данными без дешифровки - «Новости сети»
Google завершила крупнейшее поглощение в своей истории: Wiz войдёт в состав Google Cloud - «Новости сети»
Google завершила крупнейшее поглощение в своей истории: Wiz войдёт в состав Google Cloud - «Новости сети»
Телевизоры Hisense начали показывать неотключаемую рекламу даже при переключении входов и каналов - «Новости сети»
Телевизоры Hisense начали показывать неотключаемую рекламу даже при переключении входов и каналов - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Таблицы » Заменить атрибут cellspacing тега - «Таблицы»
Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Убрать атрибут cellspacing из таблицы и заменить его стилевым свойством.

Решение

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

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Замена cellspacing</title>
  <style>
   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>

Результат данного примера показан на рис..;1.

Рис. 1. Вид таблицы при использовании border-spacing

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

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


Internet Explorer Chrome Opera Safari Firefox Android iOS 8.0 1.0 4.0 1.0 1.0 1.0 1.0 Задача Убрать атрибут cellspacing из таблицы и заменить его стилевым свойством. Решение Атрибут cellspacing задаёт расстояние между ячейками таблицы, оно особенно заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне страницы. Сочетание атрибутов cellpadding, cellspacing и border с разными значениями позволяет получить разнообразные виды таблиц. Но хочется не повторять для каждой таблицы одни и те же значения, а управлять ими через стили. В качестве замены cellspacing выступает стилевое свойство border-spacing, оно устанавливает расстояние между границами ячеек. Если задать два значения, то первое определяет расстояние по горизонтали (т.е. слева и справа от ячейки), а второе.;— по вертикали (сверху и снизу). Свойство border-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse (пример.;1). Пример 1. Расстояние между границами ячеек HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис;1. Рис. 1. Вид таблицы при использовании border-spacing Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing, поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию. Обычно оно равно 2 пиксела. При добавлении к селектору TABLE свойства border-collapse со значением collapse, атрибут cellspacing игнорируется, а значение border-spacing обнуляется.

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Смотрите также

А что там на главной? )))



Комментарии )))