Создание таблиц в HTML

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали как вставлять ссылки и изображения в html. В этой статье я хочу рассказать о достаточно важной теме — это создание таблиц в HTML.
Практически на любом сайте можно встретить HTML-таблицы. Таблицы позволяют нам расположить элементы так, как мы считаем нужным. Сразу перейдём к делу, напишем небольшой код и разберем его:

<html>
<head>
<meta charset="utf-8"/>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table>
	<tr><td>(1,1)</td><td>(1,2)</td></tr>
	<tr><td>(2,1)</td><td>(2,2)</td></tr>
</table>
</body>
</html>

Таблица создаётся с помощью тега <table> и заканчивается тегом </table>.

Вообще принцип создания таблиц следующий: сначала пишется тег <table>, затем добавляются теги строк <tr></tr;, в зависимости от того, сколько нам нужно строк. Затем внутри тегов <tr> и </tr> создаются ячейки таблицы с помощью тегов <td> и </td>. В конце не забываем закрывать нашу таблицу тегом </table>. Обязательно наберите этот код и посмотрите, как выглядит наша таблица на текущий момент. Как-то не совсем похоже на таблицу.

Давайте сейчас разберем, какие атрибуты есть у тегов <table>, <tr> и <td>. Как всегда на примере:

<html>
<head>
<meta charset="utf-8"/>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table border="1px" width="50%" height="300px">
	<tr height="20px"><td width="200px">(1,1)</td><td>(1,2)</td></tr>
	<tr><td align="right">(2,1)</td><td valign="center" align="center">(2,2)</td></tr>
	<tr><td colspan="2"></td></tr>
</table>
</body>
</html>

У тега <table> есть атрибут border, который отвечает за рамку таблицы (без этого атрибута таблица совсем и не похожа на таблицу). Также есть атрибуты width и height, которые соответственно задают ширину и высоту таблицы. Тут все просто: можно задавать либо в относительных единицах (%), либо в абсолютных (в «px»). В нашем случае написано, что ширина таблица равна 50% — это означает, что она всегда будет занимать половину ширины от родительского элемента, в нашем случае — это окно браузера.

Также у таблицы есть и другие атрибуты:

"align" — выравнивание таблицы относительно страницы
"cellspacing" — задание отступов между ячейками
"cellpadding" — задание расстояния между контентом и рамкой ячейки
"bgcolor" — задание цвета фона таблицы
"bordercolor" — задание цвета рамки для таблицы

У тега строки <tr> есть всего один атрибут — это высота строки height. Можно также задавать либо в относительных единицах, либо в абсолютных.

Также много атрибутов имеет тег <td>, отвечающий за ячейку таблицы. Рассмотрим их более подробно:

1) Атрибут "width". Данный атрибут отвечает за ширину ячейки, атрибута height у тега <td> нет.

2) Атрибут "colspan". Значение этого атрибута отвечает за количество столбцов, которое будет занимать данная ячейка. Если поставить colspan = "2" (как в примере), то ячейка будет занимать 2 столбца.

3) Атрибут "rowspan". Значение этого атрибута отвечает за количество строк, которое будет занимать данная ячейка.

4) Атрибут "align". Значение этого атрибута отвечает за горизонтальное выравнивание элементов внутри ячейки. По умолчанию стоит выравнивание по левому краю. У данного атрибута есть 3 значения: left (выравнивание по левому краю), right (выравнивание по правому краю), center (выравнивание по центру).

5) Атрибут "valign". Значение этого атрибута отвечает за вертикальное выравнивание элементов внутри ячейки. По умолчанию стоит выравнивание по центру. У данного атрибута есть 3 значения: top (выравнивание по верхнему краю), center (или middle) (выравнивание по центру), bottom (выравнивание по нижнему краю).

Как видите ничего сложного здесь нет, самый важный момент при освоении таблиц — это практика. Поэтому вот вам домашнее задание:

Необходимо создать такую таблицу, как на рисунке. Затем добавить в ячейки таблицы не текст, как мы делали в этом уроке, а например картинку. В другие ячейки необходимо добавить ссылку, упорядоченный список, неупорядоченный список.