Построение таблиц

ТЕМА: ПОСТРОЕНИЕ ТАБЛИЦ 
 

Цель занятия:   для компоновки страниц использовать возможности построения таблиц.

 Таблица  определяется тэгами <TABLE> и </TABLE>, строки – <TR> и </TR>, а отдельные  столбцы в строке – <TD> и </TD> или <ТН> и </ТН>. Тэги заголовков  таблицы, находящихся в объединенных  столбцах <ТН> и </ТН> выполняют  те же функции, что и тэги  ячеек <TD></TD>, но <ТН></ТН> предписывают  браузеру назначить заключенному  между ними тексту полужирное  начертание.

 Тэги  заглавия <CAPTION> </CAPTION> задают  заголовок таблицы. Определение  таблицы имеет следующий синтаксис:

 <TABLE  ALIGN="align"  BGCOLOR="#rrggbb"   BORDER="integer"

 BORDERCOLOR="#rrggbb"    CELLPADDING="integer"

 CELLSPACING="integer"   WIDTH="integer">

 </TABLE> 

 Заголовок  определяется тэгом <CAPTION> в соответствии со следующим синтаксисом:

 <CAPTION   ALIGN="align"   VALIGN="valign">  </CAPTION>

 Tэг  <CAPTION> имеет  следующие атрибуты.

 ALIGN определяет выравнивание заголовка и принимает одно из следующих значений: LEFT, CENTER (по умолчанию) или RIGHT.

 VALIGN определяет вертикальное выравнивание заголовка и может принимать одно из следующих значений: ТОР, MIDDLE, BOTTOM (по умолчанию), BASELINE.

 Строка  таблицы определяется тэгом <TR></TR>, который имеет свои атрибуты:

 <TR   ALIGN="align"   BGCOLOR="#rrggbb"  BORDERCOLOR="#rrggbb"> Строка… </TR>

 Атрибуты  тэга <TR>

 ALIGN  — выравнивание строки. Возможны следующие значения: LEFT (пo умолчанию), CENTER, RIGHT.

 BGCOLOR определяет цвет фона (в шестнадцатеричном формате RGB или как одно из предопределенных названий).

 BORDERCOLOR — цвет рамки строки (в шестнадцатеричном формате RGB или как одно из предопределенных названий). Этот атрибут будет использоваться только в том случае, если для атрибута BORDER тэга <TABLE> определено значение, отличное от нуля.

 Ячейки (столбцы) таблицы определяются тэгами <TD></TD> и <ТН></ТН> в соответствии  со следующим синтаксисом:

 <TD  или ТН ALIGN="align" BACKGROUND="url"]   BGCOLOR="#rrggbb" BORDERCOLOR="#rrggbb"]>  Столбец… </TD или /TН> 

 Тэги <TD> и <ТН> имеют  следующие атрибуты:

 ALIGN — горизонтальное выравнивание текста. ALIGN может принимать одно из следующих значений: LEFT, CENTER (по умолчанию), RIGHT.

 BGCOLOR — цвет фона (в шестнадцатеричном формате RGB или как одно из предопределенных названий).

 BORDERCOLOR — цвет рамки ячейки (в шестнадцатеричном формате RGB или как одно из предопределенных названий цвета). Этот атрибут будет использоваться только в том случае, если для атрибута BORDER тэга <TABLE> определено значение, отличное от нуля.

 COLSPAN — целое число, определяющее количество столбцов, попадающих в данную ячейку, предназначенную для заголовка столбцов.

 ROWSPAN — растягивание ячейки по строке. Например, <TD ROWSPAN="2" означает, что ячейка будет растянута на две строки таблицы.

 NOWRAP  — присутствие этого атрибута показывает, что текст должен размещаться в одну строку.

 BACKGROUND="image.gif"  — заполняет фон ячейки изображением. 

Используя  таблицы, можно создавать такие  эффекты, как верстка в несколько  колонок, применение эффектов состыковки  картинки и фона, тонкие линии  на всю ширину или высоту  странички и т.д.  

• <TABLE  BORDER="2" WIDTH="200" 
  BGCOLOR="#00FF00"> 
  <TR> 
  <TD>Ячейка 1</TD> 
  <TD>Ячейка 2</TD> 
  </TR> 
  <TR> 
  <TD>Ячейка 3</TD> 
  <TD>Ячейка 4</TD> 
  </TR> 
  </TABLE>