Таблицы

table-layout

В предыдущей главе мы обсуждали вёрстку. И говорили про построение содержимого с позиции дизайна — как геометрическая структура вашего приложения меняет смысл его использования.

Но макет имеет определённое значение в разном контексте. В контексте таблиц это значит, как браузер определяет размеры столбцов и строк элемента table на основе содержимого каждой ячейки таблицы и CSS, который применяется браузером и вами.

Этот процесс воистину волшебный.

Сложный алгоритм компоновки применяется и для горизонтали и для вертикали. И эти похожие алгоритмы ранее основывались на указанном вами table-layout, у которого есть два варианта:

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

fixed. Пытается установить размер столбцов равномерно, если не указана конкретная ширина в пикселях. В этом случае размеры будут заданы точно, если у вас нет ошибок с математикой. Спецификация CSS.

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

Пример 1. Ширина не задана

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

Пример 2. Ширина в процентах

Теперь взглянем на тот же пример с шириной столбцов, установленных как 20% и 50%, соответственно.

Включить white-space: nowrap

В обоих случаях заданная нами ширина принимается во внимание, но лишь относительно. Это всегда так с auto, но в данном случае это так и для fixed, потому что вся ширина указана в процентах. Браузер говорит, «20% — это 2/7 от общего 20+50%», поэтому, когда таблица имеет ширину 1000px, первый столбец заканчивается на 284px, а второй столбец на 714px, примерно в соотношении 2:5 (это не будет точно 2:5 из-за cellspacing, cellpadding, border, border-spacing, border-collapse и т. д., округления и других ограничений).

Обратите внимание, что white-space: nowrap применяются к каждой ячейке, в случае auto это свойство компенсируется, но в случае fixed происходит наложение текста.

Пример 3: Ширина в разных единицах

Теперь взглянем на тот же пример с шириной столбцов, установленных как 400px и 70%, соответственно.

Хорошо... Поскольку ширина каждой таблицы 694px, у браузера нет никакой возможности чтобы столбцы соответствовали 400px и 70%×694px. Так что он делает всё от него зависящее.

В случае auto, заданная нами ширина принимается во внимание, но лишь относительно. Браузер сравнивает 400/694 с 70%×694 и делает всё от него зависящее (поведение варьируется от браузера к браузеру).

В случае fixed, 400px удостаивается большей чести, поскольку фиксированные значения имеют приоритет над значениями в процентах, так что второй столбец получает остаток.

Табличные данные

Это курс по CSS, так что не буду тратить много времени. Главная причина использовать таблицы в приложении — это отображение табличных данных. Под табличными данными подразумевается то, что вы могли бы отобразить в виде матрицы.

Когда дело доходит до стилизации таблиц, есть некоторые хорошие общие правила:

• Широкие таблицы должны быть в виде зебры или используйте :hover с фоновым цветом (или чем-то аналогичным), чтобы помочь глазам связать ячейки из одной строки.
• Столбцы с числовыми данными должны быть выровнены по правому краю, так чтобы цифры были друг под другом.
• Крайние справа столбцы, возможно, потребуют выравнивания, чтобы избежать рваного правого края (думаю, text-align: justify).
• При возможности, высота строк должна быть одинакова, чтобы было проще сканировать по вертикали (этот общий принцип известен в бизнесе как «вертикальный ритм» и он очень важен).

Таблицы как инструмент вёрстки

В предыдущей главе мы показали, что таблицы могут использоваться для центрирования по вертикали содержимого произвольной высоты. Пока flex не имеет широкой поддержки вы должны чувствовать себя комфортно используя для этой цели таблицы. Но помимо этого, если вы замечаете за собой что применяете таблицу для вёрстки макета, в котором нет табличных данных, вы, вероятно, делаете ошибку.

Если вы ориентируетесь на браузер Internet Explorer 10+, то используйте flex. Филипп Уолтон написал великолепное пособие по вертикальному центрированию через flexbox.

Глюки таблиц

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

Глюк 1: Ячейки таблицы не уважают overflow (table-layout: auto, Firefox, IE)

Это значит, что даже если вы используете table-layout: fixed и укажите ширину в пикселях, overflow: hidden не будет на самом деле работать для ячеек таблицы в любом браузере. Если вы используете table-layout: auto, то любые значения overflow не соблюдаются во всех браузерах.

Глюк 2. Ячейки таблицы не уважают относительное позиционирование (Firefox)

Ага. Вы правильно меня поняли. Вы идёте и применяете position: relative к ячейке таблицы, добавляете position: absolute к элементу внутри, а в Firefox вместо этого он будет позиционирован относительно ранее позиционированного родителя таблицы. Лентяй.

Об этом баге рапортовали в 2000 году.

Глюки; для тех, кому лень читать

Если при оценке вариантов вы верите, что используя элемент table идёте верным путём, просто убедитесь, что заключаете содержимое каждой ячейки в div. Таким образом у вас будет полный контроль над стилем каждой ячейки и в то же вы сможете использовать чрезвычайно мощный, хотя и запутанной движок вёрстки таблиц.

Дальнейшее чтение

• w3: CSS2 Tables specification
• Drewish: Vertical rhythm tool