HTML уроки, 4 часть: таблицы, списки

HTML-таблицы

Таблицы в HTML задаются тегами <table> и </table> – соответственно, начало и конец. Таблицы разделяют на ряды: <tr> и </tr>, а каждая линия может быть разделена на отдельные клетки, описанные  <td> и </td>. Сама ячейка может содержать текст, изображения, списки или даже другие таблицы. Описание таблицы происходит построчно, каждая строка и ячейки описываются одна за другой слева направо.

Вот и пример:

<table border="2">
<tr>
<td> имя</td>
<td> фамилия </td>
</tr>
<tr>
<td> Иван </td>
<td> Иванов </td>
</tr>
</table>

В браузере таблица будет выглядеть так:

Рамки таблицы

Для того, чтобы показать рамки таблицы, вы должны указать это с помощью border=”a” в тег <table>, но вместо “а” поставить нужную толщину рамки в пикселях. Если вы не хотите, чтобы у таблицы были рамки, просто не используйте border – по умолчанию таблицы отображаются без рамок.

Заголовки в таблице

Названия, как часть самой таблицы можно установить между <th> и </th>, а заголовок самой таблицы указывается между <caption> и </caption>. Браузер автоматически выделяет заголовки, заданные в <th> – как правило, жирным шрифтом.

<table border="2">
<caption>Визитка</caption>
<tr>
<th> имя</th>
<th> фамилия </th>
</tr>
<tr>
<td> Иван    </td>
<td> Иванов </td>
</tr>
</table>

В браузере таблица будет выглядеть так:

Ячейки, которые занимают больше одного ряда или столбца

Если вы хотите, чтобы конкретная ячейка занимала два столбца, укажите это с помощью colspan = “2”. Соответственно, чтобы занять ячейку с двумя строками, необходимо написать rowspan = “2” в тег td или th, с помощью которого вы создаете ячейку.

Форматирование ячеек

Расстояние от рамки ячейки до ее содержимого задается с помощью cellpadding = “a”, где “a” – это число в пикселях. Расстояние от рамки таблицы до самих ячеек обозначается как cellspacing = “a”. Оба расстояния должны быть указаны в исходной <table>.

Добавить цвет фона

Чтобы закрасить всю таблицу одним цветом, используйте bgcolor = “color-name” в <table>, используя одно из допустимых имен цветов в HTML вместо имени цвета. Точно также цвет задается для отдельной ячейки, разница только в месте определения: вместо <table> – в <td>. Вместо цвета фона вы можете поместить фоновое изображение: background = “filename.jpg”, конечно, вместо имени filename.jpg укажите имя изображения, которое вы хотите в качестве фона.

HTML списки

В HTML вы можете использовать три типа списков:

• неупорядоченный: отдельные элементы списка выделены одним и тем же графическим символом: круг, квадрат, галочка и т. д. – все, что вы укажете;
• упорядоченный: элементам в списке присваиваются свои номера: римские, арабские цифры, латинские строчные или прописные буквы в алфавитном порядке и т. д.
• определений: с помощью этого типа списков вы можете перечислять элементы и определять их (определения).

Давайте рассмотрим более подробно каждый из трех типов списков.

Неупорядоченные списки

Они обозначены тегом <ul> в начале и </ ul> в конце. Отдельные элементы в списке отмечены тегами <li> и </ li>. Вот пример неупорядоченного списка:

<ul>
 <li>Список 1</li>
 <li>Список 2</li>
 <li>Список 3</li>
 <li>Список 4</li>
 <li>Список 5</li>
 </ul>

На экране браузера этот список будет выглядеть так:

• Список 1
• Список 2
• Список 3
• Список 4
• Список 5

Упорядоченные списки

С этими списками перечисленным пунктам присваивается номер. Синтаксис практически идентичен синтаксису неупорядоченных списков: единственное отличие состоит в том, что <ol> и </ ol> используются вместо <ul> и </ ul> для начала и окончания списка. Вот пример:

<ol>
<li> Список 1 </li>
<li> Список 2 </li>
<li> Список 3 </li>
</ol>

В браузере список будет выглядеть так:

1. Список 1
2. Список 2
3. Список 3

Список определений:

Эти списки устанавливаются с помощью <dl> и </ dl> соответственно для начала и конца списка. Ниже приведен список понятий (между тегами <dt> и </ dt>) и их определения (между тегами <dd> и </ dd>). Список определений может выглядеть так:

<dl>
<dt> Вино </dt>
<dd> жидкость, которая питается от героев</dd>
<dt> Молоко</dt>
<dd> временный заменитель вина; течет из фонтанов только в присутствии мёда</dd>
</dl>

Браузер автоматически сделает отступ для определений, поэтому список будет выглядеть так:

Вино

жидкость, которая питается от героев

Молоко

временный заменитель вина; течет из фонтанов только в присутствии мёда

В дополнение к способам изменения стилей списка, перечисленным выше, вы также можете воспользоваться гораздо более богатыми возможностями CSS. Вы можете прочитать больше о CSS в этом руководстве.

Читайте далее: HTML уроки, 5 часть: формы