Создание таблиц.
Таблицы — это сетка для показа данных в строках и столбцах. Однако таблицы можно применять как средство структурирования документов. Например, в HTML трудно точно разместить элементы по горизонтали, но, используя таблицы, можно добавлять столбцы для перемещения элементов.
Создание таблиц вручную — одна из наиболее сложных задач в HTML. Сначала Вы формируете таблицу, затем первую строку, затем каждую ячейку с ее содержимым. Каждый элемент требует открывающего и закрывающего тегов.
Таблица вставляется в HTML-документ парными тегами <TABLE> и </TABLE >. Тег имеет следующие атрибуты:
border — ширина рамки;
width —ширина таблицы;
align – положение таблицы относительно боковых границ окна;
bgcolor — цвет фона под таблицей.
Внутри могут располагаться следующие элементы:
< CAPTION> Название таблицы </CAPTION>,
Этот тег имеет атрибут align, определяющий положение названия таблицы. Он может принимать два значения:
top — над таблицей;
bottom — под таблицей.
<TH> Заголовок столбца </TH>
Содержимое заголовка автоматически размещается по центру ячейки и отображаетсяполужирным шрифтом. Данный тег можно вставлять в любом месте таблицы.
<TR> Строка таблицы </TR>
У этого тега есть следующие атрибуты:
аlign — выравнивание внутри строки:(LEFT, RIGHT, CENTER);
valign — вертикальное выравнивание(ТОР, BOTTOM, MIDDLE);
bgcolor — цвет фона внутри строки.
<TD> Столбец таблицы </TD>
Атрибуты align,valign и bgcolor аналогичны атрибутам тега<TR>;
widht - ширина ячейки;
colspan - растягивание клетки нa несколько столбцов;
rowspan — растягивание клетки нa несколько строк.
Пример создания простой таблицы:
<H2> Самая простая таблица</H2>
<TABLE border=4>
<TR>
<TD>ячейка A</TD>
<TD>ячейка В </TD> Первая строка
<TD>ячейка C</TD>
</TR>
<TR>
<TD>ячейка D </TD>
<TD>ячейка Е </TD> Вторая строка
<TD>ячейка F </TD>
</TR>
</TABLE>
Пример создания таблицы с названиями столбцов.
<TABLE BORDER=10 width=100% >
<CAPTION> Название таблицы </CAPTION>
<TR>
<TH>Заголовок1</TH>
<TH>Заголовок2</TH>
<TH>Заголовок3</TH>
</TR>
<TR> <TD>ячейка таблицы A </TD>
<TD>ячейка таблицы В </TD>
<TD>ячейка таблицы С </TD>
</TR>
<TR> <TD>ячейка таблицы D</TD>
<TD>ячейка таблицы Е </TD>
<TD>ячейка таблицы F </TD>
</TR></TABLE>
Коротко о главном
| <TABLE> - Таблица вставляется в HTML-документ <CAPTION> - Название таблицы <TR> - Строка таблицы <TD> - Столбец таблицы <TH> - Заголовок столбца |
Упражнение 1.
Создайте HTML – документ, содержащий таблицу из 2 строк и 5 столбцов. Таблица должна занимать все окно браузера. В ячейки таблицы занесите цифры от 0 до 9 и разместите их в центре ячеек.
Упражнение 2.
Создайте HTML – документ, по предложенному образцу. Таблица должна содержать строку с заглавиями, стороку с текстом и стороку с картинками.
Упражнение 3.
Создайте HTML – документ, по предложенному образцу. Таблица прижата к правому краю, столбцы занимают 20% и 30% экрана соответственно.
Создание сложных таблиц.
Простые таблицы — довольно большая редкость. Гораздо чаще встречаются сложные таблицы, в которых ячейки располагаются одновременно в нескольких соседних столбцах или строках. Для объединения ячеек используют следующие атрибуты тэга <TD>:
· COLSPAN – сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько столбцов. Например, если нужно объединить ячейки двух столбцов, напишем colspan =2.
· ROWSPAN – сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько строк. Например, rowspan =2 растягивает клетку таблицы на две строки.
Фрагмент создания таблицы с различной шириной строк и столбцов.
<H1 align=center> Сложная таблица</H1>
<TABLE border=10 width=100%>
<TR>
<TD rowspan=2> большая ячейка A
<TD> маленькая ячейка 1
<TD> маленькая ячейка 2
</TR>
<TR>
<TD colspan=2> большая ячейка B
</TR>
</TABLE>
Упражнение 1.
Создайте HTML – документ, по предложенному образцу.
Упражнение 2.
| Начало | ||||
| Если enter западает На чужой клавиатуре, Ты облей ее кефиром, А потом помой под душем, Посильнее вдарь ей ломом, | |||
| Стукни пару раз об стенку, Со стола швырни-ка на пол, Походи по ней ногами… На чужих клавиатурах Это очень помогает! | ||||
| Конец |
Атрибут border тега <TABLE> устанавливает ширину бордюра (рамки таблицы) и может принимать любое значение от 0 до 10.
Ширина бордюра = 0 обозначает его отсутствие.
Упражнение 3.
<TABLE width="100 %" border=0>
<TR>
<TD colspan=4 bgcolor="lightblue"></TR>
<TR>
<TD colspan=4 align=center>
Таблица цветов</TR>
…
<TR>
<TD width=25%>< IMG src="b1.gif" align=right>
<TD width=25%>blue</TR>
<TD width=15% bgcolor="blue" >
<TD></TR>
…