Иллюстрирование. Верстка страниц с использованием CSS фреймворков. Виды верстки: основы классификации
Количество разделов и рубрик, говоря профессиональным языком, - композиция номера - вот тот фундамент, который лежит в основе формирования фирменного стиля и гарантирует изданию узнаваемость в широких массах. Верстка газет и журналов является неотъемлемой частью процесса производства. Она отвечает за оптимизацию конкретной страницы и за общий дизайн номера, то есть за грамотное объединение текстовых и графических элементов, за лёгкость восприятия шрифтов, за простоту навигации...
Преимущества устойчивой композиции
Систематический выход в тираж рано или поздно приводит к тому, что у газеты либо у журнала складывается своя уникальная композиция. От номера к номеру все значимые полосы, базовые разделы и тематические рубрики сохраняют определённый вид и структуру. Делается это неслучайно: продукт, изготовленный по шаблону, легче воспринимается читателем, а впоследствии вырабатывает у целевой аудитории некую модель ожидания.
Впрочем, верстка газет по заранее установленным стандартам вовсе не подразумевает незыблемости схем. Наоборот, композиции, легко поддающиеся трансформации - признак качественной реализации творческих задумок.
Другими словами, стилистический уклон и формат газеты / журнала не должен зависеть от точечных поправок и корректировок. Если же ответственный редактор впадает в ступор каждый раз, когда за несколько часов до сдачи номера в печать возникает необходимость переверстки отдельных полос или даже страниц, значит, базовая композиция себя не оправдывает, и её необходимо изменить.
В чём принципиальное отличие компоновки от верстки?
Композиционная подготовка и верстка газеты - два взаимосвязанных процесса со схожими алгоритмами действий. Однако задачи, которые стоят перед дизайнерами и верстальщиками, нельзя назвать однотипными - отличия лежат в плоскости предметного освоения (оптимизации) уже отредактированных материалов. Приоритетным направлением компоновки является детальная проработка структуры контента: очерёдность полос, конфигурация публикаций, «встраиваемость» изображений и тому подобное. Цель же грамотной верстки - сделать так, чтобы расположение материала на страницах не только не доставляло трудностей читателю, но и самым естественным образом акцентировало его внимание на наиболее значимых информационных посылах.
Материал, прошедший компоновку, имеет общую тематическую сердцевину. Тем не менее, для формирования полноценного номера издания этого не достаточно. Своеобразной финишной чертой служит верстка, которая упорядочивает контент и организует отдельные элементы (публикации) в единое целое.
Верстка газеты: нормы и закономерности
Главный ориентир для выбора типовой структуры верстки - содержание номера. Все приёмы и опции технического оформления в той или иной степени диктуются контентом. Термин «материал для первой полосы» как нельзя лучше отображает суть вышеизложенного: им оперируют тогда, когда хотят подчеркнуть значимость статьи (то есть именно информационная нагрузка такой заметки играет роль «трафарета» для всего номера).
Однако нужно понимать, что так называемые общие нормы верстки достаточно условны. у каждого издания своя, специфическая. Поэтому если все газеты окажутся на одно лицо, требовательные читатели не смогут найти интересующий их продукт, что непременно приведёт к падению продаж с вытекающими отсюда последствиями.
И самое важное: специфика верстки во многом предопределяется историей периодики, этапами её развития, традициями рабочего коллектива, национальными предпочтениями и прочими факторами, которые не имеют прямого отношения к
Формат А3: компьютерное макетирование
Верстальщик - специалист, оперирующий готовым текстом и уже подобранной графикой. В его профессиональные обязанности входит размещение материала на основе утверждённых шаблонов. На заре «типографической эволюции» труд профильного работника был сложен, а временные затраты на выполнение поставленных задач - колоссальны. Современное компьютерное макетирование - совсем другое дело…
Используемые сегодня типографические форматы - это производные эталона DIN A0. Наиболее востребованными в печатном деле являются А5, А4 и А3.
Стандартная верстка газеты А3-формата осуществляется с применением мастера шаблонов (программная оболочка может быть разной, но функциональный набор утилит сопоставим). Среди безусловных преимуществ компьютерного макетирования - доступность корректировки содержимого номера на любой стадии его подготовки, а также минимизация числа ошибок.
Краткий обзор программного обеспечения: PageMaker и QuarkXPress
Допечатная подготовка номера на ПК подразумевает инсталляцию некоего программного продукта. Изначально предложений, достойных внимания профессиональных верстальщиков, было немного. По сути, таковых существовало только два - PageMaker от всемирно известной компании Adobe (реинкарнация одноимённой сборки от Aldus) и функциональный аналог под названием QuarkXPress от скромной организации Quark Ink.
Долгий отрезок времени разработчики обеих программ шли, что называется, нога в ногу, поэтому компьютерная верстка газет - имеется в виду её итоговый результат - практически не зависела от реализуемого пакетного сценария. Выход обновлений нарушил установившееся равновесие, но не определил лидера. Так, QuarkXPress продемонстрировал феноменальную архитектуру вспомогательных модулей (расширений), но не сумел избавиться от неуклюжести в сфере табличного редактирования. А PageMaker сделал ставку на универсализацию, но потерял несколько позиций в рейтинге функциональности (особенно пострадал арсенал спецэффектов).
В помощь верстальщикам: знакомство с Adobe InDesign
Проигрывать в сфере создания продуктов для программной верстки компания Adobe не собиралась. Появление принципиально нового пакета было лишь вопросом времени…
Приложение InDesign - куда более серьёзный конкурент для QuarkXPress, нежели отживший своё PageMaker. Точнее, вопрос соперничества больше не стоит - всё сводится к тому, скольких пользователей утилита «украдёт» у Quark.
Итак, чем же верстка газеты в InDesign отличается от ранее описанных сценариев?
Интригует полностью переработанный который «заточен» под рядового пользователя. Тут, дабы насолить конкурентам, присутствует даже опция активации горячих клавиш, используемых по умолчанию в аналогичных программах - верстальщикам, трудившимся на Quark, не придётся перестраиваться! Поражает и функциональность. В этом плане InDesign - жизнеспособный гибрид, позволяющий решать сложные задачи предпечатного характера простым нажатием 5 - 6 комбинаций клавиш. И, наконец, верстка в InDesign оправдана с точки зрения естественного развития печатных изданий: выпускаемые обновления к пакету максимально упрощают процесс компоновки материала, уменьшают время подготовки публикаций, предлагают варианты готовых шаблонов и макетов в зависимости от стилистической привязки номера…
Грамотная верстка газет: три правила первостепенной важности
Современная верстка имеет компьютерную основу. Но это вовсе не означает, что программы в автоматическом режиме исполняют все требования касательно грамотной компоновки. От мастера-специалиста по-прежнему зависит многое.
Итак, как же выглядит классическая верстка газеты?
Пример правильного алгоритма действий следующий:
- При подготовке номера к печати должно быть обеспечено единообразие страниц. Если типовая структура нарушена (отбивки заголовков и спуски полос разнятся между собой либо наблюдается несоблюдение шрифтового оформления, графические дисбалансы и прочее), то, следовательно, композиция собранного материала подобрана неверно.
- Верстка выходного (заглавного) листа исключает использование колонтитулов, норм и сигнатур; полные сведения об издании подаются в первой полосе.
- По итогам верстки должно иметь место обязательное совпадение строк основного текста, расположенного на лицевой странице газеты, со строками на обороте (даже если был реализован сценарий переменчивого кегля шрифта, и базовое содержание публикации разбавлялось материалами второстепенной важности: сносками, комментариями, уточнениями и т. п.).
Верстка журналов: некоторые нюансы
Правила верстки газеты несколько отличаются от тех требований, что вдвигаются к специалистам, ответственным за подачу в печать журнальной продукции.
Многостраничные издания зачастую состоят из колонок разного формата, при этом число иллюстраций в них измеряется десятками. Обеспечить соответствие строк «лица» и «оборота» в таких условиях гораздо сложнее. Поэтому верстальщики журналов, как правило, оперируют функциональными дополнениями (приложениями) к основным программным пакетам, а скомпонованные номера выходят в тираж на типографическом оборудовании более высокого класса.
Виды верстки: основы классификации
Попыток создания единой классификации типов верстки предпринималось немало. Однако почти все они не имели успеха, так как игнорировали геометрию размещения готового материала на полосе.
По этой причине было принято решение разделять виды верстки газет не по стилевой принадлежности, а на основании трёх групп признаков: в первую вошли те из них, которые идентифицировались конфигурацией текста и графики, критерием для второй стало направление разверстки (вертикаль / горизонталь), для третьей - степень симметрии на полосе.
В газетах, независимо от тематики, чаще остальных применяется простая брусковая верстка (информация подаётся в структурированных горизонтальных прямоугольниках - «брусках»). Куда реже прибегают к «ломаной» компоновке - когда колонки с уступами формируются за счёт прямоугольников переменной высоты.
Тип верстки и целевая аудитория. Существует ли связь?
В профессиональных кругах хорошо известен тот факт, что верстка газет - это не просто поиск оптимальных форм для содержания. Итоговые композиции в первую очередь обязаны отвечать запросам целевых аудиторий. Если взглянуть на печатные издания, ориентированные на молодёжь, то можно обнаружить примеры живого и яркого оформления, реализованные за счёт использования «ломаной» верстки. Брусковая же схема доминирует в газетах, читатели которых - преимущественно люди зрелого возраста. А вот сугубо информационные издания отличаются оригинальной (как правило, усложнённой) формой подачи материала: множество колонок разной геометрии, плюс «динамический» шрифт.
Верстка сайта – это процесс комбинирования HTML-кода и таблиц CSS на основании подобранного ранее дизайнерского решения. Первостепенным признаком качества конечного результата является корректное отображение ресурса как во всех популярных браузерах, так и на .
Нет смысла напоминать о том, что успешный web-проект характеризуется стабильностью функционирования и обеспечением постоянного доступа к его контенту. Этого можно достичь только в том случае, если HTML-верстка будет:
Кроссбраузерной;
- адаптивной
;
- содержать минимальное количество кода;
- способствовать высокой скорости загрузки web-страниц;
- базироваться на применении HTML-тегов исключительно согласно их предназначению (последовательность и иерархичность системы внедрения элементов также считается неотъемлемым требованием);
- валидной (соответствие кода сайта общепринятым техническим стандартам W3C).
Виды
Теперь приступим к рассмотрению видов HTML-верстки.
1. Статическая (фиксированная) верстка. Специфика применения отличается тем, что ширина web-страниц будет идентичной при эксплуатации сайта как на мобильном гаджете, так и на стационарном ПК. В том случае, когда разрешение монитора большое, а окно интернет-браузера развернуто на весь экран, то по обеим сторонам можно наблюдать свободное (нефункциональное) место. Что же касается переносных устройств, то при статической верстке пользователь видит полосу прокрутки внизу страницы.
2. Резиновый тип HTML-верстки подразумевает заполнение страницей всего экрана устройства. И здесь не имеет большого значения то, где именно вы осуществляете просмотр контента. Изначальные параметры страницы (размер, например) также ни на что не влияют. Поскольку web-элементы занимают все свободное пространство, значительно усложняется процесс разработки удобного дизайна.
3. Табличная верстка включает в себя создание HTML-кода посредством формирования комплекса таблиц. Выглядит это примерно так: сначала производится главная таблица, в которой присутствует множество ячеек. В них размещается следующий пакет таблиц (при необходимости). И так до бесконечности. В итоге код получается достаточно объемным, его последующее корректирование, изменение web-мастером затрудняется.
Табличная HTML-верстка в наше время, как правило, используется редко. Главный недостаток – медленная индексация сайта поисковыми системами. В принципе, допускается расположение на странице нескольких таблиц, однако мы бы не рекомендовали применять их в рамках построения структуры составляющих web-проекта.
4. Верстка web-блоками (или div-верстка). Считается, что это наиболее распространенный способ конструирования сайтов на сегодняшний день. Сетка формируется за счет тегов
5. Адаптивный тип верстки. Главное преимущество – это возможность технической адаптации ресурса под все популярные пользовательские устройства (ПК, ноутбуки, планшеты, смартфоны и так далее). Комфортное пользование достигается путем группирования нескольких таблиц стилей.
6. Гибкая верстка (flex). В кругах web-дизайнеров поговаривают, что за этим видом верстки кроются неограниченные возможности, перспективы в области программирования. Для того чтобы не быть голословными, представляем вам перечень ключевых преимуществ гибкой верстки:
Все блоки подлежат сжиманию и растягиванию, необходимому для эффективного заполнения имеющегося пространства;
- присутствуют ресурсы для выравнивания текстовых материалов по горизонтали и вертикали;
- нет необходимости в четком размещении компонентов в HTML;
- возможно написание языков как справа налево, так и слева направо (хотя в данном случае более подходящими будут понятия «начало» и «конец»);
- освоение CSS подразумевает минимальные временные затраты.
7. Семантическая HTML-верстка позиционируется в качестве расширения блочной верстки. Проанализировать функционал можно на платформе HTML5. Заметим, что обновленный комплект тегов позволяет улучшить показатель структурированности web-страницы (поисковые системы отдают предпочтение порталам с семантическим кодом).
В завершение напомним, что качественный сайт – это площадка, страницы которой (прежде всего) разработаны с учетом критериев кроссбраузерности и адаптивности. Подбирайте вид верстки, ориентируясь на тип ресурса, а также на спектр задач, целей, решаемых с его помощью в будущем. Удачи вам.
Почему не один?
Справедливый вопрос заключается в том, почему нельзя было придумать один единственный способ и развивать его? Но люди – существа разные, поэтому они придумали разные способы. На самом деле их не так много, к тому же некоторые сегодня устарели. Давайте рассмотрим основные методы верстки.
Таблица
Создание каркаса с помощью таблиц. В прошлом самый основной и популярный способ. Сегодня устаревает с каждым годом, хотя остаются сайты, которые сделаны так. Весь метод завязан на теге table и его дочерних элементах, таких как строки и ячейки. Вся структура сайта размечается как большая таблица.
Достоинства. Такой подход позволяет достаточно легко создать много колонок и столбцов. Макеты со сложной структурой достаточно просто верстаются с помощью таблицы. Также тег table и все связанные с ним элементы поддерживаются абсолютно одинаково во всех браузерах.
Недостатки. Очень громоздкий код – главный минус табличной верстки. Нужно отметить, что в одну таблицу можно вставить другую, то есть вложенную. Это приводит к большой вложенности и куче тегов. И никуда от этого не деться, потому что все эти теги нужны для работоспособности нашей таблицы. Разобраться в таком коде не очень просто.
Табличные данные очень сложно адаптировать для просмотра на различных устройствах. Намного проще сделать это с блоками (блочная верстка, которую мы обязательно тоже рассмотрим).
Альтернатива. Не так давно в CSS появились специальные значения свойства display, которые позволяют имитировать таблицу, используя на самом деле блоки. Например, display: table, display: table-row, display: table-cell. Элементы, к которым применяться эти свойства, начнут вести себя как таблица, ряд таблицы и ячейка соответственно. Нужно скачать, что и этот метод несовершенен, потому что не совсем одинаково поддерживается во всех браузерах. Если вы используете эти свойства, нужно тщательно тестировать на кроссбраузерность.
Фреймы
Когда-то существовал еще один метод верстки, но сегодня о нем практически забыли. Суть верстки с помощью фреймов заключается в том, что окно браузера делится на определенное количество независимых блоков (фреймов), которые формируются тегом frameset. Там указывается путь к html-страничке, которая будет загружена в фрейм.
Каждый фрейм является независимым элементом. То есть полосы прокрутки появляются у каждого блока отдельно. Нужно сказать, что фреймы так и не были официально приняты, поэтому сегодня практически не используются и вообще считаются плохим способом верстки.
Рис. 1. Такой вот пример сайта на фреймах я нашел в сети. Как вы понимаете, никакой эстетики.
Блоки
Вот мы и подошли к самой популярной сегодня технологии верстки сайтов. Она имеет ряд преимуществ и в целом признана самой удобной. Каждый блок – это независимый элемент, в который можно вкладывать неограниченное количество элементов. Блок можно позиционировать, менять ему размеры, стилизовать. Все это делается с помощью CSS.
Достоинства. Исключительно компактный код, который отлично читается, даже если верстали не вы. К блокам легче привязывать различные стили, чем к таблицам. Такой сайт быстрее загружается и лучше индексируется.
Блочные элементы можно накладывать друг на друга, как слои в фотошопе. Учитывая поддержку прозрачности, можно добиться множества интересных эффектов, выделить какой-то участок или реализовать с помощью скрипта загрузку разного содержимого в одном и том же месте.
Недостатки. Их практически нет. Блоки легко адаптировать, они легко скрываются и изменяются. Контейнеры div и span правильно отображаются даже в старых браузерах. Если же говорить о новых семантических блоках, то у них нет полной поддержки. Впрочем, наверняка уже скоро эта проблема будет решена. Уже сегодня существуют файлы, подключение которых решает проблему поддержки новых элементов в старых браузерах. Метод блочной верстки будет существовать еще долго из-за его исключительного удобства и простоты.
Флексбоксы (flex)
Самый новый метод верстки. Нормальную поддержку в браузерах впервые получил с 2014 года. Теперь многие разработчики придерживаются именно этого метода. Суть его в том, что структурным элементам прописывается display: flex. Это тоже своего рода блоки, только более гибкие и функциональные.
Многие пока считают флексбоксы не совсем удачным решением для построения сетки сайта. Например, для мелких элементов на странице уже давно рекомендуется использовать флексбокс, но для каркаса страницы многие по-прежнему используют float.
Скорее всего, в будущем флексбокс окончательно утвердится как новая методика верстки сайтов, поэтому стоит уже сейчас изучать свойства этого элемента.
Рис. 2. Свойства flex-элементов делают их более гибкими, чем блоки.
К достоинствам флексбоксов можно отнести новые css-свойства, которые позволяют выстраивать разнообразные сетки и колонки без особых усилий. Также поддерживается вертикальная центровка, которую не поддерживает обычный блок.
Заключение
Самым простым и популярным способом верстки сегодня продолжает оставаться блочный подход. Кое-где вам пригодятся и таблицы, потому что табличные данные верстать блоками совсем неудобно.
Фреймы давно отброшены как неудачный способ создания структуры, но тег iframe вполне может пригодиться вам, если вдруг понадобится вставить в статью другой сайт.
Наконец, сегодня мы имеем абсолютно новый способ верстки – элемент flex и его свойства, которые делают его более гибким и современным, чем привычный block. На этом на сегодня все. Не забывайте читать новые статьи на блоге, чтобы знать все о сайтостроении.
Часто возникает вопрос, что такое верстка? Простым языком, верстка - это расположение составных элементов (текста, заголовков, изображений, таблиц) на странице документа. Верстка бывает следующих видов:
- Книжная
- Газетно-журнальная
- Верстка веб-документов
Описание первых двух опустим и перейдем сразу к верстке веб-страниц. Чтобы лучше понять, что это такое рассмотрим процесс создания сайта. Сначала создают дизайн-макет: рисуют каждую страницу и все его элементы. В итоге получают изображение сайта, но это всего лишь «картинка».
Далее, полученный макет нужно отобразить в браузере, да так, чтобы все элементы «ожили» и откликались на действия пользователей. На этом этапе и вступает в работу верстальщик. Используя язык разметки html, он создает документы, которые понимает браузер и отображает их привычными всем веб-страницами.
Методы верстки
При верстке веб-страниц можно выделить два основных метода:
- Табличная верстка
- Блочная верстка
Табличная верстка раньше была основной. Преимущество верстки с помощью таблиц заключается в ее простом исполнении и практически одинаковом отображении в разных браузерах. Недостатки - сложная и объемная структура, которая в разы увеличивает количество кода (по сравнению с блочной). Чтобы изменить табличную верстку нужно затратить большое количество времени и усилий, долго вникать в уже существующую структуру.
На сегодняшний день продолжают верстать сайты табличной версткой, но профессионалы уже давно перешли на более гибкую - блочную. Табличную верстку рекомендуют использовать только для отображения таблиц.
Блочная верстка является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов
Небольшой пример кода:
Табличная верстка
Шапка
Контент Меню Подвал
Код блочной верстки
Шапка
Контент
Результат получается одинаковый:
Даже для самого простого макета уже видна разница в коде, а с увеличением элементов разница будет расти в геометрической прогрессии.
Программы для верстки
Чтобы сверстать простую веб-страницу можно обойтись и обычным блокнотом. Для более сложных проектов не обойтись без специальных html-редакторов. Они подсвечивают код, что значительно упрощает процесс верстки. В профессиональной среде используют следующие программы:
- Notepad++
- Macromedia Dreamweaver
- Microsoft FrontPage
- CoffeeCup HTML Editor
- NetBeans
Редакторы html-страниц разделяют на обычные и визуальные. Используя визуальный редактор, сверстать страницу сможет даже неопытный пользователь. Но стоит понимать, что визуальный редактор дописывает много лишнего кода (мусора) и лишает верстальщика возможности использовать гибкость языка html на 100%.
Какие проблемы возникают при верстке?
Основная проблема при верстке сайтов - не одинаковое отображение одного и того же документа в разных браузерах. Сверстав качественно страницу для Firefox, она может отображаться немного по-другому в Opera, и полностью разъехаться в Internet Explorer.
Причина в том, что каждый браузер разрабатывают разные компании и используют различные технологии и правила. Попытки прийти к единому стандарту уже делаются, но до конечного результата еще далеко.
Часто верстке не уделяют должного внимания. С таким подходом можно загубить даже самый креативный дизайн и сложный функционал сайта. Если посетители вашего личного блога это вам простят, то разваливающаяся верстка корпоративного сайта или магазина серьезно отразится на имидже компании. Самое верное решение - доверить работу профессионалам.
Для профессионального оформления сайтов необходимо знать не только основы CSS, но и понимать, как работает браузер, знать правила, которым он следует. Именно они определяют основные способы и приёмы вёрстки.
Только имея такое понимание, можно выбрать наиболее подходящий способ решения задачи из нескольких возможных, с учётом их достоинств и ограничений. Только так можно наиболее полно задействовать возможности браузера и предупредить потенциальные ошибки.
Существует немало описаний различных приёмов. В этой статье предпринята попытка собрать вместе самые важные приёмы и систематизировать их, чтобы дать представление как об основных возможностях, так и об ограничениях CSS, актуальных в настоящее время.
Статья рассчитана на людей, которые знакомы с основами HTML и CSS и имеют представление об основных свойствах и базовых принципах работы каскадных таблиц стилей.
Таблица
Исторически, первым и единственным способом раскладки страницы были таблицы. Описанию поведения таблиц посвящена целая глава в спецификации CSS 2.1. Несмотря на такой объем, некоторые моменты описаны скудно или вообще не определены и отданы на усмотрение браузеров.
Достоинства и недостатки
Таблица служит для отображения упорядоченных данных в строках и столбцах, имеющих смысловую связь по горизонтали или вертикали. Отсюда следует главное достоинство: ячейки таблиц выравниваются по сетке, что позволяет простым и очевидным образом создать модульную сетку .
Это неотъемлемое свойство таблиц позволяет заполнить плоскость окна браузера и создавать «резиновые сайты». Но, как при малых, так и больших размерах окна просмотра браузера структура таблицы не меняется, она не может гибко адаптироваться под доступное пространство.
При использовании таблицы для раскладки, то есть размещения в сетке данных, не имеющих смысловой связи, нарушается семантичность. Применение таких таблиц ухудшает доступность для людей, использующих специальные программы, и снижает положение в поисковой выдаче, поскольку поисковому движку, предположительно, сложнее разобраться в структуре страницы. Как следствие, сайт работает менее эффективно.
Особенности
Ячейки таблиц идут в коде строго друг за другом, слева направо или справа налево в зависимости от направления языка, заданного CSS-свойством direction или его аналогом в HTML, атрибутом dir .
Если, к примеру, требуется, чтобы основное содержимое в центральной колонке шло в начале, перед содержимым других колонок в исходном HTML-коде, таблица - неподходящее решение.
Структура таблицы довольно сложна, она описывается большим количеством тегов, что приводит к усложнению исходного кода. Негативный эффект проявляется ещё больше, когда несколько таблиц вложены друг в друга.
Имитация
Появившаяся в CSS 2.1 группа свойств display: table-* позволяет создать таблицу из произвольных элементов, имеющих соответствующую структуру.
Согласно спецификации, достаточно только одного объявления вроде display: table или display: table-cell - недостающие элементы должны автоматически достраиваться браузером.
Однако будет надёжнее создать минимальную структуру таблица > ряд > ячейка, аналогично обязательным тегам
| , с соответствующими значениями свойства display: table , table-row и table-cell .
В противном случае может возникнуть нерегулярно проявляющаяся ошибка, замеченная в Firefox и браузерах на основе Webkit, когда ряд таблицы без элемента с display: table-cell случайным образом разбивается на несколько ячеек. Возможное объяснение может состоять в попадании границы сетевых пакетов среди ячеек при передаче HTML-кода. Таким образом, блочная разметка с display: table-* почти не отличается от обычной HTML-таблицы ни в чем, кроме имён тегов, однако обычная таблица лучше поддерживается браузерами (а именно в Internet Explorer 7 и ниже) и имеет больше возможностей, таких как объединение ячеек. Стоит отметить, что, несмотря на необязательность тега |
