Книга: HTML, XHTML и CSS на 100%

Положение и выравнивание заголовка

Положение и выравнивание заголовка

Первым в данном разделе рассмотрим свойство caption-side. Оно определяет положение поля заголовка относительно поля таблицы. Вот список его значений, указывающих, что поле заголовка располагается:

• top – над полем таблицы;

• bottom – ниже поля таблицы;

• left – слева от поля таблицы;

• right – справа от поля таблицы.

Заголовки, расположенные ниже или выше элемента TABLE, форматируются подобно элементам блока, находящимся ниже или выше таблицы, с тем исключением, что они:

• наследуют наследуемые свойства таблицы;

• не считаются блоками для элементов compact или run-in, которые могут предшествовать таблице.

Заголовок, находящийся ниже или выше поля таблицы, действует как блок для вычисления ширины; она вычисляется относительно ширины содержащего блока таблицы.

Для заголовка, располагающегося в правой или левой части поля таблицы, значение свойства width, отличное от auto, явным образом устанавливает ширину, в то время как значение auto предписывает браузеру выбрать ширину самому. Значение, выбранное браузером автоматически, может колебаться от «самого узкого блока» до «одной строки», поэтому рекомендуется не указывать значение auto для установки ширины левого и правого заголовка.

Для выравнивания содержимого заголовка по горизонтали внутри поля заголовка используйте свойство text-align. Для вертикального выравнивания левого и правого блока заголовка относительно блока таблицы используйте свойство vertical-align. В этом случае смысл имеют только значения top, middle и bottom. Все другие значения данного свойства будут трактоваться браузером как top.

Чтобы лучше разобраться с данным свойством, рассмотрим пример.

caption {

caption-side: bottom;

width: auto;

text-align: left

}

В этом примере свойство caption-side определяет расположение заголовка под таблицей. Заголовок может иметь ширину родительского элемента таблицы, а текст заголовка будет выровнен по левому краю.

Теперь рассмотрим более сложный пример.

body {

margin-left: 8em

}

table {

margin-left: auto;

margin-right: auto

}

caption {

caption-side: left;

margin-left: -8em;

width: 8em;

text-align: right;

vertical-align: bottom

}

В этом примере показан способ помещения заголовка в левое поле. Таблица выровнена по центру за счет задания для левого и правого полей значения auto, а весь блок с таблицей и заголовком сдвинут в левое поле на расстояние, равное ширине заголовка.

Оглавление книги