Таблицы

Таблицы выполняют две функции. Первая - представление и оформление данных в виде таблиц. В этом случае таблицы, как правило, имеют видимые границы, иногда - рисунок в качестве заднего фона. Таблицы также являются главным элементом языка HTML, при помощи которого делается форматирование документа. В HTML нет команд, которые бы позволили сдвинуться на 5 миллиметров вправо или вниз. Такие команды есть в TeX'e. Например, для того чтобы на одном уровне разместить несколько элементов, используется таблица. В этом случае сама таблица, как правило, уже невидима для пользователя. Необходимо отметить, что таблицы не предназначались для форматирования HTML-документов. Верстальщики начали использовать таблицы, как инстумент форматирования, из-за отсутствия в HTML специально предназначенны для этого команд. Поэтому часто при верстке дизайна сайта возникают большие проблемы. Начало таблицы объявляется командой <table>, эта команда требует закрывающей части </table>. Новый ряд в таблице объявляется командой <tr>. Ячейка в ряду объявляется командой <td>. Для <tr> и <td> закрывающие команды необязательны.
Пример:

<table border=1> <tr> <td> Cell #1 <td> Hello, World! <tr> <td> Это ячейка номер 3 <td> 4 </table>

Cell #1 Hello, World! Это ячейка номер 3 4

У команды <table> есть следующие атрибуты:

align

left, center, rigth

width

ширина в пикселях или процентах

height

высота

border

ширина границы(рамки) в пикселях

bordercolor

цвет границы(рамки)

cellspacing

расстояние между ячейками

cellpadding

расстояние от внутренней рамки ячейки до ее содержимого

background

фоновая картинка

title

устанавливает всплывающую подсказку

frame

определяет, какие стороны рамки будут видны, возможные значения:

• void - никаких сторон. В спецификации HTML4.0 написано, что это значение по умолчанию, однако броузер Internet Explorer почему-то об этом не знает. Когда я установил это значение, то рамка исчезла.
• above - только сверху
• below - только снизу
• hsides - только горизонтальные рамки
• vsides - только вертикальные
• lhs - только левые рамки
• rhs - только правые
• box - со всех сторон
• border - тоже самое

rules

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

• none - нет правил, значение по умолчанию
• groups - применяются к группам, здесь я не буду рассматривать эти команды за ненадобностью
• rows - применяются к рядам
• cols - к ячейкам
• all - ко всему

Сначала мы рассмотрим использование таблиц по их прямому назначению, а потом перейдем к эффективному форматированию HTML-документа при помощи таблиц. Пример таблицы с выравниванием по центру, размерами 300х200 пикселей, шириной рамки пять пикселей и синим цветом рамки. Расстояние между соседними ячейками устанавливается равным десяти пикселям. Расстояние от внутренней рамки ячейки до содержимого тридцать пикселей.

<table align=center width=300 height=200 border=5 bordercolor=0000FF cellspacing=10 cellpadding=30 background=images/07.jpg title="Всплывающая подсказка для данной таблицы"> <tr><td> 1 <td> 2 <tr><td> 3 <td> 4 </table>

1 2 3 4

Для вывода данных в таблицах лучше использовать ряды с чередующимися оттенками одного цвета и узкой рамкой. Ниже приведены два примера. Обратите внимание на то, как построена рамка в первой, а как во второй таблице. В первом случае устанавливается атрибут border=1. Во втором случае я хотел получить рамку размером один пиксель черного цвета. Но установив border=1 и bordercolor=000000, я получил черную рамку шириной в два пиксела. Пришлось извернуться, установить пространство между ячейками в один пиксель и задать цвет фона таблицы черным. Отлаживался я на броузере Internet Explorer 4.0. В Netscape 4.06 для того чтобы получить красивые рамки, придется делать вложенные таблицы. Кстати, здесь я опираюсь на стандарт HTML4.0, поэтому Netscape4х может многие примеры отображать некорректно.

<table align=center width=300 border=1 cellspacing=0 cellpadding=0> <tr bgcolor=CCCCFF> <td> Имя<td> Фамилия <tr bgcolor=EEEEEE> <td> Иван<td> Иванов <tr bgcolor=CCCCCC> <td> Петр<td> Петров </table> <br> <table align=center width=300 border=0 cellspacing=1 cellpadding=0 bgcolor=000000> <tr bgcolor=CCCCFF align=center> <td> Имя<td> Фамилия <tr bgcolor=EEEEEE> <td> Иван<td> Иванов <tr bgcolor=CCCCCC> <td> Петр<td> Петров </table>

Имя Фамилия Иван Иванов Петр Петров Имя Фамилия Иван Иванов Петр Петров

Теперь давайте рассмотрим атрибуты команд <tr> и <td>

width

задает ширину ряда

height

задает высоту ряда

bgcolor

цвет фона

align

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

valign

то же самое, но по вертикали

title

всплывающая подсказка

background

фоновая картинка

  <table align=center  width=300  border=0
         cellspacing=1 cellpadding=0
         bgcolor=000000>
    <tr bgcolor=CCCCFF align=center>
        <td> 1 
        <td colspan=2> Эта ячейка находится в двух колонках 
        <td rowspan=3> А эта ячейка - в трех рядах
    <tr bgcolor=EEEEEE>
        <td> Иванов 
        <td> Иван 
        <td> Иванович 
    <tr bgcolor=CCCCCC> 
        <td> Петров
        <td> Петр 
        <td> Петрович
  </table>

Упражнение

Форматирование HTML-документов.

Здесь мы рассмотрим приемы эффективного форматирования HTML-документов при помощи таблиц.

Документ фиксированной ширины

Вы можете обратить внимание на страницы в Сети, где форматирование текста не зависит от размеров окна броузера. Это так называемые фиксированные сайты или HTML-документ. У них четко задана ширина. В самом начале такого документа после команды <body> идет таблица:

 <table align=center width=700>
 <tr><td>

Теперь форматирование текста не зависит от размеров окна броузера. В любом окне текст будет выглядеть одинаково, шириной в 700 пикселей. Не забудьте перед закрывающей командой </body> закрыть эту таблицу - </table>.

Несколько элементов на одной линии

При вставке формул в документ стоит задача разместить на одном уровне картинку формулы и ее номер или название.

<table width=100%> <tr> <td width=50% align=center><img src=images/it03.gif></td> <td width=50% align=center>(1)</td> </tr> </table>

(1)

Создание "окошек"

Новости на главных страницах сайтов, сообщения в гостевых книгах часто оформляют в окошке. Такие окошки делаются при помощи таблиц. Вы устанавливаете cellspacing=0 и cellpadding=0, а далее делаем красивое окошко. Рамки являются ячейками и рядами. Вот пример:

<table align=center width=300 border=0 cellspacing=0 cellpadding=0 bgcolor=000000> <tr bgcolor=CCCCFF> <td colspan=3> Тема новости <tr bgcolor=EEEEEE> <td width=2 bgcolor=CCCCFF> <td> Вчера завершил работу над третьей главой книги. <td width=2 bgcolor=CCCCFF> <tr bgcolor=EEEEEE> <td width=2 bgcolor=CCCCFF> <td align=right> 10 декабря 2000 <td width=2 bgcolor=CCCCFF> <tr bgcolor=CCCCFF> <td colspan=3 height=2> </table>

Тема новости Вчера завершил работу над третьей главой книги. 10 декабря 2000

Отступы

При помощи таблиц можно делать горизонтальные и вертикальные отступы в пикселях. Учтите, что в Netscape пустая ячейка не отображается, поэтому в нее надо вставлять прозрачный gif-файл. Кстати, это еще один прием форматирования. Вы создаете прозрачный gif, размером один на один пиксель, а в команде img указываете нужные вам ширину и высоту.

Главная страница сайта

Ну и наконец большинство главных страниц сайтов создано при помощи таблиц, в ячейках которых располагаются меню, графика и текст. В качестве примеров можете посмотреть HTML-код главных страниц сайтов наших работ. Некоторая дополнительная информация по верстке будет дана в заключительной части книги.