Атрибут valign тега <tfoot>
Описание
Атрибут valign в теге <tfoot> (устаревший в HTML5) определял вертикальное выравнивание содержимого ячеек в нижнем колонтитуле таблицы. В современных стандартах рекомендуется использовать CSS-свойства вместо этого атрибута.
<table border="1">
<tfoot valign="bottom">
<tr>
<td>Итоговая строка</td>
<td>100 руб.</td>
</tr>
</tfoot>
</table>
Значения атрибута (устаревшие):
| Значение | Описание |
|---|---|
top |
Выравнивание по верхнему краю |
middle |
Выравнивание по центру (по умолчанию) |
bottom |
Выравнивание по нижнему краю |
baseline |
Выравнивание по базовой линии |
Современная альтернатива с CSS:
<style>
.table-footer {
vertical-align: bottom;
}
/* Для всех ячеек в tfoot */
.custom-table tfoot td {
padding: 10px 0;
vertical-align: middle;
}
</style>
<table class="custom-table">
<tfoot class="table-footer">
<tr>
<td>Итоговая строка</td>
<td>100 руб.</td>
</tr>
</tfoot>
</table>
Рекомендации:
- Используйте CSS-свойство
vertical-alignвместо атрибута - Применяйте классы для гибкости стилизации
- Для сложных таблиц используйте CSS Flexbox или Grid
- Тестируйте отображение в разных браузерах
Пример с Flexbox:
<style>
.flex-table tfoot {
display: flex;
align-items: flex-end; /* Аналог valign="bottom" */
}
.flex-table tfoot td {
flex: 1;
padding: 15px;
}
</style>
<table class="flex-table">
<tfoot>
<tr>
<td>Итого</td>
<td>100 руб.</td>
</tr>
</tfoot>
</table>
Ограничения устаревшего атрибута:
- Удален из спецификации HTML5
- Ограниченная гибкость стилизации
- Не поддерживает современные методы верстки
- Может конфликтовать с CSS-стилями
Примечание: Для профессиональной верстки таблиц:
- Используйте CSS Grid для сложных табличных макетов
- Рассмотрите CSS-переменные для единообразия стилей
- Для динамических данных используйте JavaScript-фреймворки