Веб-инструмент
Веб-мастерская
Тег <caption> позволяет задать заголовок таблицы. Он имеет единственный параметр align. Этот параметр принимает одно из двух значений:
<caption align="top">Заголовок таблицы</caption>
<caption align="bottom">Заголовок таблицы</caption>
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовок таблицы</title>
</head>
<body>
<table width="200" border="1">
<caption align="top">Заголовок таблицы</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<br>
<table width="200" border="1">
<caption align="bottom">Заголовок таблицы</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
С помощью парного тега <tr> описываются стоки таблицы. Он имеет следующие параметры:
<tr align="left">
<tr align="right">
<tr align="center">
<tr align="justify">
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Строки таблицы</title>
</head>
<body>
<table width="200" border="1">
<tr align="left">
<td>1</td>
<td>2</td>
</tr>
<tr align="right">
<td>1</td>
<td>2</td>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
</tr>
<tr align="justify">
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
<tr valign="top">
<tr valign="middle">
<tr valign="bottom">
<tr valign="baseline">
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Строки таблицы</title>
</head>
<body>
<table width="200" height="250" border="1">
<tr valign="top">
<td>1</td>
<td>2</td>
</tr>
<tr valign="middle">
<td>1</td>
<td>2</td>
</tr>
<tr valign="bottom">
<td>1</td>
<td>2</td>
</tr>
<tr valign="baseline">
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Строки таблицы</title>
</head>
<body>
<table width="200" height="250" border="1">
<tr valign="top" bgcolor="#FF0000">
<td>1</td>
<td>2</td>
</tr>
<tr valign="middle" bgcolor="#00FF00">
<td>1</td>
<td>2</td>
</tr>
<tr valign="bottom" bgcolor="#0000FF">
<td>1</td>
<td>2</td>
</tr>
<tr valign="baseline" bgcolor="#FFFF00">
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
С помощью тега <td> описываются ячейки таблицы. Тег <td> имеет следующие параметры:
<td align="left">
<td align="right">
<td align="center">
<td align="justify">
<td valign="top">
<td valign="middle">
<td valign="bottom">
<td valign="baseline">
<td width="100">
<td width="30%">
<td height="100">
<td height="20%">
<td bgcolor="#FF0000">
<td bordercolor="#0000FF">
<td bordercolordark="#FF0000">
<td bordercolorlight="#0000FF">
<td background="images/fon1.png">
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ячейки таблицы</title>
</head>
<body>
<table width="600" border="1" >
<tr >
<td width="100" height="100" align="left" valign="top" bgcolor="#CCCC66">1</td>
<td width="500" bgcolor="#FF0000" align="right" valign="bottom">2</td>
</tr>
</table>
<br>
<table width="100%" border="1">
<tr>
<td width="30%" height="50%"align="center" valign="baseline" bgcolor="#00FF00">1</td>
<td width="70%" bordercolor="#0000FF" valign="middle">2</td>
</tr>
</table>
<br>
<table width="100%" border="1">
<tr>
<td width="50%" height="100" valign="bottom" bordercolor="#FF0000">1</td>
<td width="50% "background="../../../images/fon1.png" bordercolor="#00CC33">2</td>
</tr>
<tr >
<td height="50" bgcolor="#FF00FF">1</td>
<td valign="baseline" bordercolordark="#FF0000" bordercolorlight="#0000FF">2</td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Объединение ячеек</title>
</head>
<body>
<table width="200" border="1">
<tr>
<td align="center" colspan="2">1 и 2 объединены</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">4</td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Здесь мы заменили строку
<td align="center">1</td>
на
<td align="center" colspan="2">1 и 2 объединены</td>
при этом строка
<td align="center">2</td>
была удалена.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Объединение ячеек</title>
</head>
<body>
<table width="200" border="1">
<tr>
<td align="center" rowspan="2">1 и 3 объединены</td>
<td align="center">2</td>
</tr>
<tr>
<td align="center">4</td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Здесь строка
<td align="center">1</td>
заменена на
<td align="center" rowspan="2">1 и 3 объединены</td>
при этом строка
<td align="center">3</td>
была удалена.
Похожие материалы по теме: Вставляем таблицу в HTML
Обсудить на форуме