Если вы застали верстку сайтов в начале 2010-х, вы помните это чувство. Чувство, когда ты три часа пытаешься выровнять три колонки по центру, а они упорно едут влево. Когда ты используешь clearfix и молишься, чтобы флоаты не развалили подвал. А потом приходит Flexbox, и мир переворачивается. Следом — Grid, и ты понимаешь: обратной дороги нет. Сегодня я расскажу, почему я больше никогда не вернусь к табличной верстке, как Flexbox и Grid реально упрощают жизнь и почему «таблицы умерли» — это не громкая фраза, а суровая правда, которую вы поймете на примерах.
Эпоха таблиц: как мы выживали до 2015 года
Давайте честно: таблицы (<table>) изначально создавались для данных. Для прайсов, расписаний, бухгалтерских отчетов. Но в 2000-е, когда CSS был слабым, а браузеры — капризными, таблицы стали палочкой-выручалочкой. Мы пихали в <td> все: меню, шапку, контент, даже футер. И это работало! Но какой ценой.
Помню свой первый серьезный проект — интернет-магазин на таблицах. Код был похож на матрешку: одна таблица внутри другой, внутри третьей. Чтобы изменить ширину колонки, нужно было править 10 мест. Адаптивность? Ее не было. Мы просто делали второй сайт для мобильных, потому что переверстать таблицу под экран 320px было невозможно без хирургического вмешательства.
«Таблицы — это костыль, который мы носили 15 лет, пока не выросли настоящие ноги» — шутят фронтендеры в курилке. И это чистая правда.
Проблема таблиц не только в громоздком коде. Они нарушают семантику: скринридеры читают таблицу как таблицу, а не как структуру страницы. Плюс производительность: браузер рисует таблицу только после того, как загрузит все ее содержимое. Для больших страниц это катастрофа. И да, выравнивание по вертикали в таблицах — это отдельный вид боли. Vertical-align: middle работал только внутри ячейки, а если нужно было прижать блок к низу — начинался ад.
Flexbox: гибкость, о которой мы мечтали
Flexbox появился в спецификации CSS3 и стал настоящим прорывом. Его главная фишка — распределение пространства внутри контейнера. Вы просто говорите родителю display: flex, и его дети автоматически выстраиваются в ряд. Никаких флоатов, никаких обнулений, никаких танцев с бубном.
Я никогда не забуду момент, когда впервые использовал justify-content: space-between. У меня было три блока, и они волшебным образом встали по краям и центру, а расстояние между ними рассчиталось само. Это было похоже на магию. Flexbox решает 80% задач типовой верстки:
- Центрирование по вертикали и горизонтали (наконец-то align-items: center работает как часы).
- Управление порядком элементов через order — можно переставить блоки местами без изменения HTML.
- Сжатие и растяжение элементов при изменении размера окна.
Личный опыт: я делал лендинг для стартапа. Дизайнер нарисовал шапку с логотипом слева, меню по центру и кнопкой справа. Раньше я бы мучился с inline-block и маржинами. С Flexbox это заняло 10 минут. display: flex; justify-content: space-between; align-items: center — и все идеально выровнено.
Но у Flexbox есть слабость. Он одномерный. То есть он работает либо по горизонтали (row), либо по вертикали (column). Если вам нужно управлять и строками, и колонками одновременно — Flexbox пасует. Вы начинаете вкладывать один флекс-контейнер в другой, и код снова становится сложным. Именно здесь на сцену выходит Grid.
CSS Grid: двумерная мощь и никаких компромиссов
CSS Grid Layout — это, на мой взгляд, лучшее, что случилось с версткой за последние 10 лет. Если Flexbox — это линейка, то Grid — это шахматная доска. Вы задаете сетку, и элементы занимают ячейки, как фигуры. Причем вы можете указать, что один элемент занимает 2 колонки и 3 строки, а другой — только одну ячейку.
Первый раз, когда я попробовал Grid, я переписывал старый новостной портал. Там была сложная сетка: большая картинка слева, три маленьких справа, под ними блок с текстом, а внизу — галерея. Раньше это делалось через вложенные таблицы или флексы с кучей оберток. С Grid я написал:
.news-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 20px;
}
.main-news {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
И все. Никаких лишних дивов. Браузер сам рассчитал, где что лежит. Адаптивность делается в три строчки — меняешь grid-template-columns на 1fr на мобилках, и все блоки становятся в один столбец.
Важный нюанс: Grid не убивает Flexbox. Они — друзья. Flexbox хорош для выравнивания внутри одного ряда (например, кнопки в карточке товара), а Grid — для общей структуры страницы. Я использую их вместе постоянно. Например, главная сетка лендинга — Grid, а внутри каждой секции — Flexbox для контента.
Почему таблицы больше не нужны? 5 железных причин
Давайте пройдемся по пунктам. Я не говорю, что <table> нужно забыть навсегда. Для табличных данных (Excel-отчеты, расписание поездов) она незаменима. Но для верстки макетов — нет. Вот почему:
- Адаптивность. Таблицы не умеют ломаться на мобилках. Вам придется дублировать данные или писать сотни медиа-запросов. Grid и Flexbox адаптивны по умолчанию.
- Семантика. Скринридеры и SEO-боты лучше понимают, где у вас шапка, где меню, а где контент, если вы используете <header>, <main>, <section> в связке с Grid, а не <table>.
- Производительность. Браузер рендерит Grid и Flexbox по мере поступления контента, а таблицу — только после полной загрузки. Для сайтов с тяжелым контентом (интернет-магазины, YouTube) это критично.
- Гибкость. В таблице нельзя сделать элемент, который вылезает за границу ячейки или перекрывает соседнюю. В Grid — можно через grid-column-end: -1 или z-index.
- Читаемость кода. Таблицы порождают «спагетти-код». Grid и Flexbox — чистый, предсказуемый CSS. Вы смотрите на код и сразу видите структуру.
Однажды я переписывал табличную верстку на Grid. Код сократился на 60%, а скорость загрузки страницы выросла на 30%. Цифры не врут.
Реальный кейс: как я перевел лендинг с таблиц на Grid
Был у меня заказчик — сеть стоматологий. У них был сайт 2012 года, сверстанный на таблицах. Каждая страница весила под 2 мегабайта HTML-кода (я не шучу). Внутри были вложенные таблицы для меню, для карточек врачей, для прайса. Сайт открывался 8 секунд на десктопе.
Я предложил переписать все на Grid. Заказчик боялся: «А не сломается ли? А как это на айфоне?». Я сделал демо-версию на трех страницах. Результат:
- HTML стал легче в 3 раза (с 2 МБ до 700 КБ).
- Скорость загрузки упала до 1.5 секунд.
- Адаптивность появилась там, где ее не было.
- Заказчик сам научился менять порядок блоков через grid-template-areas — просто переставляя слова в CSS.
Самое смешное: менеджеры перестали жаловаться, что сайт «тормозит в офисе». Таблицы умерли именно в тот момент, когда мы осознали, что производительность и скорость — это не просто красивые слова, а деньги. Пользователь не будет ждать 8 секунд — он уйдет к конкурентам.
Практические советы: как не наступать на грабли
За годы работы я набил много шишек. Вот несколько правил, которые спасут вам нервы:
- Не смешивайте Grid и Flexbox бездумно. Если у вас один ряд элементов — берите Flexbox. Если сетка — Grid. Не надо пихать Grid туда, где нужен простой ряд кнопок.
- Используйте gap вместо margin. В Grid и Flexbox есть свойство gap, которое задает отступы между элементами, не добавляя их к краям контейнера. Это избавляет от проблемы выпадающих маржинов.
- Помните про min-width и max-width. В Flexbox элементы могут сжиматься до нуля, если контента мало. Чтобы этого избежать, ставьте flex-basis или min-width.
- Изучите grid-template-areas. Это визуальный способ задать сетку. Вы буквально рисуете ASCII-артом, где будет шапка, контент и сайдбар. Очень удобно для сложных макетов.
- Не бойтесь таблиц для данных. Если у вас прайс-лист или расписание — используйте <table>. Это семантически верно и удобно для копирования. Но не для верстки макета.
Еще один лайфхак: если вы верстаете карточки товаров (например, на партнерском сайте), используйте Grid для сетки карточек, а внутри каждой карточки — Flexbox для выравнивания цены, названия и кнопки. Это золотой стандарт.
Будущее верстки: что нас ждет через 5 лет?
Сейчас уже активно внедряется CSS Subgrid — когда вложенный грид наследует сетку родителя. Это решает проблему выравнивания вложенных компонентов. Также набирает популярность CSS Container Queries — они позволяют адаптировать блок не по ширине экрана, а по ширине родительского контейнера. Это мощный инструмент для компонентной верстки.
Но таблицы уже не вернутся. Даже если кто-то захочет их реанимировать, спецификация CSS развивается в сторону модульности и гибкости. Flexbox и Grid — это не просто технологии, это философия: «Думай о контенте, а не о ячейках». И это правильно.
Лично я перестал использовать таблицы для макетов еще в 2016 году. Сначала было страшно, потом — привычно, а сейчас я просто не понимаю, как мы раньше жили без display: grid. Если вы до сих пор верстаете на таблицах — попробуйте один вечер посидеть с Flexbox и Grid. Уверен, вы не захотите возвращаться.
Заключение: таблицы умерли, да здравствует свобода
Подведем итог. Таблицы не злые. Они просто не для того созданы. Использовать <table> для верстки сайта — это как забивать гвозди микроскопом. Вроде и можно, но зачем, если есть молоток? Flexbox и Grid — это молотки, напильники и лазерные уровни в одном флаконе. Они дают контроль, скорость и предсказуемость.
Я не говорю, что верстка стала легкой. Она стала другой. Теперь нужно меньше писать, но больше думать о структуре. И это круто. Потому что когда ты видишь, как твоя сетка идеально выстраивается на любом экране — от старого iPad до ультраширокого монитора — ты чувствуешь себя волшебником. А таблицы оставьте для бухгалтеров. Им они нужнее.
CSS Grid и Flexbox — это не просто инструменты. Это способ сказать браузеру: «Слушай, я тут главный, а ты просто красиво разложи блоки». И браузер слушается.
Так что не бойтесь переписывать старые проекты. Удалите те таблицы, которые сковывают ваш код. Поставьте display: grid и почувствуйте свободу. Поверьте, ваш будущий я скажет вам спасибо, когда через год нужно будет добавить новую колонку в макет — а вы просто измените одно число в CSS.