Документация
HTML CSS PHP PERL другое
Таблицы
 

Таблицы

Таблицы являются наиболее замечательной особенностью 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 тем не менее определяет, будут-ли границы присутствовать вообще.)
1 2
3 4

Остается добавить, что таблица как и картинки имеет возможность обтекания текстом (относительного выравнивания) при использовании свойства 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>)!

Назад | Содержание | Вперед
Главная
Veselov
Высоцкий
Культура
Горюнова
Blok
Булгаков
Love
Bilan
Fashion