Атрибут cols тега <frameset>
Описание
Атрибут cols определяет количество и размер вертикальных колонок (фреймов) в элементе <frameset>. Это устаревший атрибут, который использовался для создания макетов на основе фреймов.
<frameset cols="25%,50%,25%">
<frame src="left.html">
<frame src="center.html">
<frame src="right.html">
</frameset>
Форматы значений:
| Формат | Пример | Описание |
|---|---|---|
| Проценты | cols="30%,70%" |
Относительные размеры |
| Пиксели | cols="200,*" |
Фиксированная ширина |
| Звездочка | cols="150,*,2*" |
Пропорциональное распределение |
Современные альтернативы:
<!-- Использование CSS Grid -->
<div class="grid-layout">
<aside>Левая панель</aside>
<main>Основной контент</main>
<aside>Правая панель</aside>
</div>
<style>
.grid-layout {
display: grid;
grid-template-columns: 25% 50% 25%;
height: 100vh;
}
</style>
<!-- Использование Flexbox -->
<div class="flex-layout">
<div class="sidebar">25%</div>
<div class="content">50%</div>
<div class="sidebar">25%</div>
</div>
<style>
.flex-layout {
display: flex;
height: 100vh;
}
.sidebar { flex: 1; }
.content { flex: 2; }
</style>
Проблемы фреймсетов:
- Не поддерживаются в HTML5
- Плохая доступность для скринридеров
- Ограниченная гибкость макета
- Проблемы с печатью и SEO
- Не адаптируются для мобильных устройств
Рекомендации по переходу:
- Замените
<frameset>на CSS Grid или Flexbox - Используйте семантические HTML5-элементы
- Для динамического контента применяйте AJAX и современные фреймворки
- Реализуйте адаптивный дизайн с медиазапросами
- Используйте компонентный подход (React, Vue, Angular)
Примечание: Хотя атрибут cols был основным способом создания колоночных макетов в эпоху HTML4, современные CSS-технологии предоставляют гораздо более мощные и гибкие средства для построения адаптивных интерфейсов.