Алгоритм с автоматически определяемой шириной
Модель с автоматически определяемой шириной, по сути, не отличается от модели, применявшейся в таблицах HTML, границы которых раздвигались по ширине, чтобы вместилось все содержимое. В рекомендации CSS значение table-layout: auto гарантирует, что независимо от того, как браузер настроен по умолчанию, для вычисления размера таблицы будет использован именно этот метод.
Этот метод более трудоемок для браузера. Впрочем, невзирая на большее время на обработку, иметь таблицу и ячейки с автоподбором размера по содержимому иногда бывает желательно.
3.12. Оформление таблиц
Для управления видом таблиц никакие специальные свойства не требуются. Основные приемы оформления и форматирования типичных компонентов таблиц:
Содержимое-текст
font и любые свойства шрифтов;
все свойства, задающие формат текста;
color (для изменения цвета).
Выравнивание внутри ячеек таблицы
text-align – горизонтальное выравнивание текста в ячейке.
vertical-align – вертикальное выравнивание текста в ячейке.
Применение этих свойств к элементу <table> не размещает саму таблицу, а производит выравнивание содержимого ячеек таблицы.
Цвет фона и иллюстрации
В ячейках, строках, их группах, столбцах и группах столбцов, а также таблице в целом можно задать свой цвет фона или фоновое изображение:
background и другие свойства, задающие фон.
Отступы
Для указания отступа снаружи таблицы можно использовать любое соответствующее свойство (margin, padding).
К внутренним элементам: ячейкам, строкам, столбцам – понятие «отступ» неприменимо.
Заполнение и разбивка между ячейками
padding и свойства формирования заполнения в CSS можно задавать для каждой отдельной ячейки, а не всех сразу.
В HTML пространство между ячейками определяется атрибутом cellspacing. Прямого аналога ему в CSS нет. Ближайшим по назначению является свойство border-collapce:separate и указание для расширения пространства между ячейками значения border-spacing.
Размер и позиционирование таблицы
Таблица позиционируется как и любой другой блок.
width – кроме строк и групп строк;
height – кроме столбцов и групп столбцов.
Свойства столбцов
Ячейки таблиц всегда являются потомками строк, однако в CSS описывает четыре разрешенных свойства столбцов
border
background
width
visibility
Практика
Оформите 3 таблицы с помощью стилей CSS:
1
)
2)
3)
3.13. Блочные и внутристрочные элементы
В (X)HTML разница между блочными и внутристрочными элементами связана с правилами вложения элементов. Как правило, блочные элементы могут содержать как блочные, так и внутристрочные элементы, в то время как внутристрочные элементы могут содержать только данные или другие внутристрочные элементы. Абзацы (р), заголовки (например, h1), списки (ol, ul, dl) и элементы div являются наиболее распространенными блочными элементами. Выделенный текст (em) и анкеры (а) являются примерами распространенных внутристрочных элементов.
Блочный элемент CSS (display: block) всегда создает разрыв строки до и после себя. Он занимает всю ширину родительского элемента, в котором он содержится, будь это ширина всего документа (для элемента body) или меньшее пространство, например элемент div c заданным размером. В нормальном потоке текста документа рядом с блочным элементом разместить ничего нельзя.
Внутристрочные элементы CSS (display: inline) не создают разрывов строки. Они появляются внутри строки, и разрыв происходит, только если ширины родительского элемента не хватает, и тогда материал переносится на следующую строку.
В отличие от блочных и внутристрочных элементов (X)HTML блочный элемент CSS может вкладываться во внутристрочный элемент, и наоборот. При использовании CSS любой (X)HTML элемент может быть как блочным, так и внутристрочным.
Для свойства display существуют и другие значения. Наиболее распространенным и хорошо поддерживаемым является значение none, при указании которого элемент не отображается вообще и, по сути, удаляется из потока документа. К другим значениям относятся list-item (сходно со значением block, но отображается с номером или маркером), run-in (блочный элемент, например заголовок, начинает входить в следующий элемент, например абзац), а также ряд ролей отображения, связанных с таблицами.
Но изменение представления HTML-элемента средствами CSS не изменяет определения этого элемента как блочного или внутристрочного в HTML. Свойство display можно применять для явного объявления ролей отображения для отдельных элементов. Знать роль отображения элементов полезно для понимания блоковой модели CSS.