Атрибут frame тега <table>
Описание
Атрибут frame для тега <table> является устаревшим в HTML5 и определяет, какие внешние границы таблицы должны отображаться. В современных стандартах рекомендуется использовать CSS-свойства для управления границами.
Важно: Атрибут frame считается устаревшим (deprecated) и его использование не рекомендуется в новых проектах.
Исторические значения атрибута frame:
| Значение | Описание |
|---|---|
void |
Нет внешних границ |
above |
Только верхняя граница |
below |
Только нижняя граница |
hsides |
Только верхняя и нижняя границы |
vsides |
Только левая и правая границы |
lhs |
Только левая граница |
rhs |
Только правая граница |
box |
Все четыре границы |
border |
Все четыре границы (аналогично box) |
Современные CSS-альтернативы:
| CSS-свойство | Пример | Описание |
|---|---|---|
border |
table { border: 1px solid #000; } |
Полная граница |
border-topborder-bottom |
table { border-top: 1px solid #000; border-bottom: 1px solid #000; } |
Аналог hsides |
border-leftborder-right |
table { border-left: 1px solid #000; border-right: 1px solid #000; } |
Аналог vsides |
border-style |
table { border-style: none; } |
Аналог void |
Пример правильного оформления:
<style>
.modern-table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
/* Аналог frame="hsides" */
.horizontal-borders {
border-top: 2px solid #333;
border-bottom: 2px solid #333;
}
/* Аналог frame="vsides" */
.vertical-borders {
border-left: 2px solid #333;
border-right: 2px solid #333;
}
</style>
<table class="modern-table horizontal-borders">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Данные</td>
<td>Данные</td>
</tr>
</table>
Рекомендации:
- Используйте
border-collapse: collapseдля согласованного отображения границ - Для сложных схем границ создавайте CSS-классы
- Разделяйте стили границ таблицы и ячеек
- Используйте семантические имена классов (например, "horizontal-borders")
Ограничения устаревшего подхода:
- Ограниченный контроль над стилем границ
- Невозможность задать разные цвета или стили для разных границ
- Плохая поддержка в адаптивном дизайне
- Конфликты с современными CSS-стилями
Примечание: Для создания сложных схем границ таблицы используйте комбинацию CSS-свойств border и псевдоклассов для точного контроля над отображением.