Каждая таблица состоит из трех основных элементов: собственно таблицы, строк и ячеек. Рассмотрим базовые элементы.
Пример. Обратимся к простейшей сетке 3x3, часто используемой для игры в крестики-нолики (рис. 5.1). Вся содержательная часть заключена внутри элемента «таблица». В этом примере использован единственный дополнительный атрибут - border (граница). Его значение (в пикселах) определяет ширину граничных линий, обрамляющих таблицу и ячейки. Для большинства браузеров значение атрибута border по умолчанию принимается равным единице, что указывает на отсутствие границ. Однако в некоторых браузерах этот параметр (также по умолчанию) устанавливают равным нулю. Целесообразна инициализация данного параметра, например:
<table border="l">
Работа над структурой таблицы подразумевает описание составляющих элементов: строк и ячеек. Понятие «столбец» не вводится и не используется. Визуально столбцы образуются ячейками отдельной строки, которые связаны с такими же ячейками, размещенными на соседних строках (выше и ниже данной) и находящимися на одной линии. Однако описание отдельной строки и всех ячеек, находящихся в ней, всегда будет предшествовать переходу к новой строке. В нашем примере поле для игры в крестики-нолики состоит из трех ячеек в первой строке, каждый элемент набора имеет 100 пикселов в ширину и 100 в высоту:
<tr>
<td width="100" height= "10 0"> </td>
<td width="100" heights "100"> </td>
<td width="100" heights "100"> </td>
</tr>
Примечание Символ nbsp (неразрывный пробел) применяется в данном случае для заполнения ячеек. Это позволяет отобразить объект при просмотре элемента в браузере. Незаполненные ячейки таблицы часто оказываются свернутыми самим браузером и выводятся в виде пустой области.
Прежде чем закрыть элемент «таблица», следует повторить предыдущую запись для второй и третьей строк:
<tr>
<td width="100" heights"100"> </td>
<td width="100" heights"100"> </td>
<td width="100" heights"100"> </td>
</tr>
<tr>
<td width="100" height="100"> </td>
<td width="100" height="100"> </td>
<td width="100" height="100"> </td> </tr>
Незаполненная структура - оболочка для таблицы - показана на рис. 5.2.
Заполните ячейки таблицы крестиками и ноликами - например, так, как показано на рис. 5.1. Возможно, вы обратили внимание, что при вводе символа в ячейку он выравнивается по вертикали относительно границ, однако изображение привязано клевой границе ячейки. Чтобы зафиксировать символ строго по центру ячейки, необходимо добавить атрибут горизонтального выравнивания содержимого. Инструкция выравнивания может применяться как для каждой ячейки отдельно, так и для всей строки в целом. Горизонтальное выравнивание устанавливается с помощью атрибута align, вертикальное - valign. Поскольку выравнивание для всех ячеек внутри строки одинаково, мы разместили атрибуты внутри описания элемента «строка»; для горизонтального выравнивания использовано значение "center", для вертикального - "middle":
<tr align="center" valign="middle">
Собрав вместе все приведенные инструкции, получим документ, показанный на рис. 5.1 (листинг 5.1).
Листинг 5.1. Программа ttt.html
<table border="l">
<tr align="center" valign="middle">
<td width= <td width= <td width= </tr> <tr align= <td width= <td width= <td width= </tr>
<tr align= <td width= <td width= <td width= </tr> </table>
100" height="100">X</td> 100" height="100">0</td> 10 0" height ="10 0"> </td>
center" valign="middle"> 100" height="100">0</td> 100" height="100">X</td> 100" height="100">X</td>
100 100
center" valign="middle"> 100" height="100">0</td>
height="100">X</td> height="100">0</td>
Пример. Рассмотрим проект календаря с визуальным представлением каждого месяца и выбором фона для ячеек, заголовков для элементов таблиц и окон, а также ячеек, включающих несколько других. Календарь начинается со строки из семи ячеек, соответствующих дням недели. Эти ячейки служат заголовками для остальных элементов (ячеек) в столбце и описываются как «заголовок столбца таблицы» - элемент th. Свойства каждой ячейки будут одинаковыми, за исключением содержимого. Таким образом, необходимые атрибуты задаются только для элемента tr, а не повторяются семь раз для ячеек. С атрибутами выравнивания вы познакомились в предыдущем примере. Однако атрибут, определяющий цвет фона, здесь еще не рассматривался. Его название - bgcolor - встречалось в описании элемента body. Значение этого атрибута может быть записано символами шестнадцатеричной системы счисления либо названием цвета. В качестве примера мы выбрали бледно-желтый цвет, которому соответствует шестнадцатеричное значение #FFFF9 9:
<table border="l">
height="35"
<tr align="center" valign="top" bgcolor="#FFFF99" width="100"> <th>BocKpeceHbe</th> <th>noHeflenbHMK</th> <th>BTopHMK</th> <th>Cpefla</th> <th>4eTBepr</th> <th>nHTHMna</th> <th>Cy66oTa</th> </tr>
Следующая строка - первая строка ячеек, указывающих на числа месяца, причем первые пять из них не содержат никаких данных. Здесь вы можете поместить символ неразрывного пробела, как в примере с игрой в крестики-нолики. Однако, если документ должен соответствовать печатной форме календаря, начальную незаполняемую область лучше изображать не пустыми ячейками, а однородным закрашенным пространством. Для этого замените первые пять ячеек первой строки одной ячейкой покрытия, применив атрибут colspan, размещенный внутри элемента td. Нетрудно догадаться, что его значением станет число покрытых ячеек. Атрибуты выравнивания внутри ячейки выбираются следующим образом: по горизонтали - по левому краю клетки; по вертикали - по высоте. Таким образом, значение даты будет располагаться в верхнем левом углу. Для замещения ячеек однородной областью имеется специальный атрибут - rowspan, который позволяет закрыть интервал, состоящий из нескольких строк для каждой ячейки. В приведенном примере используется только атрибут colspan:
<tr align="left" valign="top">
<td colspan="5" bgcolor="#CCCCCC" height="100"
width="10 0"> </td>
<td width="80" height="80">l</td>
<td width="80" height="80">2</td>
</tr>
Примечание
Первая ячейка в данной строке покрывает пять, однако атрибуты height и width устанавливаются так, словно независимая ячейка заняла единственный столбец. Значение атрибута colspan равно 5, поэтому ячейка покрытия займет область в 500 пикселов (100X5). Высота ячейки покрытия при этом не изменится, поскольку атрибут rowspan не применяется.
Каждая из следующих четырех строк использует идентичную запись (за исключением значения даты, вписываемого в ячейку):
<tr align="left <td width="80
<td width="80 <td width="80 <td width="80
<td width="80 <td width="80 <td width="80 </tr>
" valign="top">
height="80">3</td>
height="80">4</td>
height="80">5</td>
10 ">7</td> 10 ">8</td> !0">9</td>
height="80">6</td>
height=" height=" height="
Законченный документ представлен в листинге 5.2 и на рис. 5.3.
ЛИСТИНГ 5.2. Календарь
<tr <th <th <th <th <th <th
align= width= width= width= widths width= width= <th width=
<table border="l">
80 80 80 80 80 80 80"
"center" valign="top" bgcolor="#FFFF99">
height="25">BocKpeceHbe</th> height="25">noHeflenbHMK</th> height ="25">Вторник</th> height="2 5">Cpefla</th> height="25">4eTBepr</th> height="25">Пятница</1Ь height="2 5">Cy66oTa</th>
</tr>
<tr align="left" valign="top"> <td colspan="5" bgcolor="#CCCCCC" </td>
Опубликовал vovan666
April 05 2013 12:35:48 ·
0 Комментариев ·
3356 Прочтений ·
• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •
Комментарии
Нет комментариев.
Добавить комментарий
Рейтинги
Рейтинг доступен только для пользователей.
Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.
Нет данных для оценки.
Гость
Вы не зарегистрированны? Нажмите здесь для регистрации.
Главная
Каталог файлов
