Атрибут cellpadding тега <table>
Описание
Атрибут cellpadding для тега <table> является устаревшим в HTML5 и определяет расстояние между содержимым ячейки и её границами. В современных стандартах рекомендуется использовать CSS-свойство padding.
Важно: Атрибут cellpadding считается устаревшим (deprecated) и его использование не рекомендуется в новых проектах.
Историческое использование:
<table cellpadding="10" border="1">
<tr>
<td>Ячейка с отступами</td>
<td>Ещё ячейка</td>
</tr>
</table>
Современная CSS-альтернатива:
| CSS-свойство | Пример | Преимущества |
|---|---|---|
padding |
td { padding: 10px; } |
Гибкое управление отступами |
border-spacing |
table { border-spacing: 10px; } |
Контроль расстояния между ячейками |
Пример правильного оформления:
<style>
.modern-table {
border-collapse: collapse;
width: 100%;
}
.modern-table td,
.modern-table th {
padding: 12px 15px;
border: 1px solid #ddd;
}
.modern-table th {
padding-top: 15px;
padding-bottom: 15px;
}
</style>
<table class="modern-table">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Данные с отступами</td>
<td>Данные с отступами</td>
</tr>
</table>
Рекомендации:
- Используйте разные значения padding для заголовков и данных
- Задавайте горизонтальные и вертикальные отступы отдельно
- Для адаптивных таблиц уменьшайте padding на мобильных устройствах
- Комбинируйте с line-height для лучшей читаемости
Ограничения устаревшего подхода:
- Невозможность задать разные отступы для разных сторон
- Отсутствие контроля над отступами заголовков отдельно от данных
- Нет поддержки адаптивных изменений
- Ограниченная гибкость стилизации
Примечание: Для сложных таблиц с разными требованиями к отступам используйте CSS-классы для разных типов ячеек.