Оформляем строки (tr) и ячейки (td)
Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки. У строк можно использовать три параметра:
align - выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center),
valign - выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle),
bgcolor - задает цвет строки.
Посмотрим на примере:
<html>
<head>
<title>html tr</title>
</head>
<body>
<table width="300" bgcolor="plum" border="1"
align="center" cellspacing="0" cellpadding="10">
<caption>Название таблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr align="center" valign="middle" bgcolor="yellow">
<td>
11 Текст во всех ячейках этой строки
центрирован по центру как по вертикали,
так и по горизонтали
</td>
<td>12</td>
<td>13</td>
</tr>
<tr align="left" valign="bottom">
<td>
21 Здесь текст прижат к левому краю
по горизонтали и книзу - по вертикали
</td>
<td>22</td>
<td>23</td>
</tr>
<tr align="right" valign="top" bgcolor="yellow">
<td>
31 Текст во всех ячейках этой строки
прижат по горизонтали к правому краю,
по вертикали - кверху
</td>
<td>32 </td>
<td>33</td>
</tr>
</table>
</body>
</html>
Результат:
Эти же параметры можно применять и к отдельным ячейкам, т.е. к любому тегу <td>, действие будет распространяться только на саму ячейку. Например, в предыдущем коде добавьте в любой тег <td> параметр bgcolor="red".
<td bgcolor="red">
21 Здесь текст прижат к левому краю
по горизонтали и книзу - по вертикали
</td>
Результат:
Но к ячейкам можно применять еще два параметра:
width - задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина таблицы),
height - задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.
Например, добавим в наш код, в теги <th> эти параметры
<tr>
<th width="50%" height="50">1</th>
<th width="30%">2</th>
<th width="20%">3</th>
</tr>
Результат:
Следует отметить, если не задавать ширину и высоту, то таблица будет формироваться по содержимому (так было в предыдущих примерах). На этом урок закончен, потренируйтесь создавать и оформлять таблицы, эти умения понадобятся вам на следующем уроке, где мы будем создавать таблицы сложных структур.
Атрибуты таблиц
Сейчас я перечислю все, что можно делать с таблицами! Я перечислю атрибуты, которые можно поместить в тег TABLE. Но нужно иметь в виду, что некоторые атрибуты срабатывают не во всех браузерах. Такие атрибуты я помечу звездочкой.
align выравнивает таблицу по левому (left) или правому (right) краю |
<TABLE align=left border=1> |
|
|
||
<TABLE align=right border=1> |
|
|
|||
(*) background указывает изображение, которым заполнится фон таблицы |
<TABLE background="fon.jpg"> |
|
|
||
bgcolor цвет фона таблицы |
<TABLE bgcolor=blue> <TABLE bgcolor=#3300CC> |
|
|
||
border ширина рамки в пикселах |
<TABLE border=7> |
|
|
||
(*) bordercolor цвет рамки для всей таблицы |
<TABLE bordercolor=blue border=2> |
|
|
||
cellpadding свободное пространство вокруг содержимого каждой ячейки |
<TABLE cellpadding=10 border=1> |
|
|
||
cellspacing свободное пространство между ячейками |
<TABLE cellspacing=15 border=1> |
|
|
||
(*) height устанавливает высоту таблицы в пикселах |
<TABLE height=100 bgcolor=yellow border=1> |
|
|
||
(*) hspace промежуток в пикселах от таблицы слева и справа |
<TABLE hspace=15 border=5> |
|
|
||
(*) nowrap Запрещает перенос слов в ячейке |
<TABLE nowrap> |
|
|
||
vspace оставляет промежуток сверху и снизу от таблицы в пикселах |
<TABLE vspace=10 border=1 bgcolor=aqua> |
|
|
||
width ширина таблицы в пикселах или в процентах |
<TABLE width=200 bgcolor=red border=1> |
|
|
Что ж, я думаю, вы поняли, что таблиц бояться не нужно. Пусть они вас боятся! А сейчас мы займемся размножением наших ячеек. Не все ж носиться с одноячеистой таблицей! Хотя к ней мы еще вернемся и не раз.