|
Таблицы в HTML позволяют не только представлять данные в табличной форме, но и формировать дизайн страницы сайта, размещая в нужных местах фрагменты текста, картинки, меню, рекламные объявления и другие визуальные элементы.
Начало и конец таблицы обозначаются тегами <TABLE> и </TABLE> соответственно. Строки – тегами <TR ></TR > , а ячейки – <TD></TD>.
Содержание вписывается между тегами <TD> и </TD>. Простейшая таблица формируется следующим набором тегов:
<TABLE>
<TR>
<TD> контент </TD> <TD> контент </TD> <TD> контент </TD>
</TR>
<TR>
<TD> текст </TD> <TD> текст </TD> <TD> текст </TD>
</TR>
</TABLE>
В этой таблице 2 строки и 3 столбца.
В теге <TABLE> задают параметры таблицы: ширину WIDTH, высоту HEIGHT, расположение по ширине страницы ALIGN, рамку BORDER, рамки между ячейками CELLSPACING, отступ между рамкой и содержимым ячейки CELLPADDING, цвет рамки BORDERCOLOR.
Например, запишем <TABLE WIDTH="60%" HEIGHT="100" ALIGN="center" BORDER="1" CELLSPACING=”0” CELLPADDING=”2”>. Получим таблицу шириной 60% от ширины экрана (фиксированную ширину задают в пикселях). Ее высота составит 100 пикселей. Расположится она посредине страницы (left – слева страницы, right – справа). Рамки ячеек совместятся (CELLPADDING="1" даст двойную рамку с расстоянием между линиями равным 1 пикселю, а при BORDER="0" рамка таблицы станет невидимой). Отступ между содержимым и рамкой ячейки будет равным 2 пикселям.
В тегах <TD> задают высоту (HEIGHT) и ширину (WIDTH) ячеек. При этом высота всех ячеек ряда должна быть одинакова, а ширина одинакова у ячеек столбца.
Тегом <TD> можно объединить несколько ячеек ряда, записав <TD COLSPAN="3">. Эта и следующие за ней 2 ячейки объединятся в одну. Этот же тег позволяет объединить ячейки столбца. Конструкция <TD ROWSPAN="2"> объединит ячейку этого ряда с расположенной ниже ячейкой следующего ряда. Поэтому в следующем ряду теги «<TD> содержание </TD>» этой ячейки не прописывают. По этому принципу можно объединить и большее количество ячеек столбца.
На каждую из ячеек таблицы распространяется действие каскадных таблиц стилей текущей страницы. При этом следует учитывать различие в отображении одного и того же html кода различными браузерами.
Пользуясь изложенными правилами нетрудно скомпоновать страницу сайта, отвечающую самым замысловатым требованиям.
Хотите сделать свой магазин более привлекательным для клиентов? Тогда купите дешевые платежные терминалы в компании «Автоматические Платежные Системы», и поставьте их на видном месте. После этого покупатели смогут оплачивать сотовых операторов, интернет, коммунальные услуги и так далее. | 