Навигация
Главная
Поиск
Форум
FAQ's
Ссылки
Карта сайта
Чат программистов

Статьи
-Delphi
-C/C++
-Turbo Pascal
-Assembler
-Java/JS
-PHP
-Perl
-DHTML
-Prolog
-GPSS
-Сайтостроительство
-CMS: PHP Fusion
-Инвестирование

Файлы
-Для программистов
-Компонеты для Delphi
-Исходники на Delphi
-Исходники на C/C++
-Книги по Delphi
-Книги по С/С++
-Книги по JAVA/JS
-Книги по Basic/VB/.NET
-Книги по PHP/MySQL
-Книги по Assembler
-PHP Fusion MOD'ы
-by Kest
Professional Download System
Реклама
Услуги

Автоматическое добавление статей на сайты на Wordpress, Joomla, DLE
Заказать продвижение сайта
Программа для рисования блок-схем
Инженерный калькулятор онлайн
Таблица сложения онлайн
Популярные статьи
OpenGL и Delphi... 65535
Форум на вашем ... 65535
HACK F.A.Q 65535
Бип из системно... 65535
Гостевая книга ... 65535
Invision Power ... 65535
Содержание сайт... 65535
Организация зап... 65535
Вызов хранимых ... 65535
Программируемая... 65535
Эмулятор микроп... 65535
Подключение Mic... 65535
Создание потоко... 65535
Приложение «Про... 65535
Оператор выбора... 65535
Создание отчето... 64212
Модуль Forms 63941
Пример работы с... 61019
ТЕХНОЛОГИИ ДОСТ... 60811
Имитационное мо... 56342
Реклама
Сейчас на сайте
Гостей: 7
На сайте нет зарегистрированных пользователей

Пользователей: 13,080
новичок: setan
Новости
Реклама
Выполняем курсовые и лабораторные по разным языкам программирования
Подробнее - курсовые и лабораторные на заказ
Delphi, Turbo Pascal, Assembler, C, C++, C#, Visual Basic, Java, GPSS, Prolog, 3D MAX, Компас 3D
Заказать программу для Windows Mobile, Symbian

Компьютерный магазин на Turbo Pascal (База данных) + Пояснительная записка
База данных электронного документооборота на Delphi + бд Intebase
Моделирование работы ЭВМ на GPSS + Пояснительная записка

Реклама



Подписывайся на YouTube канал о программировании, что бы не пропустить новые видео!

ПОДПИСЫВАЙСЯ на канал о программировании
Базовая структура таблицы
Каждая таблица состоит из трех основных элементов: собственно таблицы, строк и ячеек. Рассмотрим базовые элементы.
Пример. Обратимся к простейшей сетке 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 16:35:48 · 0 Комментариев · 2586 Прочтений · Для печати

• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •


Комментарии
Нет комментариев.
Добавить комментарий
Имя:



smiley smiley smiley smiley smiley smiley smiley smiley smiley
Запретить смайлики в комментариях

Введите проверочный код:* =
Рейтинги
Рейтинг доступен только для пользователей.

Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.

Нет данных для оценки.
Гость
Имя

Пароль



Вы не зарегистрированны?
Нажмите здесь для регистрации.

Забыли пароль?
Запросите новый здесь.
Поделиться ссылкой
Фолловь меня в Твиттере! • Смотрите канал о путешествияхКак приготовить мидии в тайланде?
Загрузки
Новые загрузки
iChat v.7.0 Final...
iComm v.6.1 - выв...
Visual Studio 200...
CodeGear RAD Stud...
Шаблон для новост...

Случайные загрузки
FormShape [Исходн...
DelphiXIsoDemo1
Delphi 2005 Учимс...
База данных: Книж...
Delphi. Готовые а...
Время загрузки ...
Cтатьи Королевств...
«Философия» прогр...
EMS QuickExport S...
PBEditPack
Иллюстрированный ...
Exe in exe
ProLIB18
Image Browser [Ис...
Язык программиров...
UmEdit
PDA версия сайта
Indy in Depth Глу...
Progressbar
Error mod

Топ загрузок
Приложение Клие... 100455
Delphi 7 Enterp... 86155
Converter AMR<-... 20071
GPSS World Stud... 12523
Borland C++Buil... 11612
Borland Delphi ... 8526
Turbo Pascal fo... 7035
Visual Studio 2... 4992
Калькулятор [Ис... 4744
FreeSMS v1.3.1 3539
Случайные статьи
Game Boy, 1989 год
FTP-сервером, испо...
Модульные тесты: п...
13.5. Принципы
"Недокументированн...
Структура коллекци...
Объектные модели M...
СВОЙСТВА
Блок BUFFER
В чем сложность ст...
Перечислимые свойства
Выполнение обновле...
• тип службы (_lda...
Системы голосовани...
Казино Война - Ваш...
Минимальное произв...
Раскрытая запись а...
Телевизионные сист...
Игровые автоматы о...
Монтирование NFS
Определите тип инф...
Понимание системы ...
Описание предметно...
Настройте коммутир...
Урок 4: прерывания
Статистика



Друзья сайта
Программы, игры


Полезно
В какую объединенную сеть входит классовая сеть? Суммирование маршрутов Занимают ли таблицы память маршрутизатора?