Таблицы онлайн урок.



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

Для создания таблицы в HTML используется минимум три тега - <table>, <td> и <tr>.

Тег <table> используется для создания самого контейнера для будущей таблицы. Фактически это рамка. Этот тег может принимать ряд необязательных атрибутов, которые рассмотрим ниже.

Тег <tr> используется для создания строки таблицы. Сразу отметим, что он не принимает никаких атрибутов.

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

Рассмотрим простой пример. Создадим таблицу 2х2, в ячейках которой запишем цифры 1, 2, 3, 4.



По умолчанию, границы таблицы и ячеек имеют нулевую толщину. Для того, чтоб изменить толщину границы, необходимо использовать атрибут border тега <table>. Этот атрибут может принимать натуральные значения или ноль (по умолчанию). Например:

<table border='2'>


Для управления отступами внутри таблицы относительно ячеек, используются атрибуты cellspacing и cellpadding тега <table>.

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

<table border='2' cellspacing='10'>


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

<table border='2' cellpadding='10'>


Также, в синтаксисе таблиц HTML предусмотрена возможность объединения ячеек по горизонтали, либо по вертикали.

Для объединения ячеек по горизонтали, используется атрибут colspan тега <td>. Этот атрибут принимает натуральное значение и оно должно соответствовать количеству ячеек, которые объединяются.

В примере ниже записана таблица 3х3, в которой объединены первые две ячейки во второй строке.

Отметим, что в данном случае, не следует прописывать отдельно теги ячейки, которая входит в объединение с другой. Для этого указывается лишь одна ячейка и в ней атрибут с количеством для объединения.

Для объединения ячеек по вертикали, используется атрибут rowspan тега <td>. Этот атрибут принимает натуральное значение и оно должно соответствовать количеству ячеек, которые объединяются.

Также, ничто не препятствует применить оба вида объединения в одной таблице.



Также в теге <table> допускается использование атрибутов width, height для задания ширины и высоты таблицы, а также атрибута align для выравнивания ее относительно внешней среды. В теге <td> допускается использования атрибутов align, valign для выравнивания текста внутри ячейки по горизонтали (left, center, right) и по вертикали (bottom, middle, top).

<td align='left' valign='bottom'> 1 </td>


Проверьте свои знания
Создать таблицу из двух столбцов в которой будут записаны континенты и их площадь. Первая строка таблицы должна состоять из одной ячейки и содержать текст Some continents and area