Таблицы.

Таблицы являются очень удобным средством форматирования данных на Web-странице.

Основное удобство заключается в том, что броузер берет на себя заботу о прорисовке  рамки таблицы.

Размер рамки может быть автоматически согласован с размером окна просмотра в броузере и, разумеется, с размером находящихся в ячейках  таблицы строк  текста и рисунков. Кроме этого, таблицы позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и т.д. При создании таблиц используется принцип вложения: внутри основного элемента таблицы (TABLE) создаётся ряд элементов,определяющих строки (TR), а внутри этих элементов размещаются элементы для описания каждой ячейки в строке (TD, TH).

<TABLE> </ table>

 Внешний элемент таблицы. Он позволяет задавать общие свойства таблицы и отделяет её структуру от остальной части Web-страницы. Рассмотрим атрибуты этого элемента. Таблицу можно выровнять по горизонтали при помощи атрибута align: 

align='' left'' ___  влево;

align=''center'' ___  по центру;                                                                                                                                                

align=''right'' ___- вправ 

Ширину таблицы можно задать точно, в пикселах, или в процентном отношении к ширине страницы в окне броузера. Например: 

width= 400

width= 50% 

Для управления видом рамки используются два атрибута. Дело в том, что броузер создаёт изображение рамки, имитируя её трёхмерность (выпуклость). На рамке можно различить фронтальную и боковую наклонную грани (рис.8). Кроме этого, имитируется различие в их освещённости. Шириной боковой грани управляет атрибут border: 

border= Ширина в пикселах 

При задании нулевого значения для этого атрибута рамка исчезает совсем. Шириной фронтальной грани управляет атрибут cellspacing: 

cellspacing= Ширина в пикселах 

Если значение этого атрибута равно нулю, рамка получается тонкой, заострённой.

Для всех ячеек таблицы можно задать размер пустого пространства, окружающего данные в ячейках: 

cellpadding= Число пикселов 

Задание этого атрибута делает ячейки больше. Между рамкой таблиц и данными всегда сохраняется определённое расстояние. В некоторых случаях это позволяет улучшить восприятие таблицы, сделать текст в ячейках легко читаемым.

<CAPNION> </caption>

Элемент для задания  заголовка таблицы. Заголовок выводится на экране вне рамки таблицы  

рис.8). Положением заголовка можно управлять: 

align= '' top''        ___ заголовок над таблицей;

align= '' bottom' '___  заголовок под таблицей.

 <TR> </tr>

Элемент, создающий строку таблицы. Для выравнивания содержимого всех ячеек в строке можно использовать хорошо известный нам атрибут align и присваивать ему значения left, center  Кроме этого, содержимое ячеек можно выравнивать по вертикали: 

valign= '' top''       ___ по верхнему краю;

valign= '' middle'' ___ по центру;

valign= '' bottom'' ___ по нижнему краю.              .                                               .                                                                                   .

<TH> <ith>

 Элемент ячейки, которая является заголовком столбца или строки таблицы. Этот элемент должен располагаться внутри элемента TR. Ячейка-заголовок отличается от обычной тем, что броузер выводит текст внутри неё выделенным (как правило, полужирным) шрифтом. Для элемента ячейки предусмотрено много атрибутов.

Если в ячейку помещено большое количество текста, броузер разбивает его на строки так, чтобы сохранить требуемую конфигурацию таблицы. Конфигурацию может определять заданная фиксированная ширина таблицы, необходимость согласовать размер таблицы и области просмотра, заданная ширина ячейки. При помощи атрибута nowrap (он не имеет параметров) можно запретить форматирование текста. В этом случае в ячейке будет создана одна строка, а таблица может уйти за край окна.

Атрибуты rowspan и colspan позволяют создавать ячейки, которые в несколько раз больше других ячеек таблицы. Иными словами, ячейки в таблице можно объединять.

При задании атрибута 

rowspan= n 

и условии, что n>1, соответствующая ячейка займёт не одну, а  n строк и, соответственно, будет иметь размер в n раз больший, чем обычная ячейка данного столбца.

        Аналогично, при помощи атрибута colspan можно создавать ячейки, расположенные сразу в нескольких столбцах. Хорошо известный нам атрибут align может использоваться и для одной ячейки. Он может принимать значения left (выравнивание по левому краю), center (выравнивание по центру) и right (выравнивание по правому краю). Обычно по умолчанию используется выравнивание влево. Элемент TH в этом смысле ___ исключение. Он обеспечивает центрирование текста, если атрибут align не использован.

Для элемента TH можно использовать атрибут valign таким же образом, как и для элемента TR.

Размеры ячеек можно задавать точно: 

width= Ширина в пикселах

  height= Высота в пикселах

<TD> </td>

Этот элемент определяет обычную ячейку таблицы. Для него могут быть использованы те же атрибуты, что и для элемента TH.

 Функцию конечного тега выполняет следующий элемент, который определяет структуру таблицы.

 Заголовок таблицы

 рис. 8. Пример таблицы

  Теперь, зная, какие элементы используются для построения таблицы, мы можем создать простейшую таблицу:

        <TABLE  border= 4    cellspacing= 3>

       <CAPTION>  Заголовок таблицы </caption>

        <TR> <TH  bgcolor= ''blue''>Заголовок 1

                   <TH  bgcolor=''blue''>Заголовок 2

                   <TR> <TD>Ячейка 1

                              <TD>Ячейка 2

                  <TR> <TD>Ячейка 3

                            <TD>Ячейка 4

                  </table> 

  Из листинга видно,что первая строка таблицы содержит только ячейки-заголовки. Внешний вид таблицы показан на рис.8. Текст, расположенный после элементов TD, представляет собой содержимое ячейки. Таблица может форматироваться автоматически (если не заданы атрибуты), с учётом объма данных в ячейках. Последний пример можно несколько усложнить. При необходимости можно создать заголовки и для столбцов,и для строк:

      <TABLE border= 4       cellspacing=3>

      <CAPTION>  Заголовок  таблицы  </caption>

      <TR><TH  bgcolor=''blue''>

                <TN  bgcolor=''blue''>Заголовок 1

                <TH  bgolor=''blue''>Заголовок 2

      <TH><TH  bgolor=''blue''>Заголовок 3

                 <TD>Ячейка 1

                  <TD>Ячейка 2

      <TR><TH bgcolor=''blue''>Заголовок 4

                 <TD>Ячейка 3

                 <TD>Ячейка 4

      </table>

Эта таблица показана на рис.9. Обратите внимание: несмотря на то, что левая верхняя ячейка не используется, для неё  задан цвет фона так же, как и для других ячеек-заголовков. Это необходимо сделать для того, чтобы рамка таблицы в этом месте была правильно прорисована.  

 Заголовок таблицы

                                                   Рис.9. Таблица с заголовками столбцов и строк.