• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Установить cellpadding и cellspacing на CSS (Сочетание атрибутов cellpadding, cellspacing с разным знаком)
Установить cellpadding и cellspacing на CSS
Kosten
Дата: Воскресенье, 2019-04-07, 23:22 | Сообщение 1
Администраторы
Сообщений:20795
Награды: 56


Заполнение ячейки используется для определения пробелов между ячейками и их границей. Если свойство заполнения ячеек не применяется, оно будет установлено в качестве значения по умолчанию. Где интервал используется для определения пространства между ячейками. Использование cellpadding и cellspacing очень распространено в HTML. Однако, прежде чем мы начнем с проблемы, давайте определимся с этими терминами.

Cellpadding и cellspacing - это атрибуты таблицы, которые дают клеткам пространства для дыхания. Cellspacing обрабатывает пространство между двумя ячейками таблицы.



HTML

Код
<table style="width:70%">
        <tr>
            <th>Скрипты</th>
            <th>Шаблоны</th>  
            <th>Дизайн</th>
        </tr>
        <tr>
            <td>Стили</td>
            <td>Стиль</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>Коды</td>
            <td>Кофеa</td>
            <td>Номер</td>
        </tr>
        <tr>
            <td>Числа</td>
            <td>Канада</td>
            <td>Страна</td>
        </tr>
        </table>


CSS

Код
    table, th, td {
                border: 2px solid green;
                text-align:center;
            }
            th, td {
                padding: 20px;
                background-color:none;
            }
              
            h1 {
            color:green;
            }

Демонстрация

Атрибуты cellpadding и cellspacing

Довольно просто установить cellpadding и cellsetting таблицы в HTML, но есть некоторые недостатки с опцией HTML, как объяснено ниже. Другой вариант это установить cellpadding и cellsetting, определив свойства в CSS во многом совпадают с HTML-версией.

HTML-код будет выглядеть так:

Код
<table cellspacing="1" cellpadding="1">


Cellpadding CSS

Альтернатива CSS для cellpadding будет:

Код
td {
padding: 10px;
}


Это применяет 10-пиксельное заполнение к ячейке.

Cellspacing CSS

Для пространства ячеек код CSS будет:

Код
table {
border-spacing: 10px;
}


Это применяет интервал 10 пикселей к ячейкам в таблице. Помните, что значение по умолчанию для cellpadding равно 0 (padding: 0px) и то же самое относится к пространству ячеек (border-collapse: collapse). Устанавливая пространство ячеек, свойство border-collapse теперь устанавливается для разделения, а не для свертывания.

Почему CSS лучше?

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

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

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

Пример 1

Мы хотим установить cellpadding на 8 пикселей, а spacespacing равным нулю.

Код
table {border-collapse: collapse;}
td    {padding: 6px;}


Пример 2

Мы хотим установить для ячейки 4 пикселя, а для ячейки - ноль.

Код
table {border-spacing: 4px;}
td    {padding: 0px;}


Пример 3

Мы хотим установить для ячейки 4 пикселя, а для ячейки 2 пикселя.

Код
table {border-spacing: 4px;}
td    {padding: 2px;}


Пример 4

Мы хотим установить различное горизонтальное и вертикальное пространство ячеек между ячейками в таблице. Горизонтальное пространство ячеек в 4 пикселя, где вертикальное пространство ячеек в 6 пикселей, а отступы идут на 8 пикселей.

Код
table {
border-spacing: 6px 4px;
border-collapse: separate;
}
td    {
padding: 8px;
}


Потенциальные проблемы

Вышеупомянутый CSS должен работать в большинстве популярных браузеров, но могут быть некоторые проблемы с Internet Explorer и особенно ниже версии 7. В этих браузерах также есть проблемы с настройкой свойств в HTML, таких как cellspacing: 0, так что border-collapse: collapse использоваться без сотового пространства.

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

Одним из способов обойти это является граничное свертывание: свертывание кода после определения пространства ячеек в CSS. Чтобы гарантировать, что пространство ячеек не будет переопределено, добавьте border-collapse: отделить перед определением свойств пространства ячеек.
Прикрепления: 1837498.png(14.3 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Установить cellpadding и cellspacing на CSS (Сочетание атрибутов cellpadding, cellspacing с разным знаком)
  • Страница 1 из 1
  • 1
Поиск: