×
Traktatov.net » HTML, XHTML и CSS на 100% » Читать онлайн
Страница 33 из 156 Настройки


На рис. 3.8 показано, как рассмотренная таблица будет отображаться в окне браузера. У таблицы есть горизонтальные линии внешней и вертикальные линии внутренней границы, так как именно такие значения мы задали соответствующим атрибутам rules и frame.

Рис. 3.8.HTML-таблица с частичным отображением линий внешней и внутренней границ

3.5. Ширина и высота таблицы и ячеек

Ширина таблицы задается атрибутом width элемента TABLE. Значение можно задавать как в абсолютных единицах (width="2 5 0"), так и в относительных (width="80 %"). Например, задав значение ширины в 600 пикселов, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора. Если же ширина задается в процентах, то они высчитываются от ширины окна браузера или от ширины ячейки другой таблицы, в которую вставлена данная. То же самое можно делать и с высотой таблицы с помощью атрибута height.

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

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

На рис. 3.9 и 3.10 изображены две таблицы одинакового содержания, но разной ширины и высоты.

Рис. 3.9. Ширина таблицы равна 80 % от ширины окна браузера


Рис. 3.10. Ширина и высота таблицы равна 300 пикселам


Ширина первой таблицы равна 80 % от размера окна браузера, а первый столбец этой таблицы занимает 50 % от всей ширины таблицы. Высота первой строки равна 100 пикселам.

Вторая таблица квадратная, ширина стороны равна 300 пикселам. В листингах 3.4 и 3.5 приведены коды страниц, содержащих описанные таблицы.

Листинг 3.4. Код таблицы шириной 80 % от ширины окна браузера

Простая HTML-таблица

Ширина таблицы 80%
Заголовок 1Заголовок 2Заголовок 3
Ячейка 2x1 Ячейка 2x2 Ячейка 2x3
Ячейка 3x1 Ячейка 3x2 Ячейка 3x3


Листинг 3.5. Код таблицы шириной 300 пикселов

Простая HTML-таблица

Ширина таблицы 300 пикселов
Заголовок 1Заголовок 2Заголовок 3
Ячейка 2x1 Ячейка 2x2 Ячейка 2x3
Ячейка 3x1 Ячейка 3x2 Ячейка 3x3

3.6. Группировка строк и столбцов

В стандарте HTML 4 появились новые элементы для группировки (не объединения, а именно группировки) строк и столбцов таблицы в группы с общими свойствами.