Значением атрибута rowspan выступает число
строк, на которые растягивается данная ячейка вниз по вертикали, начиная со
своего «законного», предопределенного разметкой положения. Значением
атрибута coispan служит, соответственно, количество столбцов, на которые
данная ячейка растягивается вправо по горизонтали. Одна и та же ячейка
таблицы может быть растянута как в вертикальном, так и в горизонтальном
направлениях.
Необходимо только следить за тем, чтобы в разметке тех строк, на которые
распространяет свое влияние растянутая ячейка, было определено
правильное число ячеек.
Например, если мы растягиваем какую бы то ни было ячейку на две строки
по вертикали, то ячейки в следующей строке под влиянием «внешнего
вторжения» будут вытесняться вправо. Поэтому общее количество ячеек в строке,
на которую распространяет влияние растянутая по вертикали ячейка,
формально принадлежащая другой, расположенной выше строке, должно
уменьшиться на единицу по сравнению со случаем правильной таблицы.
Сказанное демонстрируется следующим примером.
^> «http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd»>
0бъединение H4eeK
««citable {
border-collapse: collapse;
border: solid 2px #cOO;
}
tr {
vertical-align: top;
}
td {
padding: Opx 5px;
border: solid lpx #cOO;
background: #fffOcc;
}
262 Часть II. Применение веб-технологий стороны клиента для создания сайтов
—>
‘| TexHCJiorHH | rofl утверждения в качестве рекомендации W3C | |
| H3biKH pa3MeTKH | HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 | |
| XHTML 1. K/td> | 200K/td> | |
| XHTML 2.0 | Oблaдaeт статусом Working Draft | |
| KacKa,iiHbie листы cтилeй | CSS2 | 1998 |
| CSS2. K/td> | Oблaдaeт статусом Candidate Recoramendation | |
Внешний вид таблицы, описанной в листинге 5.5, представлен на рис. 5.6.
Глава 5. Таблицы в HTML
263
Рис. 5.6. Отображение таблицы, использующей возможности объединения ячеек
Очевидно, в этой таблице три столбца. Но ячейка со словом «Технологии» в
первой строке растянута на два столбца, поэтому в первой строке определено
две ячейки, а не три.
Первая ячейка второй строки, содержащая надпись «Языки разметки»,
растянута по вертикали на четыре строки. Поэтому в трех нижеследующих строках
опять же по две, а не по три ячейки. Аналогичный случай наблюдается и в
ситуации с первой ячейкой шестой строки, содержащей слова «Каскадные
листы стилей» — она растянута на две строки, и оттого в седьмой строке
снова не три, а две ячейки. Если в той или иной строке окажется лишняя ячейка,
то самая правая ячейка такой строки будет отображаться за пределами
таблицы.
В вышеприведенном коде встречается CSS-свойство vertical-align. Его
употребление со значением top предписывает браузеру выровнять
содержимое ячеек таблицы по их верхнему краю. В модели визуального
форматирования блоков данное свойство работает несколько иначе, в связи с чем
используется на практике значительно реже.
Заголовки таблиц, заголовочные ячейки,
группировка столбцов и строк
Помимо тегов ,
полагается помещать сразу же после открывающего тега .
264 Часть II. Применение веб-технологий стороны клиента для создания сайтов
По умолчанию этот заголовок располагается сверху от таблицы и выровнен
по центру. Для изменения положения заголовка относительно таблицы
можно использовать CSS-свойство caption-side с допустимыми значениями top,
bottom, left и right, предписывающими располагать содержимое заголовка
таблицы соответственно сверху, снизу, слева или справа от последней. Из тех
браузеров, которыми мне доводилось пользоваться, данное свойство
поддерживает лишь Firefox, но даже IE не мешает нам применять для элемента
tion>. . .
такие свойства, как, скажем, text-align ИЛИ margin, ЧТО
позволяет разнообразить оформление и— хотя бы в ограниченных
пределах — расположение заголовка, пускай бы даже его нельзя было «оторвать»
от верхнего края таблицы…
В ряде случаев (например, в «шапке» таблицы) предпочтительнее вместо тега
|
, HTML предусматривает ряд других, более
специальных и поэтому реже используемых на практике элементов, предназначенных для структурирования данных в таблицах. Таблице может быть назначен заголовок при помощи тега |
использовать тег |
, который определяет не рядовую, а заголовочную
ячейку. |
|---|---|---|
|
5th Фев 2011
|
Теги:
|
