таблица

Построение таблиц в CSS

В этой статье рассмотрим средства для построения и редактирования таблиц методами CSS.

Таблицы — это особенный элемент. У таблиц каждый элемент имеет свое собственное представление, т.е. свойство display у него свое самостоятельное.

Напомню — из каких элементов состоят таблицы:

  • элемент table. Он блочный, но размеры этого блока определяются по его контенту.
  • Группы столбцов и столбцы — table-column-group и colgroup — задают ширину столбцов.
  • table-column и col — это отдельные столбцы, которые лежат поверх отдельным слоем.
  • Группы строк — это элементы tbody, thead, tfoot. Для каждой секции определено отдельное правило display: table-row-group, table-footer-group, table-footer-group.
  • Сами строки. Это элементы tr.
  • Ячейки. У них представление — table-cell. Сюда относят элементы td, th.

26

Многое из того, что будет в этой статье, не поддерживается в IE старых версий.

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

  • та область, в которой находится таблица, т.е. ширина контейнера.
  • Ширина, которую мы задаем у самой таблицы.
  • Ширина, которую мы задаем у столбцов и ячеек (col, colgroup, td, th).

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

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

У таблиц есть несколько особенностей:

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

Работа с основными элементами таблицы

  • Элемент col. В элементе есть 2 атрибута: span — количество столбцов, для которых я пишу ширину, width — сама ширина. Можно показать рамку через указание класса, предварительно написав там такие строки:border:1px solid #369 (возможно только в режиме «схлопывания» рамок border-collapse:collapse). Можно задать фон (в стилях написать background:#e0e0e0). Но это все работает, пока хватает места в самой таблице. Как только места перестает хватать (например, мышкой сужаем окно браузера), браузер сжимает таблицу, пока не упрется в минимальный контент всех ячеек. Меньше он не может сжать, и только тогда изменения таблицы заканчиваются.
  • Строка — tr. Можно задавать рамку (см. элемент №1). Можно задать фон (см. элемент №1).
  • Элемент table — таблица. Здесь можно указать следующие правила:
  1. border-collapse — режим соединения рамок: separate (начальное значение), collapse.
  2. table-layout — режим формирования таблицы: auto (начальное значение) или fixed.
  3. empty-cells — отображение пустых ячеек. Это правило применяется к ячейкам, наследуется: show (начальное значение) или hide.
  4. border-spacing — зазоры между ячейками. Работает только при border-collapse:separate. В правиле проценты и отрицательные значения не допускаются. Если указать одно значение — выставятся зазоры со всех сторон, два значения — горизонтальные и вертикальные зазоры.



Добавить комментарий

Ваш e-mail не будет опубликован.