Магия CSS. Глава 3. Таблицы

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

Пример 1: Нет ширины

table-layout: auto

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

Теперь давайте посмотрим на тот же пример с шириной столбцов 20% и 50% соответственно.

Пример 3: Смешанные ширины

Теперь рассмотрим тот же пример, но с ширинами колонок 400px и 70% соответственно.

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

Я не буду подробно останавливаться на этой теме, поскольку в первую очередь это курс по CSS. Но основной причиной использования таблиц в верстке являются табличные данные. Табличными (tabular) данные считаются, если вы можете представить их в таблице (spreadsheet). (Прим. переводчика: без уточнения английских слов, имеющих одинаковое значение в русском языке, в предложении возникает тавтология.) Контентная матрица.

  • Столбцы с числовыми данными должны иметь выравнивание по правому краю так, чтобы цифры находились друг под другом.
  • Текст в крайнем правом столбце должен иметь правую выключку, чтобы избежать рваного края (вполне подойдет text-align: justify).
  • Если это возможно, высота строк должна быть одинаковой, чтобы облегчить вертикальный просмотр. (Этот общий принцип известен как “вертикальный ритм” и он очень важен.)

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

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

Подводные камни

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

Камень 1: Ячейки таблицы не считаются с overflow (table-layout: auto; Firefox, IE)

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

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

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

Многабукав про камни

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

Внеклассное чтение

Цитирование

  1. Can I use: flex
  2. Solved by Flexbox: Vertical Centering
  3. Seybold Seminars: Why tables for layout is stupid
  4. Smashing Magazine: Table Layouts vs. Div Layouts: From Hell to… Hell?
  5. Vaneso Design: Are CSS Tables Better Than HTML Tables?
  6. Mozilla Bugzilla: relative positioning of table cells doesn’t work

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC