Таблицы
Для создания таблиц в HTML используются следующие тэги: <table> - открывает таблицу, </table> - закрывает ее, <tr> и </tr> соответственно открывает и закрывает строку таблицы и <td> и </td> то же самое делают с колонкой таблицы. Попробуем создать простую таблицу - две строки и две колонки. Текст примера:
<HTML>
<head>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</HTML>
Заметно, что числа вроде бы расположены в табличном порядке, но границ таблицы не видно. Рамка таблицы добавляется параметром border=... в тэг <table> , ширину и высоту таблицы можно задать там же способом, которым задается размер картинки. Числовое значение параметра border определяет толщину рамки. Однако к делу - смотрим пример:
<HTML>
<head>
</head>
<body>
<table border=1 width=240 height=180>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</HTML>
Сейчас получилось что-то больше похожее на привычную таблицу. В таблице можно задать цвет рамки параметром bordercolor:
<HTML>
<head>
</head>
<body>
<table border=2 bordercolor=#00fff0 width=240 height=180>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</HTML>
Это выглядит так, а если вставить этот параметр в тэг <td> (с другим цветом, естественно) то можно выделить ячейку таблицы:
<HTML>
<head>
</head>
<body>
<table border=2 bordercolor=#00fff0 width=240 height=180>
<tr>
<td bordercolor=#ff0000>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</HTML>
Посмотрим результат. Параметром bgcolor, вставленным в соответствующий тэг, раскрашивается или вся таблица:
<HTML>
<head>
</head>
<body>
<table border=2 bordercolor=#00fff0 width=240 height=180 bgcolor=#ffff00>
<tr>
<td >1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</HTML>
Все ячейки - желтые, или отдельные ячейки:
<HTML>
<head>
</head>
<body>
<table border=2 bordercolor=#00fff0 width=240 height=180 bgcolor=#ffff00>
<tr>
<td>1</td>
<td bgcolor=#afbfff>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</HTML>
Теперь одна ячейка другого цвета. И, наконец, bgcolor можно вставлять в тэг строки <tr>. Поэкспериментируйте и посмотрите, что получится.
Текст в ячейках выравнивается так же, как и обычно (помните, как?), только выравнивание прописывается для каждой ячейки:
<HTML>
<head>
</head>
<body>
<table border=2 width=240 height=180>
<tr>
<td align=center>1</td>
<td>2</td>
</tr>
<tr>
<td align=right>3</td>
<td>4</td>
</tr>
</table>
</body>
</HTML>
Вот как это выглядит. Если параметры выравнивания записать в тэг <table>, то выравниваться будет уже вся таблица по отношению к краям страницы. Пример:
<HTML>
<head>
</head>
<body>
<table border=2 width=240 height=180 align=center>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</HTML>
И результат. Ячейки таблицы можно объединять с помощью colspan=… (объединяет ячейки в строке) rowspan=… (объединяет ячейки в колонке), вместо многоточия ставится число объединяемых ячеек. Важно помнить, что эти параметры прописываются только в тэге <td>. Начнем. Исходная таблица:
<HTML>
<head>
</head>
<body>
<table border=1 width=360 height=120>
<tr>
<td >1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</HTML>
Выглядит так. Ячейки пронумерованы, чтобы было понятно, как это произойдет. Объединим ячейки 1 и 2 в строке и 6 и 9 в колонке. Не забудем удалить в исходном коде ячейки 2 и 9. Текст примера:
<HTML>
<head>
</head>
<body>
<table border=1 width=360 height=120>
<tr>
<td colspan=2 >1</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan=2>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</HTML>
И то, что получилось. Расстояние от рамки ячейки до ее содержимого можно задать параметром cellpadding=..., вместо многоточия - расстояние в пикселях, сразу и по вертикали и по горизонтали, отдельно задать его нельзя, соответственно пример, причем, обратите внимание, из таблицы убраны для наглядности параметры длины и ширины:
<HTML>
<head>
</head>
<body>
<table border=1 cellpadding=10>
<tr>
<td colspan=2 >1</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan=2>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</HTML>
Посмотрим. Параметром cellspacing=... задается расстояние между ячейками (принцип точно такой же, как и предыдущем примере):
<HTML>
<head>
</head>
<body>
<table border=1 cellspacing=10>
<tr>
<td colspan=2 >1</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan=2>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</HTML>
Заметна разница? И, наконец, ширину и высоту таблицы можно задавать не в пикселях, ка мы делали до этого, но и в процентах от ширины и высота окна WEB-обозревателя. Изменим последний пример:
<HTML>
<head>
</head>
<body>
<table border=1 cellspacing=10 width=80% height=60%>
<tr>
<td colspan=2 >1</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan=2>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</HTML>
и посмотрим, что стало с таблицей. Таблицы можно вкладывать одну в другую, для этого достаточно в ячейке одной таблицы прописать код другой.
На этом закончим нашу краткую экскурсию по HTML. Если приведенные примеры понятны, мы уже сможем создать собственную страницу. Как это сделать - здесь.