Теги для работы с фреймами

Тег < frameset> определяет, как разделить окно на фреймы. Каждый frameset определяет набор строк или столбцов. Значения rows/cols указывают величину области экрана, которую будут занимать каждая строка/столбец. Атрибут framespacing - определяет расстояние между фреймами в пикселах.

Тег < frameset> является контейнером для всех остальных тегов фреймов. Между начальным и конечным тэгами кроме элементов < frame> и < noframe> могут находиться другие элементы < frameset>. То есть элемент < frameset> поддерживает вложенные конструкции фреймов.

Тег < frame> определяет, какой документ HTML поместить в каждый фрейм. Тег < frame> имеет атрибут noresize=" noresize", который запрещает изменять размер фрейма пользователю.

В примере ниже задана фреймовая структура с двумя столбцами. Для первого столбца задано 25% ширины окна браузера. Для второго фрейма задано 75% ширины окна браузера. В первый столбец помещается документ HTML " frame_1.htm", а во второй столбец помещается документ HTML " frame_2.htm":

< frameset cols=" 25%, 75%" > < frame src=" frame_1.htm" > < frame src=" frame_2.htm" > < /frameset>

Необходимо учитывать, что браузер может не поддерживать фреймы, в этом случае следует использовать тег < noframes>.

При использовании фреймов теги < body> < /body> не используются. Однако, если добавить тег < noframes>, содержащий некоторый текст для браузеров, которые не поддерживают фреймы, необходимо будет поместить этот текст между тегами < body> < /body>. Например,

< html> < frameset cols=" 25%, 50%, 25%" > < frame src=" frame_1.htm" > < frame src=" frame_2.htm" > < frame src=" frame_3.htm" > < noframes> < body> Ваш браузер не поддерживает фреймы! < /body> < /noframes> < /frameset> < /html>

Горизонтальные и вертикальные фреймы

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

< html> < frameset rows=" 50%, 50%" > < frame src=" frame_1.htm" > < frameset cols=" 25%, 75%" > < frame noresize=" noresize" src=" frame_2.htm" > < frame src=" frame_3.htm" > < /frameset> < /frameset> < /html>

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

Фрейм навигации

Этот пример показывает, как сделать фрейм навигации. Фрейм навигации содержит список ссылок, указывающих на второй фрейм.

< html> < frameset cols=" 120, *" > < frame src=" menu.htm" > < frame src=" frame_1.htm" name=" frame_1" > < /frameset> < /html>

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

Файл с именем " menu.htm" содержит ссылки на другие документы HTML, которые будут загружаться в frame_1. Исходный код для ссылок:

< a href =" file_1.htm" target =" frame_1" > Файл 1< /a> < br> < a href =" file_2.htm" target =" frame_1" > Файл 2< /a> < br> < a href =" file_3.htm" target =" frame_1" > Файл 3< /a>

Встроенный фрейм

Этот пример показывает, как создать встроенный фрейм (фрейм внутри страницы HTML).

< html> < body> < iframe src=" menu.html" > < /iframe> < p> Некоторые старые браузеры не поддерживают iframes.< /p> < p> В этом случае встроенный фрейм (iframe) не будет виден.< /p> < /body> < /html>

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

В web-дизайне таблицы являются одним из основных методов структурирования информации. Они представляют данные в виде удобных для восприятия колонок и строк, что значительно упрощает анализ информации. С их помощью можно легко отделить одну часть страницы от другой.

Основным тегом для обозначения таблицы является < table>. Элемент TABLE представляет собой тег-контейнер, в котором размещается содержимое таблицы. Построение таблицы осуществляется по строкам, для обозначения которых применяется контейнер TR. Внутри контейнера строк помещаются контейнеры для обозначения ячеек. Стандарт HTML определяет два типа контейнеров для обозначения ячеек < th> и < td>. Первый предназначен для обозначения заголовков, а второй для данных в ячейках. Отличие этих двух элементов заключается лишь в том как их содержимое отображается браузером, заголовки большинство браузеров выделяют полужирным шрифтом и центрируют в своих ячейках. Ячейка данных может содержать текст, изображения, списки, параграфы, формы, горизонтальные линейки, таблицы и т. д.

Примеры

Рассмотрим вышеизложенное на примерах различного вида таблиц.

< html> < body> < p> Каждая таблица начинается с тега table. Каждая строка таблицы начинается с тега tr.Каждый элемент данных таблицы начинается с тега td.< /p> < h1> Это пример простейшей таблицы, содержащей одну строку и одну ячейку.< /h1> < table border=" 1" > < tr> < td> Одна строка и одна ячейка< /td> < /tr> < /table> < h1> Одна строка и три столбца: < /h1> < table border=" 1" > < tr> < td> столбец 1< /td> < td> столбец 2< /td> < td> столбец 3< /td> < /tr> < /table> < h1> Две строки и три столбца: < /h1> < table border=" 1" > < tr> < td> 1.1< /td> < td> 1.2< /td> < td> 1.3< /td> < /tr> < tr> < td> 2.1< /td> < td> 2.2< /td> < td> 2.3< /td> < /tr> < /table> < h1> Рамка таблицы< /h1> < h1> Обычная рамка: < /h1> < table border=" 1" > < tr> < td> Первая< /td> < td> строка< /td> < /tr> < tr> < td> Вторая < /td> < td> строка< /td> < /tr> < /table> < h1> Толстая рамка: < /h1> < table border=" 10" > < tr> < td> Первая< /td> < td> строка< /td> < /tr> < tr> < td> Вторая < /td> < td> строка< /td> < /tr> < /table> < table border=" 1" > < tr> < td> строка 1, ячейка 1< /td> < td> строка 1, ячейка 2< /td> < /tr> < tr> < td> строка 2, ячейка 1< /td> < td> строка 2, ячейка 2< /td> < /tr> < /table> < /html> < /body>

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

Для тега table определены следующие атрибуты.

• align - определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию - left.
• valign - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.
• border - определяет ширину внешней рамки таблицы (в пикселах). При BORDER=" 0" или при отсутствии этого параметра рамка отображаться не будет.
• cellpadding - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
• cellspacing - определяет расстояние (в пикселах) между границами соседних ячеек.
• width - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
• height - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
• bgcolor - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
• background - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

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

Такие элементы как < thead>, < tbody> и < tfoot> используются редко в связи с тем, что не все браузеры их поддерживают.

Для тегов < td> и < th> очень полезными являются атрибуты colspan и rowspan. Первый показывает сколько ячеек надо объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным. Продемонстрируем на примере.

< html> < body> < h4> Правильное применение colspan: < /h4> < table border=" 1" > < tr> < td colspan=" 2" > 100< /td> < td> 300< /td> < /tr> < tr> < td> 400< /td> < td> 500< /td> < td> 600< /td> < /tr> < /table> < h4> Неправильное применение colspan: < /h4> < table border=" 1" > < tr> < td colspan=" 2" > 100< /td> < td> 200< /td> < td> 300< /td> < /tr> < tr> < td> 400< /td> < td> 500< /td> < td> 600< /td> < /tr> < /table> < h4> Правильное применение rowspan: < /h4> < table border=" 1" > < tr> < td rowspan=" 2" > 100< /td> < td> 200< /td> < td> 300< /td> < /tr> < tr> < td> 500< /td> < td> 600< /td> < /tr> < /table> < h4> Неправильное применение rowspan: < /h4> < table border=" 1" > < tr> < td rowspan=" 2" > 100< /td> < td> 200< /td> < td> 300< /td> < /tr> < tr> < td> 400< /td> < td> 500< /td> < td> 600< /td> < /tr> < /table> < /body> < /html>

Дополнительные примеры

Таблица без рамки

< html> < body> < h4> Эта таблица не имеет рамки: < /h4> < table> < tr> < td> 100< /td> < td> 200< /td> < td> 300< /td> < /tr> < tr> < td> 400< /td> < td> 500< /td> < td> 600< /td> < /tr> < /table> < h4> И эта таблица не имеет рамки: < /h4> < table border=" 0" > < tr> < td> 100< /td> < td> 200< /td> < td> 300< /td> < /tr> < tr> < td> 400< /td> < td> 500< /td> < td> 600< /td> < /tr> < /table> < /body> < /html>

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

Заголовки в таблице

< html> < body> < h4> Заголовки таблицы: < /h4> < table border=" 1" > < tr> < th> Имя < /th> < th> Телефон < /th> < th> Телефон < /th> < /tr> < tr> < td> Калиткин< /td> < td> 202 55 55 < /td> < td> 456 77 84 < /td> < /tr> < /table> < h4> Вертикальные заголовки: < /h4> < table border=" 1" > < tr> < th> Фамилия: < /th> < td> Калиткин< /td> < /tr> < tr> < th> Телефон: < /th> < td> 202 55 55< /td> < /tr> < tr> < th> Телефон: < /th> < td> 456 77 84< /td> < /tr> < /table> < /body> < /html>

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

Пустые ячейки

< html> < body> < table border=" 1" > < tr> < td> Некоторый текст < /td> < td> Некоторый текст < /td> < /tr> < tr> < td> < /td> < td> Некоторый текст < /td> < /tr> < /table> < p> Как можно видеть, одна из ячеек не имеет рамки. Это потому, что она пустая. Попробуйте вставить в ячейку пробел. Она по-прежнему не будет иметь рамки.< /p> < p> Хитрость состоит в том, чтобы вставить в ячейку неразрывный пробел. < /p> < p> Неразрывный пробел является символьным объектом. < /p> < p> Объект неразрывного пробела начинается с амперсанда (" & " ), затем следуют буквы " nbsp", и в конце стоит точка с запятой ("; " )< /p> < p> < /p> < /body> < /html>

Заглавие таблицы

< html> < body> < h4> Эта таблица имеет заглавие и толстую рамку: < /h4> < table border=" 6" > < caption> Заглавие< /caption> < tr> < td> 100< /td> < td> 200< /td> < td> 300< /td> < /tr> < tr> < td> 400< /td> < td> 500< /td> < td> 600< /td> < /tr> < /table> < /body> < /html>

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

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: