Переверстка №8. Таблица «Предел огнестойкости строительных конструкций»

Nov 15, 2015 18:00

Сегодня неформатная переверстка. Я расскажу о таблице, которую показываю на курсе как пример:



Таблица сверстана в «лучших» традициях советской типографики. Нужно привести ее в порядок и придать современный вид.

Основные проблемы:
1. Много повторов в тексте.
2. Массивная трехэтажная шапка с кучей переносов.
3. Сетка из линеек.

Для начала разберемся с повторами. В шапке я выделил текст, дублирующий информацию из заголовка:



Заголовок также требует сокращения. Слово «соответствие» лишнее: любая таблица - это соответствие чего-то чему-то. И главное: заголовок должен описывать искомые данные, то есть прографку, поэтому:



Видно, что сокращения не спасли шапку: и слов, и переносов по-прежнему много. Можно было бы увеличить ширину колонок, но тогда таблица сильно растянется по горизонтали. Это неудобно сразу в двух отношениях. Во-первых, сложнее отслеживать взглядом строку, не перескакивая случайно на соседние. Во-вторых, сложнее заверстать такую таблицу на макете. Попробуем ее перевернуть, то есть поменять местами шапку и боковик:



После перевертывания последний столбец оказался пустым и слишком узким для слова «не нормируется». Ставить текст вертикально не вариант. Делаю из него примечание:



Левая верхняя ячейка (над боковиком) часто дублирует то, что уже известно из заголовка. В исходной таблице вообще не было «Видов конструкций», я придумал их сам, теперь убираю. Линейка под пустой клеткой тоже не нужна:



Именно так делает Тафти:



Со структурой теперь всё ок. Уменьшая ширину последней колонки, чтобы линейка не торчала. Набираю заголовок крупнее. Выравниваю примечания. Слегка разряжаю прописные:



Обратите вниманием, что текст я выровнял по левому краю, - в отличие от исходника, где всё по центру.

Было и стало:



-
Подробнее о работе с таблицами читайте в большом онлайн-курсе «Таблицы и прочие радости»

Присылайте макеты на переверстку. Описание и правила рубрики

верстка, линейка, процесс, таблица, переверстка, знаю как

Previous post Next post
Up