Пробел между двумя строками в таблице?

Чтобы добавить отступы к вашим элементам td, вам нужно использовать свойство padding. Вот пример, который должен помочь вам решить проблему. Вы также можете использовать верхний padding, вместо нижнего, чтобы достичь того же эффекта.

В приведенном ниже CSS-коде знак «больше» (>) означает, что отступы применяются только к элементам td, которые являются прямыми потомками элементов tr с классом spaceUnder. Это позволит вам использовать вложенные таблицы (например, ячейки C и D в примере кода). Я не уверен относительно поддержки селектора прямых потомков в старых браузерах (например, IE 6), но в современных браузерах код не должен ломаться.

/* Применяем отступы к элементам td, которые являются прямыми потомками элементов tr с классом spaceUnder. */

tr.spaceUnder > td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Это должно отобразиться примерно так:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

В родительском элементе table попробуйте установить следующие стили:

table {
  border-collapse: separate; 
  border-spacing: 5em;
}

Также добавьте объявление о границе, чтобы проверить, достигли ли вы желаемого эффекта. Однако имейте в виду, что Internet Explorer не поддерживает модель "раздельных границ".

Вы имеете таблицу с идентификатором albums, в которой содержатся некоторые данные (я опустил строки <tr> и ячейки <td>). Пример структуры таблицы:

<table id="albums" cellspacing="0">       
</table>

В CSS вы указали следующее:

table#albums 
{
    border-collapse: separate;
    border-spacing: 0 5px;
}

Таким образом, используя border-collapse: separate, вы активируете разделённые границы для вашей таблицы, что позволяет вам задавать расстояние между строками с помощью свойства border-spacing. В этом конкретном случае, задавая значение 0 5px, вы устанавливаете горизонтальное расстояние между границами ячеек в 0 пикселей и вертикальное расстояние в 5 пикселей.

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

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

<tr class="spacer"><td></td></tr>

Затем, я применил CSS для задания высоты и прозрачного фона для промежуточных строк:

.spacer {
    height: 20px; /* Укажите нужную высоту */
    background-color: transparent; /* Прозрачный фон */
}

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

Вы можете попробовать добавить строку-разделитель:

HTML:

<tr class="separator"></tr>

CSS:

table tr.separator { height: 10px; }

Обратите внимание, что в HTML-теге <tr> необходимо закрывающий тег, даже если он пустой.