русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

ВВЕДЕНИЕ


Дата добавления: 2013-12-23; просмотров: 926; Нарушение авторских прав


Компоновка HTML - использование таблиц

Как известно тег <table> используется для отображения таблиц в HTML документах. У этого тега имеется атрибут border, указывающий толщину границы. И если его значение равно нулю, то граница не видна, видно лишь содержимое ячеек. Это и используется для компоновки страниц. В распоряжении дизайнера появляется не одна большая область для вставки элементов, а бесконечное число более мелких зон.

Наберите следующий пример.

<html><body><p>Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница. Все, что находится ниже этого текста, располагается в двухячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.</p> <table border="0" width="100%"><tr><td width="50%" valign="top">Этот текст выводится в левомстолбце.</td><td width="50%" valign="top">А этот текст выводится вправом столбце.</td></tr></table></body></html>

Пример выполнения данного HTML-кода

В этом примере тег HTML <table> используется для деления части Web-страницы на два столбца, причем в данном случае ширина столбцов одинакова. Однако это не является обязательным условием, что показано в следующем примере.

<html><body><p>Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница. Все что находится ниже этого текста располагается в двухячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.</p> <table border="0" width="100%"><tr><td width="20%" valign="top">Этот текст выводится в левомстолбце. Ширина этого столбца 20%</td><td width="80%"valign="top">А этот текст выводится в правом столбце. Ширина столбца80%</td></tr></table></body></html>

Пример выполнения данного HTML-кода



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

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

После добавления таблицы для разметки страницы мы получаем несколько независимых областей, с которыми мы можем работать независимо, задавать цвет фона, шрифты, добавлять вложенные таблицы для разбиения ячеек полученной части еще на более мелкие элементы. Однако создавать большую вложенность таблиц не рекомендуется - так увеличивается размер страницы. Гораздо рациональнее использовать объединение ячеек.

<html><body><p>Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница, и общего заголовка. Все что находится ниже этого текстарасполагается в трех ячейках таблицы, причем для верхней ячейки указан атрибутcolspan="2". Как можно видеть, есть левый столбец и правый столбец, а такжеобщий заголовок. Для каждой ячейки указан свой цвет фона.</p><table border="0" width="100%" cellpadding="0" cellspacing="0"><tr height="150px"><td width="100%" valign="top" colspan="2" bgcolor="#cccccc">Этот текст выводится в верхней ячейке таблицы.</td></tr><tr height="500px"><td width="20%" valign="top" bgcolor="#dddddd">Этот текст выводится в левом столбце. Ширина этого столбца 20%</td><td width="80%" valign="top" bgcolor="#eeeeeee">Аэтот текст выводится в правом столбце. Ширина столбца 80%</td></tr></table></body></html>

Пример выполнения данного HTML-кода

Этот же эффект можно получить и применив две таблицы вложенных одна в другую.

<html><body><p>Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница, и общего заголовка. Все что находится ниже этого текстарасполагается в ячейках таблицы, причем здесь применяется вложенность однойтаблицы в другую. Как можно видеть, есть левый столбец и правый столбец, атакже общий заголовок. Для каждой ячейки указан свой цвет фона.</p> <table border="0" width="100%" cellpadding="0" cellspacing="0"><tr height="150px"><td width="100%" valign="top" bgcolor="#cccccc">Этот текст выводится в верхней ячейке таблицы.</td></tr> <tr height="500px"><td width="100%"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"><tr><td width="20%" valign="top" bgcolor="#dddddd"> Этот текст выводится в левом столбце. Ширина этого столбца 20%</td><td width="80%" valign="top" bgcolor="#eeeeeee">А этот текст выводится в правом столбце. Ширина столбца 80%</td></tr></table></td></tr></table> </body></html>

Пример выполнения данного HTML-кода

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

 

Дискретная математика – самостоятельное направление современной математики. Она изучает математические модели объектов, процессов, зависимостей, существующих в реальном мире, с которыми имеют дело в технике, информатике и других областях знаний.

В данном учебном пособии содержание разделов дискретной математики определяются требованиями государственного образовательного стандарта профессионального образования, предъявляемыми к дисциплине «Дискретная математика» специальности «Прикладная информатика в экономике» и родственных специальностей. К этим разделам относятся: элементы теории множеств, математической логики, теории графов.

По программе курса выполняется контрольная работа и расчетно-графическое задание. Студенты обучающиеся по ускоренной программе (3,5 года) выполняют только контрольную работу.

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



<== предыдущая лекция | следующая лекция ==>
Компоновка документа в HTML | НАЧАЛЬНЫЕ ПОНЯТИЯ ТЕОРИИ МНОЖЕСТВ


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.013 сек.