2.2 Вертикальное выравнивание
Атрибут valign. Он используется внутри тегов <tr>, <th> и <td> и определяет
вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom
(внизу), middle (по середине).
2.3 Размеры таблицы и ячеек
В теге <table> атрибут width задает ширину таблицы n, height — ее высоту m:
<table width=n height=m>.
Если размер таблицы не задан, то он будет минимально возможным для того, чтобы
уместить ее содержимое. Если текста много, то когда ширина таблицы достигнет границ
программы просмотра, браузер перенесет текст на следующую строку.
В теге <td> атрибут width задает ширину ячейки n, height — высоту m:
<td width=n height= m >
Размеры можно задавать как в абсолютных значениях (пикселях), так и относительных
(процентах). Для того чтобы вид страницы не так сильно зависел от размеров окна браузера,
принято размеры задавать в процентах.
5
|
|
|||
|
||||
|
|
|||
|
|
|
||
3. Объединение (слияние) ячеек
Атрибут colspan указывает, какое количество ячеек будет объединено по горизонтали
для указанной ячейки. По умолчанию равен 1.
Атрибут rowspan указывает, какое количество ячеек будет объединено по вертикали для
указанной ячейки. По умолчанию равен 1.
Умелое управление атрибутами colspan и rowspan позволяет создавать сколь угодно
сложные таблицы.
Рассмотрим на примере алгоритм их создания.
Запишем html-код, описывающий таблицу вида:
Продлим пунктиром все линии этой таблицы до ее краёв. Получим таблицу из четырех строк
и пяти столбцов.
Теперь начинаем писать код. Сначала откроем таблицу и укажем толщину рамки:
<table border=1>
Каждая горизонтальная черта разделяет строки таблицы. Ячейка, обведенная сплошными
линиями, - это одна пара <td>…</td>. Количество столбцов в такой ячейке записываем в
colspan, а количество строк — в rowspan.
Если верхний левый угол ячейки находится не в рассматриваемой строке , то при записи
кода эту ячейку игнорируем .
Открываем первую строку:
<tr>
Первая ячейка не делится ни на столбцы, ни на строки. Значит, так и запишем:
<td>Ячейка 1</td>.
Вторая ячейка делится на 4 столбца и 2 строки, поэтому записываем:
<td colspan=4 rowspan=2>Ячейка 2</td>.
</tr>
Строка закрывается, т.к. в ней ячейки закончились.
Переходим ко второй строке:
<tr>
Первая её ячейка делится на три строки.
<td rowspan=3>Ячейка 3</td>
Вторую ячейку мы уже записали, так что ее игнорируем (ее верхний левый угол находится в
предыдущей строке).
Закрываем строку:
</tr>.
Переходим к третьей строке:
<tr>.
Первую ячейку игнорируем, вторая и третья делятся на две колонки. Пишем:
6
<td colspan=2>Ячейка 4</td>
<td colspan=2>Ячейка 5</td>
</tr>
Переходим к четвертой строке:
<tr>.
Первую ячейку игнорируем, вторая не делится, третья делится на две колонки, четвертая не
делится. Пишем:
<td>Ячейка 6</td>
<td colspan=2>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
</table>
Запишем весь код полностью, добавив центрирование таблицы и центрирование текста в
ячейках:
<table align=center border=1>
<tr align=center >
<td>Ячейка 1</td>
<td colspan=4 rowspan=2>Ячейка 2</td>
</tr>
<tr align=center >
<td rowspan=3>Ячейка 3</td>
</tr>
<tr align=center >
<td colspan=2>Ячейка 4</td>
<td colspan=2>Ячейка 5</td>
</tr>
<tr align=center >
<td>Ячейка 6</td>
<td colspan=2>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
</table>
В результате получим таблицу следующего вида (рис.2):
Рис.2. Объединение ячеек таблицы
С первого взгляда полученная таблица не соответствует задуманному виду (не видно
объединения ячеек первой и второй строки). Однако, объединение присутствует. Для
доказательства этого вставим в ячейку 2 картинку:
<table align=center border=1>
<tr align=center >
<td>Ячейка 1</td>
<td colspan=4 rowspan=2>
Ячейка 2
</td>
<img src=1.png align=middle>
</tr>
<tr align=center >
<td rowspan=3 align=center>Ячейка 3</td>
7
</tr>
<tr align=center >
<td colspan=2>Ячейка 4</td>
<td colspan=2>Ячейка 5</td>
</tr>
<tr align=center >
<td>Ячейка 6</td>
<td colspan=2>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
</table>
Получаем изображение, доказывающее, что объединение строк 1 и 2 произошло (рис.3):
Рис.3