Презентация на тему tables-frames

материал имеет табличную природу: расписание, глоссарий,...
Пример таблицы: расписание занятий.

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

Таблица – это блочный элемент

columns.html

в примере, приведенном выше, задает заголовок таблицы.

---

Слайд 3 Заголовки и стили
Кроме собственно заголовка таблицы, можно некоторые

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

и центрируются.

Расписание занятий

День	Предмет	Время
Понедельник	Алгебра	15:00
Среда	Матанализ	13:30
Пятница	Javascript	17:00

С помощью стилей можно задать вид таблицы и отдельных ее элементов.
Например:

table { caption-side: bottom; border: 2px solid; }
th { font-size: larger; background-color: yellow; }
td { background-color: #e0e0e0; color: blue; }
caption { font-size: 16pt; font-style: italic; }

IE не понимает указание положения заголовка caption-side!

table.html

---

Слайд 4 Коллапс границ
По умолчанию границы ячеек отстоят друг от

друга и от границы самой таблицы на некоторое расстояние. Это

легко увидеть, если задать границу
ячеек и таблицы:

С помощью задания стиля border-collapse можно убрать промежутки между границами:

table { border: 1px solid black; }
td { border: 1px solid black; }

collapse.html

table { border-collapse: collapse; border: 1px solid black; }
td { border: 1px solid black; }

Стиль, при котором границы таблицы и отдельных ячеек разделены, задается значением border-collapse: separate; (принят по умолчанию). При этом можно задавать ширину промежутка между ячейками таблицы с помощью стиля border-spacing, например

table { border-collapse: separate;
border: 1px solid black;
border-spacing: 0.2cm 1em; }

---

Слайд 5 Колонки
Вообще говоря, таблица состоит из строк (). Но

для задания стилей для отдельных колонок можно указать отдельные

элементы для разных колонок и групп колонок в таблице (

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

Чаще всего это используется для задания ширины отдельных колонок, но может также использоваться для выделения колонок цветом, задания специфического шрифта и т.д.

данные занимают несколько рядов и/или колонок. Для этого в элементе

spans.html

в каждую из которых помещается содержание отдельной страницы. Структура разбиения задается

frames.html

Замечания:
Элементом frameset’а может быть frameset, что позволяет получать различные структуры разбиений.
Браузер может не поддерживать фреймы (это очень старые браузеры).
Если в страницу включен DTD, то это специальный Frameset DTD.
Элемент включается только для элемента .<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide8"> <a href="/img/tmb/12/1194296/b4a0a297e0e5a37f43bec7716057e48d-720x.jpg" target="_blank">Слайд 8</a> Управление поведением и видом фреймов<br>По умолчанию каждый фрейм </h3> <div class="image"> <a href="/img/tmb/12/1194296/b4a0a297e0e5a37f43bec7716057e48d-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Управление поведением и видом фреймовПо умолчанию каждый фрейм имеет границу, размер его можно менять динамически и, если содержимое страницы не помещается во фрейм, то к нему автоматически добавляются полосы прокрутки (scrollbars).frames-attr.html"><img src="/img/tmb/12/1194296/b4a0a297e0e5a37f43bec7716057e48d-720x.jpg" title="tables-frames" alt="Управление поведением и видом фреймовПо умолчанию каждый фрейм имеет границу, размер"></a> </div> <div class="text"> <h4>имеет границу, размер его можно менять динамически и, если содержимое</h4> страницы не помещается во фрейм, то к нему автоматически добавляются полосы прокрутки (scrollbars).<br><p>frames-attr.html<br><p><frameset rows=“200,*"><br> <frame src="/frame1.html" frameborder="0" noresize="noresize"/><br> <frameset cols="25%,75%"><br> <frame src="/frame2.html" name="frame2" scrolling="no"/><br> <frame src="/frame3.html" name="frame3" marginwidth="50"/><br> </frameset><br></frameset><br><p>Все это можно задавать с помощью атрибутов элемента <frame> (не CSS!)<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide9"> <a href="/img/tmb/12/1194296/314fe9df179351204a2cf61ee1ac40fc-720x.jpg" target="_blank">Слайд 9</a> Загрузка страниц во фреймы<br>При переходах по гиперссылкам можно </h3> <div class="image"> <a href="/img/tmb/12/1194296/314fe9df179351204a2cf61ee1ac40fc-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Загрузка страниц во фреймыПри переходах по гиперссылкам можно указывать, в какое окно загружать целевую страницу, с помощью атрибута target.targets.htmlЗагружает страницу в новое окноЗагружает страницу в текущее окноЗагружает страницу на место главной («вырваться» из фреймов)Загружает страницу в окно (фрейм) с именем nameТого же эффекта можно добиться, используя метод open в программах на Javascript.window.open(url, name);где аргумент url соответствует атрибуту href, а аргумент name – атрибуту target.buttons.html"><img src="/img/tmb/12/1194296/314fe9df179351204a2cf61ee1ac40fc-720x.jpg" title="tables-frames" alt="Загрузка страниц во фреймыПри переходах по гиперссылкам можно указывать, в какое"></a> </div> <div class="text"> <h4>указывать, в какое окно загружать целевую страницу, с помощью атрибута</h4> target.<br><p>targets.html<br><p><a href="/..." target="_blank"><br><p>Загружает страницу в новое окно<br><p><a href="/..." target="_self"><br><p>Загружает страницу в текущее окно<br><p><a href="/..." target="_top"><br><p>Загружает страницу на место главной («вырваться» из фреймов)<br><p><a href="/..." target="name"><br><p>Загружает страницу в окно (фрейм) с именем name<br><p>Того же эффекта можно добиться, используя метод open в программах на Javascript.<br><p>window.open(url, name);<br><p>где аргумент url соответствует атрибуту href, а аргумент name – атрибуту target.<br><p>buttons.html<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide10"> <a href="/img/tmb/12/1194296/35bf3f21050f75877a0f4164e2fdf7ce-720x.jpg" target="_blank">Слайд 10</a> Особенности программирования<br>Программы, исполняющиеся в разных фреймах, независимы друг </h3> <div class="image"> <a href="/img/tmb/12/1194296/35bf3f21050f75877a0f4164e2fdf7ce-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Особенности программированияПрограммы, исполняющиеся в разных фреймах, независимы друг от друга, они используют разный глобальный контекст, объект window у них свой.window.parent;Тем не менее, можно получить ссылку на контекст другого окна, используя связь «родитель – ребенок».Если хотим изнутри фрейма получить ссылку на «родительское» окно:Если хотим из «родительского» окна получить доступ к документу фрейма:window.document.getElementById(frameId).contentDocument;IE не поддерживает этот W3C стандарт! Но в нем документ имеет массив фреймов, а у них есть атрибут document:window.document.frames[frameId].document;"><img src="/img/tmb/12/1194296/35bf3f21050f75877a0f4164e2fdf7ce-720x.jpg" title="tables-frames" alt="Особенности программированияПрограммы, исполняющиеся в разных фреймах, независимы друг от друга, они"></a> </div> <div class="text"> <h4>от друга, они используют разный глобальный контекст, объект window</h4> у них свой.<br><p>window.parent;<br><p>Тем не менее, можно получить ссылку на контекст другого окна, используя связь «родитель – ребенок».<br><p>Если хотим изнутри фрейма получить ссылку на «родительское» окно:<br><p>Если хотим из «родительского» окна получить доступ к документу фрейма:<br><p>window.document.getElementById(frameId).contentDocument;<br><p>IE не поддерживает этот W3C стандарт! Но в нем документ имеет массив фреймов, а у них есть атрибут document:<br><p>window.document.frames[frameId].document;<br> </div> <hr> </div> </div> <div class="custom" > <!-- Yandex.RTB R-A-11464146-5 --> <div id="yandex_rtb_R-A-11464146-5"></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-11464146-5", "renderTo": "yandex_rtb_R-A-11464146-5" }) }) </script></div> <div class="content dl-content" style="margin-top: 20px"> <form action="" method="post" class="js_captcha dl-form"> <div> <ul> <li>Имя файла: tables-frames.pptx</li> <li>Количество просмотров: 239</li> <li>Количество скачиваний: 0</li> </ul> <div class="g-recaptcha" data-sitekey="6Lf0iN8nAAAAACKv8U8VhTtj8F1wq0TA-RBjxFb2"></div> <input type="submit" value="Скачать презентацию"> <input type="hidden" name="task" value="dodownload"> <input type="hidden" name="865ff82366da153478c76ce557a52095" value="1" /> </div> <div class="clear"></div> </form> <div class="adBlockDownload"> <div class="banners"></div> </div> </div> <div class="itemNavigation"> <div class="itemNavigation-wrapper"> <div class="itemNavigation-item"> - Предыдущая <a class="itemNavigation-link" href="/fizika/garmonicheskie-kolebaniya-i-mayatniki">Гармонические колебания и маятники</a> </div> <div class="itemNavigation-item"> Следующая - <a class="itemNavigation-link" href="/russkiy-yazyk/predlozhenie-s-odnorodnymi-chlenami-1">Предложение с однородными членами</a> </div> </div> </div> </div> <div class="right"> <div class="banners"> <div class="custom" > <!-- Yandex.RTB R-A-11464146-1 --> <div id="yandex_rtb_R-A-11464146-1"></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-11464146-1", "renderTo": "yandex_rtb_R-A-11464146-1" }) }) </script></div> </div> <div class="list related"> <h2>Похожие презентации</h2> <div class="wrapper"> <a href="/informatika/algoritm-postroeniya-modeli-vala-v-sisteme"> <img src="/img/tmb/11/1044062/003c283aaaab9ab39b1981d7e5fec6dc-210x.jpg" alt="Алгоритм построения модели вала в системе компьютерного черчения КОМПАС"> <span class="desc"> <span>Алгоритм построения модели вала в системе компьютерного черчения КОМПАС</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 164</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/vidy-myshek"> <img src="/img/tmb/12/1187429/7441a9b9285300c814b914641f8d7e95-210x.jpg" alt="Виды мышек"> <span class="desc"> <span>Виды мышек</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 208</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/vneshnie-ustroystva-pk-periferiya"> <img src="/img/tmb/11/1076544/1a3ca849e926bb3e7ecb8328b4ba36b8-210x.jpg" alt="Внешние устройства ПК (периферия)"> <span class="desc"> <span>Внешние устройства ПК (периферия)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 140</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/yazyk-programmirovaniya-pascal-vetvlenie"> <img src="/img/tmb/11/1070058/7f4122c53dfd8599956e5efc9f17f452-210x.jpg" alt="Язык программирования Pascal. Ветвление"> <span class="desc"> <span>Язык программирования Pascal. Ветвление</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 155</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternye-virusy-i-antivirusnye-programmy-23"> <img src="/img/tmb/12/1121187/89ea6070d1e5cdb5df980a5da68873ac-210x.jpg" alt="Компьютерные вирусы и антивирусные программы"> <span class="desc"> <span>Компьютерные вирусы и антивирусные программы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 131</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-po-teme-virusy-i-antivirusy"> <img src="/img/tmb/11/1041927/c32970701c608ace5fc92eb201a5d5dd-210x.jpg" alt="Презентация по теме Вирусы и антивирусы"> <span class="desc"> <span>Презентация по теме Вирусы и антивирусы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 139</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> <div class="cntWrapper"> <div class="list"> <h2 class="right-heading" id="related">Похожие презентации</h2> <div class="wrapper"> <a href="/informatika/bezopasnost-detey-v-internete-prezentatsiya-k-1"> <img src="/img/tmb/9/871706/214f8ca761cc8cb1caa00e66a8fb48d7-210x.jpg" alt="Безопасность детей в Интернете презентация к уроку по информатике (2 класс) по теме"> <span class="desc"> <span>Безопасность детей в Интернете презентация к уроку по информатике (2 класс) по теме</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 140</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/algebra-suzhdeniy"> <img src="/img/tmb/11/1076312/0a68ac54c90c6daaec1bbc6e1b35a83e-210x.jpg" alt="Алгебра суждений"> <span class="desc"> <span>Алгебра суждений</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 134</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/bazovye-priemy-raboty-s-konstruktorskoy-grafikoy"> <img src="/img/tmb/14/1317854/548fa4237b470a51f289b67ce5fc42b5-210x.jpg" alt="Базовые приемы работы с конструкторской графикой на примере Компас 3D"> <span class="desc"> <span>Базовые приемы работы с конструкторской графикой на примере Компас 3D</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 115</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/tvorcheskaya-masterskaya-iskusstvo-sozdaniya-prezentatsii"> <img src="/img/tmb/12/1178237/29779ad771115c2cf9521cdcddff42e8-210x.jpg" alt="Творческая мастерская. Искусство создания презентации"> <span class="desc"> <span>Творческая мастерская. Искусство создания презентации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 128</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/chto-takoe-programmirovanie_"> <img src="/img/tmb/14/1302835/fc0ff1e4e29d3cef1f63dd2eb67ea866-210x.jpg" alt="Что такое программирование"> <span class="desc"> <span>Что такое программирование</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 124</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/osnovy-raboty-s-faylovym-menedzherom-total"> <img src="/img/tmb/15/1429318/c9373373457c8de86035ebd1a9c08579-210x.jpg" alt="Основы работы с файловым менеджером Тotal Сommander"> <span class="desc"> <span>Основы работы с файловым менеджером Тotal Сommander</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 126</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/tehnicheskie-trebovaniya-k-oformleniyu-testovyh-zadaniy"> <img src="/img/tmb/12/1186318/42fd81285ae83c04df625797f44d38a8-210x.jpg" alt="Технические требования к оформлению тестовых заданий в редакторе Word для программы АСТ-Тест"> <span class="desc"> <span>Технические требования к оформлению тестовых заданий в редакторе Word для программы АСТ-Тест</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 153</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/bazi-danih-3"> <img src="/img/tmb/15/1448851/4f24d4ccd6e71e566c152ed10dd8cbde-210x.jpg" alt="Бази даних"> <span class="desc"> <span>Бази даних</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 102</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/rukovodstvo-po-sozdaniyu-virtualnoy-mashiny-v_"> <img src="/img/tmb/13/1289856/efa9ee8bfdc9a89142aebf42cb70bc97-210x.jpg" alt="Руководство по созданию виртуальной машины в Virtual Box"> <span class="desc"> <span>Руководство по созданию виртуальной машины в Virtual Box</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 108</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/klassifikatsiya-kompyuternyh-virusov_"> <img src="/img/tmb/14/1361863/cc649697475c392bcf5baf57c1edaa9a-210x.jpg" alt="Классификация компьютерных вирусов"> <span class="desc"> <span>Классификация компьютерных вирусов</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 117</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/javascript-first-steps"> <img src="/img/tmb/15/1464206/86a8196c90d21f489752fd5cefbf90e3-210x.jpg" alt="JavaScript First steps"> <span class="desc"> <span>JavaScript First steps</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 100</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/obekty-i-ih-svoystva_"> <img src="/img/tmb/13/1235006/7275a2ece697637deeecb0037fb8f797-210x.jpg" alt="Объекты и их свойства"> <span class="desc"> <span>Объекты и их свойства</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 340</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/599949-prezentatsiya-po-informatike-na-temu-naglyadnye"> <img src="/img/tmb/6/599949/4c131e7eccd866ef517af23a9de32e63-210x.jpg" alt="Презентация по информатике на тему Наглядные формы представления информации"> <span class="desc"> <span>Презентация по информатике на тему Наглядные формы представления информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 161</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/yazyki-programmirovaniya-ih-klassifikatsiya-sistemy-programmirovaniya_"> <img src="/img/tmb/14/1319591/44d185ca80aa097bfe962b35e719388f-210x.jpg" alt="Языки программирования, их классификация. Системы программирования"> <span class="desc"> <span>Языки программирования, их классификация. Системы программирования</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 190</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/operatsionnaya-sistema-windows-2"> <img src="/img/tmb/13/1278265/7e2da6083d5e73afcf3a1ef1030906af-210x.jpg" alt="Операционная система Windows"> <span class="desc"> <span>Операционная система Windows</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 94</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/obrazovatelnaya-deyatelnost-doshkolnikov-v-muzee-kompyuternoy"> <img src="/img/tmb/8/728751/620e213738b6ee3ca82d11af33064886-210x.jpg" alt="Образовательная деятельность дошкольников в музее компьютерной техники методическая разработка по информатике (подготовительная группа)"> <span class="desc"> <span>Образовательная деятельность дошкольников в музее компьютерной техники методическая разработка по информатике (подготовительная группа)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 129</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/bezopasnaya-rabota-v-sotsialnyh-setyah-34"> <img src="/img/tmb/14/1322516/c77a02adea4d6fbfd17588baa704e84e-210x.jpg" alt="Безопасная работа в социальных сетях"> <span class="desc"> <span>Безопасная работа в социальных сетях</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 103</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/597299-prezentatsiya-kompyuterlk-grafikany-trler"> <img src="/img/tmb/6/597299/9594b07c27c253d3f0a5abe04f3af358-210x.jpg" alt="Презентация Компьютерлік графиканың түрлері"> <span class="desc"> <span>Презентация Компьютерлік графиканың түрлері</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 208</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/postroenie-primitivov-v-autocad-2008"> <img src="/img/tmb/13/1201437/2bedc39d36d0ec225e248a55bfd8ab3d-210x.jpg" alt="Построение примитивов в AutoCAD 2008"> <span class="desc"> <span>Построение примитивов в AutoCAD 2008</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 145</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/605732-prezentatsiya-po-informatike-video-krta"> <img src="/img/tmb/7/605732/aaff92680f1111948b471c5fb405fbe1-210x.jpg" alt="Презентация по информатике видео крта"> <span class="desc"> <span>Презентация по информатике видео крта</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 148</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/sotsialnye-servisy-i-sotsialnye-seti"> <img src="/img/tmb/11/1039627/dbc82b51027c44044b03fb7130c3aa23-210x.jpg" alt="Социальные сервисы и социальные сети"> <span class="desc"> <span>Социальные сервисы и социальные сети</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 210</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/600130-bezopasnyy-internet-8-9-klass"> <img src="/img/tmb/7/600130/ac9b006e48827406cdb70a2dae373dce-210x.jpg" alt="Безопасный интернет 8-9 класс"> <span class="desc"> <span>Безопасный интернет 8-9 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 188</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/chislo-i-kodirovanie-informatsii-1"> <img src="/img/tmb/11/1092871/fa76d66a087b91b4e620582637c343b8-210x.jpg" alt="ЧИСЛО И КОДИРОВАНИЕ ИНФОРМАЦИИ"> <span class="desc"> <span>ЧИСЛО И КОДИРОВАНИЕ ИНФОРМАЦИИ</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 146</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/interaktivnoe-posobie-vremena-goda-prezentatsiya-uroka"> <img src="/img/tmb/9/866453/b7b4998782499900a97a28c5d108bacc-210x.jpg" alt="Интерактивное пособие времена года презентация урока для интерактивной доски по информатике (старшая группа)"> <span class="desc"> <span>Интерактивное пособие времена года презентация урока для интерактивной доски по информатике (старшая группа)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 122</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>