8 (800) 333-3041Звонок бесплатный для
всех регионов России
Еще раз об HTML и немного о CSS Оглавление Создание HTML-форм

Таблицы

Таблицы выполняют две функции. Первая - представление и оформление данных в виде таблиц. В этом случае таблицы, как правило, имеют видимые границы, иногда - рисунок в качестве заднего фона. Таблицы также являются главным элементом языка 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 - ко всему
Я перечислил параметры frame и rules затем, чтобы дотошные читатели не завалили меня письмами с упреками, что я что-то забыл. У меня ни разу не возникала в них необходимость. Если у вас найдется красивый пример использования этих параметров, то, пожалуйста, пришлите его мне.

Сначала мы рассмотрим использование таблиц по их прямому назначению, а потом перейдем к эффективному форматированию 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
фоновая картинка
У команды <td> есть еще два атрибута colspan и rowspan. Они определяют, для какого количества колонок и рядов, ячейка является общей, или другими словами в каком количестве колонок и рядов состоит данная ячейка. По умолчанию эти атрибуты имеют значение единица, т.е. ячейка находится в одном ряду и ровно в одном столбце.
  <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>
1 Эта ячейка находится в двух колонках А эта ячейка - в трех рядах
Иванов Иван Иванович
Петров Петр Петрович

Упражнение

Напишите HTML-код для следующей таблицы. В качестве подсказок я указал номера рядов и ячеек. Попробуйте реализовать это несколькими вариантами различного кода. Подсчитайте, сколько всего существует различных вариантов.
1_1 1_2 1_3 1_4
2_1 2_2
3_1 3_2 3_3 3_4 3_5
4_1 4_2 4_3 4_4
5_1 5_2 5_3 5_4
6_1 6_2
И последнее, что стоит сказать непосредственно о свойствах таблиц, то, что они могут быть вложенными. В любой ячейке можно разместить таблицу, рисунок и любой другой объект. Но настоятельно рекомендую избегать вложенных таблиц. Используйте атрибуты colspan и rowspan. Вложенные таблицы часто некорректно отображаются некоторыми броузерами. Размер вашего HTML-кода увеличивается и сам HTML-код усложняется. Например, все что вы видите на экране, находится в таблице, но это уже относится к форматированию, и об этом в следующем параграфе.

Форматирование 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-код главных страниц сайтов наших работ. Некоторая дополнительная информация по верстке будет дана в заключительной части книги.

Eng
Наверх