Веб-инструмент
Веб-мастерская
Основными средствами HTML для разметки страницы или композиции веб-страницы являются таблицы и фреймы. Ячейки таблицы создаются контейнерными тегами и могут содержать другие элементы: тексты, графику, элементы пользовательского интерфейса и даже другие таблицы. Некоторые или все разграничительные линии таблицы можно сделать невидимыми. Таким образом, таблицы можно рассматривать как средство позиционированияэлементов документа. Фреймы представляют собой объекты, во многом похожие на главное окно браузера. Клиентскую область браузера можно разбить на несколько прямоугольных областей (фреймов), загрузив в каждую из них свой HTML-документ.
В HTML-документе таблицы используются в следующих случаях:
Структура HTML-таблицы
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Структура HTML-таблицы</title>
</head>
<body>
<table width="400" align="center" border="1">
<caption>Заголовок таблицы</caption>
<tr>
<td align="center">1</td>
<td align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">4</td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Эта структура описывает таблицу 2х2 с заголовком. Таблица и значения в ячейках выровнены по центру. Все ячейки таблицы пронумерованы от 1 до 4. Таблица вставляется в HTML-документ с помощью парного тега <table>. Отдельная ячейка таблицы описывается с помощью тега <td>, а ряд ячеек — с помощью тега <tr>. Тег <caption> позволяет задать заголовок таблицы. Рассмотрим эти теги подробно.
Тег <table> имеен следующие параметры:
В окне веб-браузера это будет выглядеть ТАК.
В окне веб-браузера это будет выглядеть ТАК.
В окне веб-браузера это будет выглядеть ТАК.
В окне веб-браузера это будет выглядеть ТАК.
В окне веб-браузера это будет выглядеть ТАК.
Пример:
В окне веб-браузера это будет выглядеть ТАК.
Пример:
В окне веб-браузера это будет выглядеть ТАК.
Пример:
В окне веб-браузера это будет выглядеть ТАК.
Пример:
<body>
<table width="200" border="1" bordercolor="#0000FF">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<br>
<table width="200" border="1" bordercolor="red">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
<table border="1" bordercolordark="#00FF00">
<table border="1" bordercolorlight ="#0000FF">
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Цвет рамок</title>
</head>
<body>
<table width="200" border="1" bordercolordark="#FF0000" bordercolorlight="#0000FF">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Если в теге <table> указан параметр border без значения или сотличным от 0 значением, то по умолчанию таблица отображается с внешней рамкой, а каждая ячейка имеет собственную рамку. С помощью параметра frame можно дополнительно указать, какие части внешней рамки отображать, а какие нет. Параметр rules позволяет определить отображение внутренних разделительных линий между столбцами и строками таблицы.
Параметр frame может принимать следующие значения:
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выборочное отображение рамок рамок</title>
</head>
<body>
<table width="200" border="1" frame="box">
<tr>
<td> </td>
<td> </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" frame="above">
<tr>
<td> </td>
<td> </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" frame="below">
<tr>
<td> </td>
<td> </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" frame="hsides">
<tr>
<td> </td>
<td> </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" frame="vsides">
<tr>
<td> </td>
<td> </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" frame="lhs">
<tr>
<td> </td>
<td> </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" frame="rhs">
<tr>
<td> </td>
<td> </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" frame="void">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Атрибут rules может принимать следующие значения:
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выборочное отображение рамок рамок</title>
</head>
<body>
<table width="200" border="1" rules="all">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table width="200" border="1" rules="rows">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table width="200" border="1" rules="cols">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table width="200" border="1" rules="none">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Похожие материалы по теме: Вставляем таблицу в HTML
Обсудить на форуме