Навигация
Главная
Поиск
Форум
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
Создание отчето... 63299
Модуль Forms 63202
ТЕХНОЛОГИИ ДОСТ... 59870
Пример работы с... 58762
Имитационное мо... 55326
Реклама
Сейчас на сайте
Гостей: 16
На сайте нет зарегистрированных пользователей

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

Информационная система - продуктовый магазин на Turbo Pascal (База данны...
Калькулятор на Delphi с переводом в другую систему исчисления + Блок схемы
Метод половинного деления для нахождения корня уровнения на Turbo Pascal...

Реклама



Подписывайся на 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 Комментариев · 2518 Прочтений · Для печати

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


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



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

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

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

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

Пароль



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

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

Случайные загрузки
Ehlib
Strawberry Prolog...
Клавиатурный трен...
База Allsubmitter...
Популярные загрузки
Adapter (пример D...
PHP 5. Практика с...
Разработка клиент...
Error mod
Краснов М. - Open...
Цветной Grid
PHP, MySQL и Drea...
Delphi World 6.0
SODA [Исходник на...
Голосование для ...
Искусство програм...
DateEdit
Ранги для форума
Delphi Быстрый Ст...
Проигрыватель Mp3

Топ загрузок
Приложение Клие... 100426
Delphi 7 Enterp... 85345
Converter AMR<-... 20062
GPSS World Stud... 12258
Borland C++Buil... 11463
Borland Delphi ... 8428
Turbo Pascal fo... 7014
Visual Studio 2... 4985
Калькулятор [Ис... 4686
FreeSMS v1.3.1 3530
Случайные статьи
Одномерные массивы
Объекты-функции
Невозможность созд...
Состояние потока и...
Реализация шаблоно...
Табл. 4. Анализ тр...
Устраните самую кр...
Исследование персо...
UNIX предъявляет р...
Потребность в глоб...
Команда DELETE
• Kerberos
Обновленные источн...
Полосы понижения и...
РезюмеМы рассмотре...
Связывание потоков...
Большой босс
Операции. Операции...
Как заработать на ...
MultiLength
Джейн Сильвер
Шпалера
3. Можно ли примен...
Изображения-карты
Кейс-модинг
Статистика



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


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