Создание HTML-макета без таблиц: совместимость, стилизация

Быстрый ответ

Вместо применения таблиц при создании макетов рекомендуется употреблять CSS Flexbox для линейного расположения элементов или CSS Grid для реализации более сложных композиций. Пример создания двухколоночного адаптивного макета с применением Flexbox:

<style>
.flex-container {
  display: flex; /* Активация flex-контейнера */
} 
.flex-item {
  flex: 1; /* Элементы равномерно займут доступное пространство в контейнере */
}
</style>
<div class="flex-container">
  <div class="flex-item" style="background: lightblue;">Левая колонка</div>
  <div class="flex-item" style="background: lightgreen;">Правая колонка</div>
</div>

В данном случае каждый элемент .flex-item равномерно заполняет доступное пространство в .flex-container, что исключает необходимость в применении таблиц.

Альтернативы табличным макетам

Ранее таблицы были основным средством дизайна сайтов, но сегодня CSS предоставляет больше возможностей. Применения отступов, полей и точного позиционирования элементов позволяют создавать аттрактивные и адаптивные макеты, не прибегая к использованию таблиц.

Гибкость с помощью Flexbox и Grid

CSS Flexbox идеально подходит для создания одномерных компоновок элементов. Он наиболее эффективен при расположении элементов в строку или колонку и особенно удобен при работе с колонками одинаковой ширины.

CSS Grid станет отличным выбором для создания более сложных двумерных макетов. Этот инструмент позволяет управлять как строками, так и столбцами, делая создание сложных композиций проще.

Подробнее об этом расскажет наш спикер на видео

Помощь со стороны CSS-свойств

Пользуйтесь свойством overflow: hidden для отмены действия свойства float и удержания элементов внутри родительского блока. Свойство clear: both пригодится для размещения элементов, расположенных после обтекаемых объектов.

При создании макетов без фиксированных размеров можно использовать inline-block. Этот метод позволяет удобно выравнивать столбцы по вертикали. Сочетание абсолютного позиционирования с отрицательными полями способствует более точному размещению элементов.

Совместимость с браузерами и доступность

Если в вашу задачу входит поддерживать работу сайта в старых версиях браузеров, то Twitter Bootstrap предложит готовые классы для обеспечения обратной совместимости.

Для улучшения доступности веб-страницы применяйте роли WAI-ARIA к элементам, недостаточно семантичным. Регулярно следите за рекомендациями по использованию роли презентации WAI-ARIA, чтобы соответствовать последним стандартам.

Решения для старого доброго Internet Explorer

Если вам приходится сталкиваться с проблемами совместимости в Internet Explorer, то помогут hasLayout и display: inline-block. Однако при необходимости поддержки особенно старых версий IE, таких как IE5, иногда все же приходится возвращаться к табличной верстке – но за это должны быть весомые причины.

Визуализация

Подумайте о каждом HTML-элементе как о части сетки:

🟩🟦🟧
🟨🟩🟦
🟧🟨🟩

Когда вы используете CSS Flexbox или Grid:

🟩(Flexbox-контейнер) 🔄 организует 🟦🟧🟨 (Потомки) в любом порядке
🟦🟩(Grid-контейнер) 🏗️ создает 🟧🟨🟩 (Ячейки) в строго спланированной компоновке

Flexbox подходит для надежного одномерного распределения. Grid предназначен для сложных двумерных расположений. Оба инструмента позволяют создать динамичные макеты без использования таблиц.

Создание вертикального центрирования

До некоторого времени вертикальное центрирование контента без применения таблиц представляло собой сложную задачу.

Имитация табличных макетов с помощью CSS

Свойство display: table-cell имитирует поведение табличных ячеек, что позволяет достичь вертикального выравнивания без использования таблиц, при этом сохраняя чистоту исходного кода.

Современные методы центрирования

В современном CSS для центрирования по вертикали и горизонтали обычно применяют свойства align-items: center в Flexbox и place-items: center в Grid.

Технические рекомендации

При создании макетов особое внимание следует уделять отступам и ширине элементов. Используйте точные значения в процентах или flex-basis, а также медиа-запросы, чтобы элементы адаптировались и корректно перестраивались на различных устройствах.

Не менее важно задавать промежутки между обертками элементов, чтобы предотвратить нежелательные изменения макета, что может негативно сказаться на пользовательском опыте.

Не забывайте проводить тестирование верстки в различных браузерах для обнаружения и устранения возможных проблем, и подготовки необходимых корректировок для конкретного браузера.

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks — углубитесь в особенности компоновки гибкого контейнера, используемой в современном веб-дизайне.
2. Грид-макет в CSS — CSS | MDN — научитесь использовать производительность CSS Grid для создания сложных макетов.
3. Адаптивный веб-дизайн: медиа-запросы — освойте применение медиа-запросов для создания адаптивного дизайна.
4. Табличные макеты против макетов на флексе и гриде: сравнительный анализ — Smashing Magazine — изучите преимущества и недостатки перехода от использования таблиц к более современным методам верстки.
5. Блочное форматирование в CSS — CSS | MDN — познакомьтесь с основами визуального форматирования в CSS.
6. Flexbox Froggy – игра для обучения CSS флексбокс — изучите специфику работы flexbox с помощью интерактивной и занимательной игры.
7. Спецификация многостолбцового макета CSS — ознакомьтесь со спецификацией модуля многостолбчатых макетов в CSS.