Атрибут cellspacing тега <table>
Описание
Атрибут cellspacing для тега <table> является устаревшим в HTML5 и определяет расстояние между ячейками таблицы. В современных стандартах рекомендуется использовать CSS-свойство border-spacing.
Важно: Атрибут cellspacing считается устаревшим (deprecated) и его использование не рекомендуется в новых проектах.
Историческое использование:
<table cellspacing="10" border="1">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>
Современная CSS-альтернатива:
| CSS-свойство | Пример | Примечание |
|---|---|---|
border-spacing |
table { border-spacing: 10px; } |
Аналог cellspacing |
border-collapse |
table { border-collapse: collapse; } |
Убирает промежутки между ячейками |
Пример правильного оформления:
<style>
.spaced-table {
border-spacing: 8px; /* Аналог cellspacing */
margin-bottom: 20px;
}
.spaced-table td {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 8px;
}
.collapsed-table {
border-collapse: collapse; /* Убирает промежутки */
width: 100%;
}
.collapsed-table td {
border: 1px solid #dee2e6;
padding: 8px;
}
</style>
<table class="spaced-table">
<tr>
<td>Ячейка с промежутком</td>
<td>Ячейка с промежутком</td>
</tr>
</table>
<table class="collapsed-table">
<tr>
<td>Ячейка без промежутков</td>
<td>Ячейка без промежутков</td>
</tr>
</table>
Рекомендации:
- Используйте
border-collapse: collapseдля большинства таблиц border-spacingпринимает одно значение (для всех сторон) или два (горизонталь и вертикаль)- Для адаптивного дизайна регулируйте spacing через медиазапросы
- Комбинируйте с padding ячеек для оптимальных отступов
Ограничения устаревшего подхода:
- Невозможность задать разные расстояния по горизонтали и вертикали
- Ограниченный контроль в сложных табличных структурах
- Не работает с некоторыми современными CSS-свойствами
- Плохая поддержка в адаптивном дизайне
Примечание: Для создания сложных табличных макетов с разными расстояниями между группами ячеек используйте комбинацию border-spacing и дополнительных margin/padding.