Как задать cellpadding и cellspacing с помощью CSS?

Вы можете использовать следующий CSS-код для стилизации таблиц, аналогично атрибутам cellspacing и cellpadding в HTML:

table {
    border-collapse: collapse; /* Эквивалент 'cellspacing' */
}

table td, table th {
    padding: 0; /* Эквивалент 'cellpadding' */
}

Здесь свойство border-collapse: collapse; убирает промежутки между ячейками таблицы, а padding: 0; устанавливает внутренний отступ в ячейках (как для содержимого размеров ячеек). Это поможет вам добиться желаемого визуального эффекта без использования устаревших атрибутов.

Установка отступов для ячеек таблицы, насколько я знаю, действительно не оказывает никакого эффекта. Настоящим CSS-эквивалентом cellspacing является border-spacing, но он не работает в Internet Explorer.

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

Простое решение этой проблемы выглядит следующим образом:

table {
    border: 1px solid #000000; /* Устанавливаем границу таблицы */
    border-collapse: collapse; /* Объединяем границы ячеек */
    border-spacing: 0px; /* Убираем отступы между ячейками */
}
table td {
    padding: 8px 8px; /* Устанавливаем внутренние отступы для ячеек */
}

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

Также, если вы хотите использовать cellspacing="0", не забудьте добавить border-collapse: collapse в стили вашего <table>.

Чтобы добиться нужного эффекта, оберните содержимое ячейки в div. Однако следует обернуть каждую ячейку в колонке, чтобы получить однородный внешний вид. Например, чтобы просто увеличить левый и правый отступы, используйте следующий CSS:

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

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

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">Мое содержимое</div>
    </td>
  </tr>
</table>

Да, это хлопотно. Да, это работает с Internet Explorer. На самом деле, я протестировал это только в Internet Explorer, потому что именно его нам разрешили использовать на работе.