Wiki-учебник по веб-технологиям: HTML/ФорматированиеТекстаHTML2 ...

Главная | |
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 определены следующие аттрибуты.

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

Для тегов <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 (определяет стиль нумерации
пунктов). Может иметь значения:


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


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

Теги списков

ТегОписание
<ol>Определяет упорядоченный список
<ul>Определяет неупорядоченный список
<li>Определяет элемент списка
<dl>Определяет список определений
<dt>Определяет термин определения
<dd>Определяет описание определения
<dir>Не рекомендуется. Используйте вместо этого <ul>
<menu>Не рекомендуется. Используйте вместо этого <ul>

1 2