Здравствуйте. Таблица как элемент имеет свои особенности, которые сильно отличают ее от более привычных многим блоков. Сегодня я хотел бы рассказать о том, как прописывается в css расстояние между ячейками таблицы.
Отличия с блочной моделью
Чтобы задавать расстояние между блоками обычно используют внешние отступы, но в случае с ячейками это не работает. Внутренние отступы ячейкам можно прописать, а вот внешние – нет.
Это вроде бы и небольшая беда, только вот по умолчанию ячейки в таблице расположены не впритык друг к другу, а с небольшими отступами, которые не всегда нужны. Как их убрать?
Свойство border-spacing
На помощь приходит свойство, которое в css применяется специально для табличных данных – border-spacing. Как можно понять из названия, оно определяет свободное пространство (отступы) от каждой ячейки.
Важный момент: задавать border-spacing нужно всей таблице. То есть вот так:
Table{
Border-spacing: 0;
}
Этим правилом мы убираем расстояние между ячейками и теперь они плотно прижаты друг к другу. Соответственно, в пикселах вы можете задать это расстояние, если это будет необходимо.
Возможно, немного необычно, что свойство задается для селектора table, но это такая особенность таблицы, просто нужно запомнить ее. Свойство не будет работать, если для таблицы также задать border-collapse: collapse. В таком случае у ячеек автоматически убираются внешние отступы, и необходимости в border-spacing нет никакой.
Устаревший способ задать внешние отступы ячейкам
Раньше для этого к тегу <table> добавляли атрибут cellspacing, который и определял отступ, но сегодня такой способ не рекомендуется использовать. Это засоряет код и не соответствует современным стандартам веб-разработки.
Дело в том, что отступы относятся к внешнему виду элемента, а html совершенно не годится для этого дела. Стандартами определенно, что за это должен отвечать в основном css.
Как видите, в css расстояние между ячейками таблицы можно вообще убрать, а можно и управлять им с помощью свойства border-spacing. На сегодня это все. Если вам интересна тема сайтостроения, подписывайтесь, чтобы быть в курсе новых материалов на сайте.