1 2

Таблицы

Основным тегом для обозначения таблицы является <table>. Элемент TABLE представляет собой тег-контейнер, в котором размещается содержимое таблицы.

Построение таблицы осуществляется по строкам, для обозначения которых применяется контейнер TR. Внутри контейнера строк помещаются контейнеры для обозначения ячеек. Стандарт HTML определяет два типа контейнеров для обозначения ячеек <th> и <td>. Ячейка данных может содержать текст, изображения, списки, параграфы, формы, горизонтальные линейки, таблицы и т.д.

Примеры

Рассмотрим вышеизложенное на примерах различного вида таблиц.

<html>
<body>
<p>
Каждая таблица начинается с тега table.
Каждая строка таблицы начинается с тега tr.
Каждый элемент данных таблицы начинается с тега td.
</p>
<h1>Это пример простейшей таблицы, содержащей одну строку и одну ячейку.</h1>
<table border="1">
<tr>
<td>Одна строка и одна ячейка</td>
</tr>
</table>
<h1>Одна строка и три столбца:</h1>
<table border="1">
<tr>
<td> столбец 1</td>
<td> столбец 2</td>
<td> столбец 3</td>
</tr>
</table>
<h1>Две строки и три столбца:</h1>
<table border="1">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
</body>
</html>
<h1>Рамка таблицы</h1>
<html>
<body>
<h1>Обычная рамка:</h1>
<table border="1">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая </td>
<td>строка</td>
</tr>
</table>
<h1>Толстая рамка:</h1>
<table border="10">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая </td>
<td>строка</td>
</tr>
</table>
</body>
</html>

<table border="1">
<tr>
<td>строка 1, ячейка 1</td>
<td>строка 1, ячейка 2</td>
</tr>
<tr>
<td>строка 2, ячейка 1</td>
<td>строка 2, ячейка 2</td>
</tr>
</table>

Для тега table определены следующие аттрибуты.

align – определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию – left.
valign – должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.
border – определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.
cellpadding – определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
cellspacing – определяет расстояние (в пикселах) между границами соседних ячеек.
width – определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
height – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
bgcolor – определяет цвет фона ячеек таблицы. Задается либо RGB- значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
background – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

Ячейки таблицы без содержимого в большинстве браузеров выводятся не очень хорошо. Если необходимо сделать ячейку таблицы пустой, то разместите в ней неразрывный пробел

Для тегов <td> и <th> очень полезными являются атрибуты colspan и rowspan.

Первый показывает сколько ячеек надо объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным.

Продемонстрируем на примере.

<html>
<body>
<h4>Правильное применение colspan:</h4>
<table border="1">
<tr>
<td colspan="2">100</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Неправильное применение colspan:</h4>
<table border="1">
<tr>
<td colspan="2">100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Правильное применение rowspan:</h4>
<table border="1">
<tr>
<td rowspan="2">100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Неправильное применение rowspan:</h4>
<table border="1">
<tr>
<td rowspan="2">100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>

Списки

HTML поддерживает упорядоченные списки, неупорядоченные списки, и списки определений. Отличаются эти разновидности списков лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.

Маркированные (Неупорядоченные) списки

Элементы списка маркируются с помощью специальных знаков (обычно небольшой черный круг).

Маркированный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

<ul>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ul>

Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

Нумерованные (Упорядоченные) списки

Упорядоченный список также является списком элементов. Элементы списка маркируются с помощью чисел или букв.

Упорядоченный список начинается с тега<ol>. Каждый элемент списка начинается с тега <li>. У тега <ol> может быть два атрибута start (определяет первое число, с которого начинается нумерация пунктов) и type (определяет стиль нумерации
пунктов). Может иметь значения:

“A” – заглавные буквы A, B, C ...
“a” – строчные буквы a, b, c ...
“I” – большие римские числа I, II, III ...
“i” – маленькие римские числа i, ii, iii ...
“1” – арабские числа 1, 2, 3 ...

<ol>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ol>
</body>
</html>