ТАБЛИЦЫ
Таблицы являются наверное самым популярным средством разработки WEB-страниц. Они помогают придать странице красочность, удобно разместить информацию, графику, навигацию.
Макет простой таблицы и её внешний вид:<table border="2" width="300" height="100" frame="box" align="center"> <tr> <td> <td> </tr> <tr> <td> <td> </tr> </table>
Рассмотрим подробно её состав:
<TABLE>...</TABLE> -Определяет начало и конец таблицы. Начальный элемент имеет ряд атрибутов задающих свойства таблицы.
Атрибуты:
align -Атрибут выравнивания имеет три значения, left -по левому краю, center -по центру и right -по правому краю.
border -Бордюр. Устанавливает ширину боковой грани таблицы.
bordercolor -Цвет бордюра. Пример: bordercolor="Red"
width -Ширина таблицы. Можно задавать ширину в пикселях или в процентах. Пример: width="200" width="95%".
height -Высота таблицы. Параметры устанавливаются так же, как и ширина.
bgcolor -Задаёт цвет фона. Пример: bgcolor="Red"
background -Задает фоновый рисунок таблицы. Пример: background="Путь к файлу"
cellpadding -Размер пустого пространства, окружающего данные в ячейках. Параметры задаются в пикселях или процентах.
cellcpacing -Ширина фронтальной грани.
frame -Задаёт свойства вида рамки. Его параметры: void-нет рамки, box-рамка показана полностью, above-верхняя рамка, below-нижняя рамка, hsides-верхняя и нижняя рамка, vsides-правая и левая рамка, lhs-левая рамка, rhs-правая рамка.
<TR>...</TR> -Тег, создающий строку таблицы. К данному элементу можно применить атрибут align, его свойства описаны выше, а так же атрибут
valign -Выравнивает содержимое ячеек по вертикали. Его параметры: top-выравнивание по верхнему краю, center-выравнивание по центру, boottom-выравнивание по нижнему краю.
Конечный тег для данного элемента не обязателен.
<TD>...</TD> -Тег, создающий ячейку таблицы. Закрывающий тег не обязателен.
Атрибуты:
width -Задаёт ширину ячейки.
heidht -Задаёт высоту ячейки.
align valign -Атрибуты выравнивания текста в ячейках. Их свойства описаны выше.
И так мы рассмотрели состав простой таблицы и теперь знаем из чего она состоит. Немного повторения. Тег TABLE-определяет начало и конец таблицы, внутри него находится тег TR, который создаёт строку, чем больше тегов TR, тем больше строк в нашей таблице. Внутри тега TR располагается тег TD, который в свою очередь разбивает строку на ячейки. Точно так же, чем больше тегов TD тем больше ячеек в строке. Я уже упомянул выше, что теги TR и TD могут не иметь конечного элемента. Рассмотрим это наглядно
<TABLE border="2" width="300" height="100" frame="box" align="center"> <TR> <TD> <TD> <TD> <TR> <TD> </TABLE>
Для создания таблиц существуют ещё несколько тегов.
ЗАГОЛОВКИ ТАБЛИЦ И ОБЪЕДИНЕНИЕ ЯЧЕЕК
<CAPTION>...<CAPTION> -Тег создающий заголовок таблицы. Тег следует располагать внутри тега TABLE. Приятная особенность данного элемента в том, что не смотря на то, что тег находится внутри таблицы, заголовок выводится снаружи. К данному тегу применяется атрибут: align -Его параметры: top-заголовок находится над таблицей, bottom-заголовок находится под таблицей, left-заголовок находится над таблицей и выровнен влево, right-заголовок находится над таблицей и выровнен вправо.
<TABLE border="2" width="300" height="100" frame="box" align="center"> <CAPTION> Заголовок таблицы. </CAPTION> <TR> <TD> <TD> <TR> <TD> <TD> </TABLE>
<TH>...</TH> -Тег, создающий ячейку-заголовок строки или столбца. Данный элемент располагается внутри элемента TR, к нему применяются те же атрибуты, что и к элементу TD.
Пример:
<TABLE border="2" width="300" height="100" frame="box" align="center"> <TR> <TH> <TH>Заголовок 1 <TH>Заголовок 2 <TR> <TH>Заголовок 3 <TD>Ячейка 1 <TD>Ячейка 2 </TABLE>
| Заголовок 1 | Заголовок 2 | |
|---|---|---|
| Заголовок 3 | Ячейка 1 | Ячейка 2 |
Иногда при создании таблиц появляется необходимость объединения ячеек. Для этого существуют два атрибута, которые следует применять к тегам TD и TH
rowspan -Объединяет ячейки в столбец. Свойства задаются в виде числа, которое обозначает количество ячеек для объединения. Пример: rowspan="3"
colspan -Объединяет ячейки в строку. Свойства задаются так же как в атрибуте rowspan.
<TABLE border="2" width="300" height="100" frame="box" align="center"> <TR> <TD rowspan=2> <TD> <TD> <TR> <TD colspan=3> </TABLE>
На этих примерах, я думаю вы смогли понять все удобства использования таблиц. Если вы прочитали первые три раздела, то вы уже можете самостоятельно нарисовать неплохую WEB-страницу. Но не останавливайтесь на этом, ведь HTML имеет еще очень много возможностей. Если все-таки вы уже решили начать создавать свой сайт, то я рекомендую прочитать вам раздел "ССЫЛКИ", ведь без ссылок HTML был бы скорее языком форматирования текста, а не языком гипертекстовой разметки.