CSS блоки - таблицы в действии
Разберем на примере всевозможные теги из которых может состоять таблица. Рассмотрим ранее разобранные теги в действии. Объединим ячейки и колонки, создадим сущности для управления стилями колонок.
Ранее мы рассмотрели всевозможные табличные теги. Попробуем разобрать как это работает на примере табличной верстки сайта.
В этом примере проиллюстрированы некоторые особенности работы табличных тегов. Начнем с тега caption:
Видно, что не смотря на то что в разметке теги caption расположены далеко друг от друга в итоговом представлении они все идут перед строками таблицы.
Далее теги col, один из них имеет атрибут span равный 2, который обозначает что стили этой колонки будут применены к 2 первым колонкам всей таблицы:
Из-за того что на первую и вторую колонки наложен зеленый цвет мы можем его наблюдать в качестве заливки к menu, footer и add info элементам.
Для остальных первых и вторых колонок фоновый цвет переопределен на уровне тегов ячеек, которые имеют больший вес, чем колонки.Затем можно заметить, что таблица в примере имеет три группы строк.
В первой группе содержится .logo элемент, который в свою очередь представляет собой одну строку с одной ячейкой. Особенностью этой ячейки является то что она по ширине занимает все пространство таблицы не смотря на то, что таблица имеет три колонки. Достичь такого эффекта получается благодаря атрибутам слияния ячеек.
У тегов th и td есть возможность указать объединения по горизонтали и вертикали. На данном примере можно заметить что тег .logo имеет атрибут colspan = 3, который указывает что эта ячейка должна быть растянута на три по горизонтали.
На следующей строке видно, что все три ячейки присутствуют и тут нет не каких слияний.
Может быть кому то показаться странным, что некоторые теги здесь остаются открытыми, а некоторые закрыты. Это сделано намерено что бы показать наглядно гибкость возможностей парсинга HTML в современных браузерах.
В случае не закрытых тегов браузер закроет их самостоятельно когда посчитает нужным. Обычно он просто добавляет пробельный символ внутри тега и просто его закрывает, по этому всегда нужно помнить в этом случае о возможных дополнительных пробельных символах.
Далее рассмотрим блоки .content и .right
Для блока .content все так же как и с блоком .logo за исключением того что он занимает всего две колонки вместо трех. По этому стало возможно существование блока .right, который в свою очередь имеет атрибут rowspan=2. Этот атрибут указывает на объединение ячеек по высоте. Но как видно из верстки далее в группе строк tbody нет больше строк tr. По этому браузер создал пустое пространство в рамках этой группы и залил его фоновым цветом таблицы.
В тоже время блок .right стал занимать большую высоту чем .content, что говорит о том что он объединил сгенерированную ячейку из сгенерированной строки, которых нет в оригинальной разметки.
По возможности следует избегать таких сгенерированных ячеек внутри сгенерированных строк. Нужно понимать, что атрибуты rowspan и colspan работают в рамках одной группы строк как это показано в примере для блока .b
Поскольку он находится в группе строк tfoot, где есть две строки атрибут rowspan = 2 начинает работать как и было задумано. Он объединяет две ячейки.
Далее поговорим о блочной верстке.