Лекция: Создание таблиц в HTML-документе
Таблица в HTML-документах задаётся парным тегом <TABLE>…</TABLE>. Она может содержать заголовок таблицы, определяемый парным тегом <CAPTION>…</CAPTION>, и строки таблицы, задаваемые парным тегом <TR>…</TR>.
Строки таблицы могут содержать ячейки двух типов. Ячейки в заголовках строк и столбцов задают парным тегом <TH>…</TH>, а обычные ячейки – <TD>...</TD>. Теги </TR>, </TD> и </TH> можно опускать. Атрибуты тегов, используемые при создании таблиц, приведены в таблице 3.5.
Таблица 3.5.Атрибуты тегов таблиц
| Атрибут | Возможные значения | Элемент | Назначение |
| ALIGN=тип | LEFT CENTER RIGHT | Таблица, заголовок, строка, ячейка | Выравнивание таблицы, данных в строках и ячейках по горизонтали |
| BORDER=n | Таблица | Ширина рамки таблицы в пикселах | |
| VALIGN=тип | TOP CENTER BOTTOM BASELINE | Строка, ячейка | Вертикальное выравнивание данных в ячейках строки |
| WIDTH=n | Таблица, ячейка | Ширина таблицы в пикселах | |
| HEIGHT=n | Ячейка | Минимальная высота ячейки | |
| CELLPADDING=n | Таблица | Зазор в пикселах между границами ячейки и ее содержимым | |
| CELLSPACING=n | Таблица | Интервал в пикселах между ячейками таблицы | |
| COLSPAN=n | Ячейка | Ячейка занимает n соседних столбцов | |
| ROWSPAN=n | Ячейка | Ячейка занимает n соседних строк | |
| WIDTH=n | Таблица, ячейка | Ширина ячейки в пикселах | |
| BGCOLOR= | Таблица, ячейка | Цвет фона |
Теги ячеек <TH> и <TD> имеют одинаковые с тегом строки <TR> атрибуты выравнивания. Значения атрибутов, установленные для отдельных ячеек таблицы, будут иметь приоритет над значениями этих же атрибутов, установленных в целом для строки.
Пример простейшей таблицы:
<TABLE WIDTH=«200» BORDER=«1» CELLSPACING=«0» CELLPADDING=«0»>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну ячейку. Атрибут COLSPAN тэгов <TH>, <TD> позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки. Атрибут ROWSPAN — ячеек из нескольких строк в пределах одного столбца. Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.
Примеры таблиц, в которых используется слияние ячеек.
<TABLE WIDTH=«150» BORDER=«2» CELLPADDING=«0» CELLSPACING=«0»>
<TR>
<TD ROWSPAN=«2»>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
</TR>
<TR ALIGN=«CENTER»>
<TD>4</TD>
<TD>5</TD>
</TR>
</TABLE>
<TABLE WIDTH=«200» BORDER=«1» CELLPADDING=«0» CELLSPACING=«2»>
<TR>
<TD>1</TD>
<TD ALIGN=«CENTER» ROWSPAN=«2»>3</TD>
</TR>
<TR>
<TD>2</TD>
<TR ALIGN=«CENTER»>
<TD>4</TD>
<TD>5</TD>
</TR>
</TABLE>
<TABLE WIDTH=«250» BORDER=«1» CELLPADDING=«7» CELLSPACING=«1»>
<CAPTION>Заголовок таблицы</CAPTION>
<TR>
<TD COLSPAN=«2» ALIGN=«CENTER»>Список</TD>
</TR>
| Заголовок таблицы |
| Список |
<TR>
<TD ALIGN=«RIGHT»>1</TD>
<TD>2</TD>
</TR>
<TR ALIGN=«CENTER»>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
Пример создания таблицы в Web-документах:
<HTML>
<HEAD>
<TITLE>Созданиетаблицы</TITLE>
</HEAD>
<BODY BGCOLOR="#E6E6FA">
<TABLE BORDER=«2» ALIGN=«CENTER» BGCOLOR="#D1EEEE"
CELLPADDING=«3»>
<CAPTION><H2><FONT COLOR="#00008B">Методическая и научная
работа преподавателей кафедры ВИТ <BR> за 2009/10 учебный год </H2></FONT></CAPTION><BR>
<TR BGCOLOR="#A4D3EE"><TH HEIGHT=«70» ROWSPAN=«2»>№
<TH ROWSPAN=«2»>Ф.И.О.<TH ROWSPAN=«2»>Опубликовано
учебников<TH ROWSPAN=«2»>Издано методических указаний
<TH COLSPAN=«3»>Опубликовано<TH ROWSPAN=«2»>Подано заявок
на изобретение</TR>
<TR BGCOLOR="#A4D3EE"><TH>Статей в центральной печати
<TH>Статей в сборниках университета<TH>Тезисов доклада</TR>
<TR ALIGN=«CENTER»><TD>1.<TD ALIGN=«LEFT»>Рыбанов<TD>1
<TD>2<TD>3<TD>4<TD>5<TD>6</TR>
<TR ALIGN=«CENTER»><TD>2.<TD ALIGN=«LEFT»>Лясин<TD>1<TD>2
<TD>3<TD>4<TD>5<TD>6</TR>
<TR ALIGN=«CENTER»><TD>3.<TD ALIGN=«LEFT»>Свиридова<TD>1
<TD>2<TD>3<TD>4<TD>5<TD>6</TR>
</TABLE>
</BODY>
</HTML>
В результате получится изображение страницы на рис. 3.5.
Рис. 3.5. Пример таблицы на странице Создание таблицы