|
Урок №10
Таблицы (продолжение).
Атрибуты для табличных строк <tr>:
- align=left | center | right | justify | char Выравнивание по горизонтали. Общий атрибут align
в теге <table> определяет выравнивание содержимого всех ячеек. Для определения расположения данных в конкретном
ряду таблицы этот атрибут используют в дескрипторе <tr>, где
- left - выравнивание по левому краю,
- center - выравнивание по центру,
- right - выравнивание по правому краю,
- justify - выравнивание по левому и по правому краю,
- char - выравнивание по указанному символу.
bgcolor="Цвет" Цвет фона.
bordercolor="Цвет" Цвет рамки.
bordercolordark="Цвет" Темный цвет рамки.
bordercolorlight="Цвет" Светлый цвет рамки.
char="символ" Этот атрибут задает символ, по которому выравниваются данные в ячейке (например,
по десятичной запятой).
valign=top | middle | bottom | baseline Выравнивание содержимого ячейки по вертикали.
- top - выравнивание по верхнему краю.
- middle - центрирует по вертикали (это значение атрибута испльзуется по умолчанию).
- bottom - выравнивание по нижнему краю.
- baseline - выравнимание по самой верхней текстовой строке.
Если вы прошли первые уроки, то указанная выше информация не является очень трудной и новой.
Рассмотрим примеры.
Используем сразу несколько атрибутов в строках таблицы.
<table border=1>
<tr bgcolor=blue> <th>Заголовок №1</th> <th>Заголовок №2</th> <th>Заголовок №3</th> </tr>
<tr bordercolor=red> <td>Ячейка 1-2</td> <td>Ячейка 2-2</td> <td>Ячейка 2-3</td> </tr>
<tr valign=top> <td>Ячейка 1-3<br>Выравниваем содержимое по верхнему краю.</td> <td>Ячейка 2-3</td> <td>Ячейка 3-3</td> </tr>
<tr valign=bottom> <td>Ячейка 1-4<br>Выравниваем содержимое по нижнему краю.</td> <td>Ячейка 2-4</td> <td>Ячейка 3-4</td> </tr>
</table>
Получится следующее:
Заголовок №1 | Заголовок №2 | Заголовок №3 |
Ячейка 1-2 | Ячейка 2-2 | Ячейка 2-3 |
Ячейка 1-3 Выравниваем содержимое по верхнему краю. | Ячейка 2-3 | Ячейка 3-3 |
Ячейка 1-4 Выравниваем содержимое по нижнему краю. | Ячейка 2-4 | Ячейка 3-4 |
Второй пример
<table border=2>
<tr bordercolorlight=navy align=right> <th>Заголовок №1</th> <th>Заголовок №2</th> <th>Заголовок №3</th> </tr>
<tr bordercolor=green align=center> <td>Ячейка 1-2</td> <td>Ячейка 2-2</td> <td>Ячейка 2-3</td> </tr>
<tr bordercolordark=red> <td>Ячейка 1-3</td> <td>Ячейка 2-3</td> <td>Ячейка 3-3</td> </tr>
</table>
Получится следующее:
Заголовок №1 | Заголовок №2 | Заголовок №3 |
Ячейка 1-2 | Ячейка 2-2 | Ячейка 2-3 |
Ячейка 1-3 | Ячейка 2-3 | Ячейка 3-3 |
Напишите свой собственный HTML-документ, применяя все уже известные теги (дескрипторы).
Сохраните этот файл, как 10.html.
|