Таблицы в HTML-документе

 

У таблиц в HTML -документах есть два предназначения. Одно из них - представление данных в виде таблицы, другое - табличный дизайн. Кто бы вам ни говорил, что табличный дизайн является неправильным, используйте его всегда, когда посчитаете нужным. Я не занимался статистическими вычислениями, какой процент сайтов в сети имеет табличный каркас. Однако, открыв наугад пять корпоративных сайтов и просмотрев их "HTML-внутренности", я обнаружил, что все они использовали таблицы в качестве инструмента форматирования HTML-документа. Таблицу определяет элемент <TABLE>, внутри которого располагаются следующие элементы:

· <CAPTION>

· <TR>

· <TD>

· <TH>

 

       TABLE - элемент, который создаёт таблицу на вашей странице. Внутри него располагаются остальные элементы, участвующие в формировании таблицы. <TABLE> имеет следующие параметры:

bgcolor - задаёт цвет фона всех ячеек таблицы.

background - задаёт URL-адрес изображения в качестве фона таблицы.

border - задаёт толщину рамки таблицы в пикселях. При значении border="0" и по умолчанию браузер не прорисовывает рамку.

width - задаёт ширину таблицы в пикселях или в процентах по отношению к окну браузера. По умолчанию браузер сам определит оптимальную ширину, в зависимости от содержимого таблицы.

height - задаёт высоту таблицы в пикселях или в процентах по отношению к окну браузера. По умолчанию браузер сам определит оптимальную высоту, в зависимости от содержимого таблицы.

align - выравнивает таблицу по горизонтали. Имеет значения: left, center, right. По умолчанию - left.

cellpadding - задаёт расстояние (отступ) между содержимым каждой ячейки таблицы и рамкой этой ячейки в пикселях.

cellspacing - задаёт толщину внутренних рамок таблицы (расстояние между соседними ячейками) в пикселях.

 

Например:

<table bgcolor="orange" border="1" cellspacing="0" cellpadding="5" >

<tr>

<td>первая ячейка</td><td>вторая ячейка</td>

</tr>

<tr>

<td>первая ячейка</td><td>вторая ячейка</td>

</tr>

</table>

 

первая ячейка	вторая ячейка
первая ячейка	вторая ячейка

CAPTION - элемент, который задаёт заголовок таблицы. Имеет параметр align, который выравнивает заголовок по вертикали: top - над таблицей, bottom - под таблицей. Например,

<caption>заголовок таблицы</caption>

 

TR определяет строку таблицы, которая может быть разбита на любое количество ячеек элементами <TD> или <TH>. Элемент <TR> имеет следующие параметры:

bgcolor - задаёт цвет фона всех ячеек в строке.

align - выравнивает содержимое всех ячеек в строке по горизонтали. Имеет значения: left, center, right.

valign - выравнивает содержимое всех ячеек в строке по вертикали. Имеет значения: top,middle,bottom.

 

TD  – э то элемент задаёт ячейку в строке. Имеет параметры:

bgcolor - задаёт цвет фона всех ячейки.

background - задаёт URL-адрес изображения в качестве фона данной ячейки.

align - выравнивает содержимое данной ячейки по горизонтали. Имеет значения: left, center, right.

valign - выравнивает содержимое данной ячейки по вертикали. Имеет значения: top,middle,bottom.

width - задаёт ширину ячейки в пикселях или в процентах по отношению к ширине таблицы.

height - задаёт высоту ячейки в пикселях или в процентах по отношению к высоте таблицы.

nowrap - блокирует автоматический перенос по словам в пределах данной ячейки.

owspan - задаёт объединение нескольких соседних ячеек в одну по вертикали.

colspan - задаёт объединение нескольких соседних ячеек в одну по горизонтали.

 

TH о пределяет ячейку в качестве заголовка. Имеет те же самые параметры, что и элемент <TD>. Например,

<table bgcolor="orange" border="1" cellspacing="0" cellpadding="5" >

<caption>таблица с объединением ячеек по вертикали</caption>

<tr>

<th rowspan="3">я большая ячейка!</th><td>а я маленькая</td>

</tr>

<tr>

<td>и я маленькая</td>

</tr>

<tr>

<td>и я тоже.</td>

</tr>

</table>

 

 

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

Или

<table bgcolor="orange" border="1" cellspacing="0" cellpadding="5" >

<caption>таблица с объединением ячеек по горизонтали</caption>

<tr>

<th colspan="3">я большая ячейка!</th>

</tr>

<tr>

<td>а я маленькая</td><td>и я маленькая</td>

</tr>

<tr>

<td>и я маленькая.</td><td>и я маленькая</td>

</tr>

</table>

 

Таблица с объединением ячеек по горизонтали
Я большая ячейка!
А я маленькая	и я маленькая
и я маленькая	и я маленькая