Заменить атрибут cellspacing тега - «Таблицы» » Новости мира Интернет
Provuu представила горнолыжные очки, которые помогают видеть скрытые препятствия - «Новости мира Интернет»
Provuu представила горнолыжные очки, которые помогают видеть скрытые препятствия - «Новости мира Интернет»
Исследование: 78% российских компаний наблюдают экономический эффект от внедрения ИИ - «Новости мира Интернет»
Исследование: 78% российских компаний наблюдают экономический эффект от внедрения ИИ - «Новости мира Интернет»
Engadget назвали лучшие технологические новинки и тренды 2025 года - «Новости мира Интернет»
Engadget назвали лучшие технологические новинки и тренды 2025 года - «Новости мира Интернет»
Pebble выпустила умное кольцо Index 01 для записи голосовых заметок - «Новости мира Интернет»
Pebble выпустила умное кольцо Index 01 для записи голосовых заметок - «Новости мира Интернет»
ChatGPT научился редактировать фото и PDF с помощью встроенных приложений Adobe - «Новости мира Интернет»
ChatGPT научился редактировать фото и PDF с помощью встроенных приложений Adobe - «Новости мира Интернет»
Wuque Studio выпустила коллекционную клавиатуру Nama весом 8,6 кг с часовым механизмом - «Новости мира Интернет»
Wuque Studio выпустила коллекционную клавиатуру Nama весом 8,6 кг с часовым механизмом - «Новости мира Интернет»
В приложении Telegram добавили авторизацию по ключам доступа - «Новости мира Интернет»
В приложении Telegram добавили авторизацию по ключам доступа - «Новости мира Интернет»
Apple назвала лучшие приложения и игры 2025 года в App Store - «Новости мира Интернет»
Apple назвала лучшие приложения и игры 2025 года в App Store - «Новости мира Интернет»
Яндекс представил AI Search – технологию веб-поиска для корпоративных ИИ-агентов - «Новости мира Интернет»
Яндекс представил AI Search – технологию веб-поиска для корпоративных ИИ-агентов - «Новости мира Интернет»
В Android тестируют Call Reason – функцию для маркировки срочных звонков - «Новости мира Интернет»
В Android тестируют Call Reason – функцию для маркировки срочных звонков - «Новости мира Интернет»
Новости мира Интернет » Самоучитель 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 обнуляется.

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

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 обнуляется.

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

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



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