Приглашаем посетить
Таблицы
Таблицы являются наиболее замечательной особенностью 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="/images/024/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>)!
Назад | Содержание | Вперед
