мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство border-spacing

Свойство border-spacing задает отступ между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы). Значением свойства служат любые единицы для размеров, кроме процентов.

Синтаксис

селектор { border-spacing: одно или два значения; }

Значения

Значение Описание
одно значение Одно значения задает одинаковые отступы между ячейками по вертикали и по горизонтали.
два значения Первое значение задает отступ по горизонтали, а второе значение - отступ по вертикали.

Значение по умолчанию: 0. Однако, каждый браузер имеет свое, ненулевое значение атрибута cellspacing, поэтому по умолчанию вы увидите отступы между ячейками.

Замечания

Применяйте свойство для таблиц, а не для ее ячеек (для ячеек не будет работать).

Аналогичного эффекта нельзя добиться с помощью margin, так как margin для ячеек таблицы не работает.

Если задано свойство border-collapse в значении collapse - border-spacing работать не будет.

Пример . Одно значение

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

<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> table { border-spacing: 10px; border-collapse: separate; width: 400px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }

:

Пример . Два значения

А теперь сделаем отступы в 10px по горизонтали и 30px по вертикали:

<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> table { border-spacing: 10px 30px; border-collapse: separate; width: 400px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }

:

Пример . Зададим border-collapse: collapse

А вот теперь border-spacing работать не будет из-за свойства border-collapse в значении collapse:

<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> table { border-collapse: collapse; border-spacing: 10px 30px; width: 400px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }

: