Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Компоновка HTML - использование таблицСодержание книги
Поиск на нашем сайте Как известно тег <table> используется для отображения таблиц в HTML документах. У этого тега имеется атрибут border, указывающий толщину границы. И если его значение равно нулю, то граница не видна, видно лишь содержимое ячеек. Это и используется для компоновки страниц. В распоряжении дизайнера появляется не одна большая область для вставки элементов, а бесконечное число более мелких зон. Наберите следующий пример. <html><body><p>Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница. Все, что находится ниже этого текста, располагается в двухячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.</p> <table border="0" width="100%"><tr><td текст выводится в левомстолбце.</td><td этот текст выводится вправом столбце.</td></tr></table></body></html>Пример выполнения данного HTML-кода В этом примере тег HTML <table> используется для деления части Web-страницы на два столбца, причем в данном случае ширина столбцов одинакова. Однако это не является обязательным условием, что показано в следующем примере. <html><body><p>Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница. Все что находится ниже этого текста располагается в двухячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.</p> <table border="0" width="100%"><tr><td текст выводится в левомстолбце. Ширина этого столбца 20%</td><td width="80%"этот текст выводится в правом столбце. Ширина столбца80%</td></tr></table></body></html>Пример выполнения данного HTML-кода Особенность состоит в использовании таблицы без видимой рамки и возможно небольшого дополнительного отступа внутри ячеек таблицы. Не имеет значения, сколько текста будет размещено на этой странице, он будет оставаться в пределах своего столбца. После добавления таблицы для разметки страницы мы получаем несколько независимых областей, с которыми мы можем работать независимо, задавать цвет фона, шрифты, добавлять вложенные таблицы для разбиения ячеек полученной части еще на более мелкие элементы. Однако создавать большую вложенность таблиц не рекомендуется - так увеличивается размер страницы. Гораздо рациональнее использовать объединение ячеек. <html><body><p>Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница, и общего заголовка. Все что находится ниже этого текстарасполагается в трех ячейках таблицы, причем для верхней ячейки указан атрибутcolspan="2". Как можно видеть, есть левый столбец и правый столбец, а такжеобщий заголовок. Для каждой ячейки указан свой цвет фона.</p><table border="0" cellpadding="0" cellspacing="0"><tr height="150px"><td colspan="2" bgcolor="#cccccc">Этот текст выводится в верхней ячейке таблицы.</td></tr><tr height="500px"><td bgcolor="#dddddd">Этот текст выводится в левом столбце. Ширина этого столбца 20%</td><td bgcolor="#eeeeeee">Аэтот текст выводится в правом столбце. Ширина столбца 80%</td></tr></table></body></html>Пример выполнения данного HTML-кода Этот же эффект можно получить и применив две таблицы вложенных одна в другую. <html><body><p>Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница, и общего заголовка. Все что находится ниже этого текстарасполагается в ячейках таблицы, причем здесь применяется вложенность однойтаблицы в другую. Как можно видеть, есть левый столбец и правый столбец, атакже общий заголовок. Для каждой ячейки указан свой цвет фона.</p> <table border="0" cellpadding="0" cellspacing="0"><tr height="150px"><td bgcolor="#cccccc">Этот текст выводится в верхней ячейке таблицы.</td></tr> <tr height="500px"><td width="100%"><table border="0" height="100%" cellpadding="0" cellspacing="0"><tr><td bgcolor="#dddddd"> Этот текст выводится в левом столбце. Ширина этого столбца 20%</td><td bgcolor="#eeeeeee">А этот текст выводится в правом столбце. Ширина столбца 80%</td></tr></table></td></tr></table> </body></html>Пример выполнения данного HTML-кода Как можно видеть мы получили одинаковый результат, однако в первом случае размер кода получился значительно меньше, и кроме того сам исходный код более понятен.
|
||
|
|
Последнее изменение этой страницы: 2021-03-10; просмотров: 121; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.216.42 (0.008 с.) |
