What is Таблица? - одним из самых наиболее мощных и широко применяемых элементов в HTML - является таблица/ы. Таблицы используются не только традиционно, как метод представления информации, но и как средство оформления WEBстраниц. Напомню там мы изучали ссылки/links.  

<теория>

Таблица объявляется с помощью тэгов:

[TABLE создаёт таблицу] [CAPTION задаёт заголовок таблицы] [TR создаёт новый ряд (строку) ячеек таблицы] [TD и TH  создаёт ячейку с данными в текущей строке]

Таблицы в HTML формируются построчно. Для этого c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.
Код HTML:

ячейка1.1 ячейка1.2 ячейка1.3 ячейка2.1 ячейка2.2 ячейка2.3

Результат:

ячейка1.1	ячейка1.2	ячейка1.3
ячейка2.1	ячейка2.2	ячейка2.3

Рассмотрим элементы(теги) таблицы.

Элемент TABLE
Основным тэгом, прменяемым при создании таблицы, является тэг

. Он может использоваться с рядом параметров каждый из которых допустимо опускать. В тэге могут использоваться следующие атрибуты :

ALIGN	Горизонтальное выравнивание таблицы. Возможные значения: left, center, right. Значение по умолчанию - left.
VALIGN	Вертикальное выравнивание содержимого таблицы. Возможные значения: top, bottom, middle.
BORDER	Ширина внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.
CELLPADDING	Расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащейся в ней инфе.
CELLSPACING	Расстояние (в пикселах) между  границами соседних ячеек.
WIDTH	Ширина таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
HEIGHT	Высота таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
BGCOLOR	Цвет фона ячеек таблицы.
BACKGROUND	Фоновый рисунок таблицы .

 

  Код HTML:

<TABLE BORDER> <!--задание таблицы и рамки--> <TR><!--формирование строки--> <TH ROWSPAN=2>Живность</TH><!--создание ячейки, (ROWSPAN= 2) определяет количество строк, на которые простирается данная ячейка--> <TD> Музыкальные Кактусы</TD><TD ALIGN="right">смотреть...</TD> <!--создание ячейки расположенной вправо--> </TR> <!-- конец строки--> <TR> <!--формирование строки--> <TD>Домашние крокАдилы</TD><TD ALIGN="right">< /FONT>смотреть...</TD><!--создание ячейки расположенной вправо--> < /FONT> </TR> <!-- конец строки--> </TABLE><!-- конец таблицы-->

Результат:

Живность	Музыкальные Кактусы	смотреть...
	Домашние крокАдилы	смотреть...

 

 

Элемент CAPTION
Тэг заголовка таблицы имеет единственный допустимый параметр .
Атрибуты:

top	помещает заголовок над таблицей (значение по умолчанию)
bottom	помещает заголовок под таблицей

Код HTML:

   
   
       
   

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

Ячейка таблицы

 Элемент TR
Table Row с ненашенского - создаёт новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH
Атрибуты:

ALIGN	определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right
VALIGN	определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle
BGCOLOR	определяет цвет фона для всех ячеек данного ряда

 

 

Элементы TD и TH
Table Data & Table Head - элемент TD создаёт ячейку с данными в текущей строке. Элемент TH также создаёт ячейку, но определяет её как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами.Текст находящийся между тэгами отображается жирным шрифтом, т.е. текст равносильно текст

Атрибуты:

ALIGN	определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование
VALIGN	определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого параметра не было задано ранее в элементе TR
WIDTH	определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы
HEIGHT	определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы
COLSPAN	определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1
ROWSPAN	определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1
NOWRAP	блокирует автоматический перенос слов в пределах текущей ячейки
BGCOLOR	определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов
BACKGROUND	заполняет ячейку фоновым рисунком

 

<практика>

[шаг 1. как и в предыдущих уроках...откройте обычный блокнот и т.д ...]

[шаг 2. скопируйте код и сохраните его как в предыдущих занятиях, в полученном документе вы увидите пример простой таблицы.]

<TABLE BORDER=5 CELLSPACING=0 WIDTH=400 HEIGHT=100 ALIGN=CENTER BGCOLOR=ORANGE> <TR ALIGN=CENTER> <TD WIDTH=10%>Ширина ячейки 10% ширины таблицы</TD> <TD WIDTH=60%>Ширина ячейки 60% ширины таблицы</TD> <TD WIDTH=30%>Ширина ячейки 30% ширины таблицы</TD> </TR> <TR> <TD ALIGN=CENTER COLSPAN=3>Для этой ячейки указан параметр COLSPAN=3</TD> </TR> </TABLE>

 

<<<Ссылки в документах HTML | Общие правила проектирования навигационной схемы сайта>>>