|
|
|
Таблицы |
::..::..:: |
Таблицы являются наиболее замечательной
особенностью HTML. Вооружившись небольшим
количеством знаний, вы сможете использовать их,
чтобы создавать впечатляющее разнообразие
эффектов при проектировании страниц. Таблица
размещается между тегами <table>...</table>. Например:
| <TABLE
BORDER> |
| <TR>
|
<TH>
Это |
<TD>
пример |
| <TR>
|
<TD>
обычной |
<TH>
таблицы |
| </TABLE> |
| Это
|
пример
|
| обычной
|
таблицы |
Необязательное свойство
BORDER="5" нарисует рамку вокруг таблицы
шириной соответственно в 5 пиксел (если размер не
указан (как в нашем примере), то рамка рисуется по
умолчанию - в зависимости от браузера.)
<TR> - Новая строка для
неограниченного числа ячеек таблицы.
<TH> - Ячейка для
заголовков.
<TD> - Ячейка для
обычного текста.
Все понятно? Поехали дальше:
ROWSPAN - задает
количество ячеек объединенных в колонку,
COLSPAN - тоже, в
строчку. (С объединением
придется потренироваться: при объединении,
оставшиеся(объединенные в одну) ячейки должны
быть пропущены т.е. если вы объявили, что
соединяете 6 ячеек в строке, следующий тег
ячейки будет вносить данные сразу в седьмую
ячейку этой строки. Тоже и с колонками.)
Более сложный пример:
<CENTER> <TABLE
BORDER="15" BGCOLOR="YELLOW" width="75%">
<TR> <TH rowspan="2">В
первой строке ячеек в колонку объединены 2
ячейки заголовков. Во второй строке таблицы тег
первой ячейки должен быть пропущен.
<TD bgcolor="lime"> <img
src="lego.gif">
<TD>3 ячейка первой строки
<TR> <TD colspan="2">Вторая
строка таблицы тоже состоит из трех ячеек, но
так как тег первой ячейки пропущен из-за
объявления в первой строке, а 2 последние ячейки
тоже объединены в одну, то во второй строке
используется только одна метка ячейки.
</TABLE></CENTER>
Дает на экране:
| В
первой строке ячеек в колонку объединены
2 ячейки заголовков. Во второй строке
таблицы тег первой ячейки должен быть
пропущен.
|
|
3 ячейка
первой строки |
|
Вторая строка таблицы тоже состоит из
трех ячеек, но так как тег первой ячейки
пропущен из-за объявления в первой
строке, а 2 последние ячейки тоже
объединены в одну, то во второй строке
используется только одна метка ячейки.
|
"BGCOLOR" - цвет
фона - можно использовать как для таблицы в
целом, так и для каждой ячейки в отдельности.
Это относится и к возможности использования в
качестве фона графического файла. Например:
<TD BACKGROUND="Image.jpg">
Таблицы автоматически
растягиваются в зависимости от содержимого, но
также возможно и объявление их размеров.
WIDTH - ширина таблицы
можно в процентах, можно в пикселах.
HEIGHT - высота (тоже и
к ячейкам).
Также таблицей могут управлять атрибуты
CELLPADDING="n"
-определяет отступ от содержимого внутри ячеек,
и CELLSPACING="n"
-ширина границ между ячейками -все в пикселах.
(Значение BORDER тем
не менее определяет, будут ли границы
присутствовать вообще.).
Остается добавить, что таблица как и картинки
имеет возможность обтекания текстом
(относительного выравнивания) при использовании
свойства ALIGN в теге
TABLE с параметрами left,
right. Например:
<table width="100"
align="right" bgcolor="lime" cellpadding="20">
<tr> <td> 1
<th><font color="blue"> 2
</font>
<tr> <td bgcolor="red"> 3
<td> 4
</table>
*Если вы хотите, чтобы ваши таблицы читались
Нетскейпом - закрывайте все ячейки и все строки (</td>
и </th>)!Разместил
Razer | |
|
|
| | | | | | |
|
