Таблицы

Разделы

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

<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>

Для рекламы
Главная страница
 

Статьи про заработок

Русские спонсоры
Зарубежные спонсоры
Собери бонусы
Биржа Форекс
Статьи темы
 

Начинающему Web - мастеру

Создать свой первый сайт
Как раскрутить свой сайт
Как заработать на сайте
Что такое ТИЦ и PR
Статьи темы
 

Виды обмана в интернет

Халява бред
 

Остальное

Новости сайта
Друзья сайта
След для истории
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   
 
назад | содержание | вперед