Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Горизонтальные и вертикальные фреймы
Этот пример показывает, как сделать набор фреймов с тремя документами, и как разделить их на строки и столбцы. При этом не все границы фреймов можно передвинуть. <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> <frameset cols="120,*"><frame src="menu.htm"><frame src="frame_1.htm" name="frame_1"></frameset> </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>
Лекция: Таблицы В 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></body></html>Пример выполнения данного HTML-кода Для тега table определены следующие атрибуты.
Ячейки таблицы без содержимого в большинстве браузеров выводятся не очень хорошо. Если необходимо сделать ячейку таблицы пустой, то разместите в ней неразрывный пробел
Такие элементы как <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-кода Дополнительные примеры Таблица без рамки <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-кода Заглавие таблицы <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-кода
|
||||||
|
|
Последнее изменение этой страницы: 2021-03-10; просмотров: 80; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.133.109.30 (0.008 с.) |
