What is Таблица? - одним из самых наиболее мощных и широко применяемых элементов в HTML - является таблица/ы. Таблицы используются не только традиционно, как метод представления информации, но и как средство оформления WEBстраниц. Напомню там мы изучали ссылки/links.
<теория>
Таблица объявляется с помощью тэгов:
[TABLE создаёт таблицу] [CAPTION задаёт заголовок таблицы] [TR создаёт новый ряд (строку) ячеек таблицы] [TD и TH создаёт ячейку с данными в текущей строке]
Таблицы в HTML формируются построчно. Для этого c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.
Код HTML:
| <TABLE BORDER> <TR> <TD>ячейка1.1</TD> <TD>ячейка1.2</TD> <TD>ячейка1.3 </TD> </TR> <TR> <TD>ячейка2.1</TD> <TD>ячейка2.2</TD> <TD>ячейка2.3 </TD> </TR> </TABLE> |
Результат:
|
ячейка1.1 |
ячейка1.2 |
ячейка1.3 |
|
ячейка2.1 |
ячейка2.2 |
ячейка2.3 |
Рассмотрим элементы(теги) таблицы.
Элемент TABLE
Основным тэгом, прменяемым при создании таблицы, является тэг <TABLE>. Он может использоваться с рядом параметров каждый из которых допустимо опускать. В тэге <TABLE> могут использоваться следующие атрибуты :
| ALIGN | Горизонтальное выравнивание таблицы. Возможные значения: left, center, right. Значение по умолчанию - left. |
| VALIGN | Вертикальное выравнивание содержимого таблицы. Возможные значения: top, bottom, middle. |
| BORDER | Ширина внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет. |
| CELLPADDING | Расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащейся в ней инфе. |
| CELLSPACING | Расстояние (в пикселах) между границами соседних ячеек. |
| WIDTH | Ширина таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. |
| HEIGHT | Высота таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. |
| BGCOLOR | Цвет фона ячеек таблицы. |
| BACKGROUND | Фоновый рисунок таблицы . |
| Живность | Музыкальные Кактусы | смотреть... |
|---|---|---|
| Домашние крокАдилы | смотреть... | Результат:
Элемент CAPTION
Тэг заголовка таблицы <CAPTION> имеет единственный допустимый параметр <ALIGN>.
Атрибуты:
| top | помещает заголовок над таблицей (значение по умолчанию) |
| bottom | помещает заголовок под таблицей |
Код HTML: Элемент TR
<TABLE BORDER="1">
<CAPTION ALIGN="bottom">Заголовок таблицы</CAPTION>
<TR>
<TD>Ячейка таблицы</TD>
</TR>
</TABLE>
Table Row с ненашенского - создаёт новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH
Атрибуты:
| ALIGN | определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right |
| VALIGN | определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle |
| BGCOLOR | определяет цвет фона для всех ячеек данного ряда |
Элементы TD и TH Атрибуты:
Table Data & Table Head - элемент TD создаёт ячейку с данными в текущей строке. Элемент TH также создаёт ячейку, но определяет её как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами.Текст находящийся между тэгами <TH></TH> отображается жирным шрифтом, т.е. <TH>текст</TH> равносильно <TD><b>текст</b></TD>
| 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. скопируйте код и сохраните его как в предыдущих занятиях, в полученном документе вы увидите пример простой таблицы.]<практика>
Навигация