|
Урок № 11
Таблицы (заключение)
Главные атрибуты ячеек заголовков и данных
Содержимое ячеек заголовков <th> автоматически выравнивается по центру и выделяется полужирным
шрифтом.
Содержимое ячеек данных <td> по умолчанию выравнивается по левому краю.
Атрибуты для тегов (дескрипторов) <th> и <td>:
- bgcolor="цвет" - цвет фона ячейки.
- bordercolor="цвет" - цвет рамки ячейки.
- bordercolordark="цвет" - цвет темной рамки ячейки.
- bordercolorlight="цвет" - цвет светлой рамки ячейки.
- align=left | center | right | justify - выравнивание содержимого ячейки по горизонтали (по левому карю |
по центру | по правому краю | по левому и правому краю).
- vlign=top | middle | bottom | baseline - выравнивает содержимое ячейки по вертикали (соответственно:
по верхнему краю | по середине | по нижнему краю | по самой верхней строке в ячейке).
Атрибуты, указанные выше, не должны вызывать проблемы. Они употребляются так же, как и для тега
<table>.
- height=n - меняет высоту строки таблицы, где n - величина в пикселях. Так как все ячейки в строке имеют одинаковую
высоту, то высоту этим атрибутом следует задавать в первой ячейке строки.
- width=n | n% - меняет ширину ячейки в столбце таблицы, где n - задается в пикселях, а n% - процент ширины всей
таблицы. Так же, как и для высоты ячейки, лучше всего менять ширину в одной первой ячейки в столбце.
Пример:
<table border=1 width=100%>
<tr> <th width=60%>Заголовок №1</th> <th>Заголовок №2</th> <th>Заголовок №3</th> </tr>
<tr> <td>Ячейка 1-1</td> <td>Ячейка 2-1</td> <td>Ячейка 2-1</td> </tr>
<tr> <td>Ячейка 1-2</td> <td>Ячейка 2-2</td> <td>Ячейка 3-2</td> </tr>
</table>
Результат:
Заголовок №1 | Заголовок №2 | Заголовок №3 |
Ячейка 1-1 | Ячейка 2-1 | Ячейка 2-1 |
Ячейка 1-2 | Ячейка 2-2 | Ячейка 3-2 |
- colspan=n - ширина ячейки, выраженная в столбцах.
- rowspan=n - высота ячейки, выраженная в строках.
Примеры.
<table border=1 width=100%>
<tr> <th colspan=3>Заголовок №1</th></tr>
<tr> <td>Ячейка 1-1</td> <td colspan=2>Ячейка 2-1</td></tr>
<tr> <td>Ячейка 1-2</td> <td>Ячейка 2-2</td> <td>Ячейка 3-2</td></tr>
</table>
Результат.
Заголовок №1 |
Ячейка 1-1 | Ячейка 2-1 |
Ячейка 1-2 | Ячейка 2-2 | Ячейка 3-2 |
Пример.
<table border=1 width=100%>
<tr> <th rowspan=3>Заголовок №1</th></tr>
<tr> <td>Ячейка 1-1</td> <td>Ячейка 2-1</td> <td>Ячейка 2-1</td> </tr>
<tr> <td>Ячейка 1-2</td> <td>Ячейка 2-2</td> <td>Ячейка 3-2</td> </tr>
</table>
Результат.
Заголовок №1 |
Ячейка 1-1 | Ячейка 2-1 | Ячейка 2-1 |
Ячейка 1-2 | Ячейка 2-2 | Ячейка 3-2 |
|