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