Презентация на тему 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>Количество просмотров: 235</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="b18a86bbf3a62fa3e7d4d3f5e8327c75" 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/652137-prezentatsiya-po-informatike-tsikly-v-paskal-1"> <img src="/img/tmb/7/652137/af90a4ad073de6886a7d4b97a6791741-210x.jpg" alt="Презентация по информатике Циклы в Паскаль"> <span class="desc"> <span>Презентация по информатике Циклы в Паскаль</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 142</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/666639-urok-10-reshenie-logicheskih-zadach"> <img src="/img/tmb/7/666639/8ea774e432e79d1ced5acf7d6c9e35c2-210x.jpg" alt="Урок 10. Решение логических задач."> <span class="desc"> <span>Урок 10. Решение логических задач.</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 130</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kak-obrazuyutsya-ponyatiya_"> <img src="/img/tmb/13/1262541/fbc17c06707554e21d11bd3eec847664-210x.jpg" alt="Как образуются понятия"> <span class="desc"> <span>Как образуются понятия</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 115</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/617819-prezentatsiya-tsel-primeneniya-ikt"> <img src="/img/tmb/7/617819/a6a9843fd5c9bc3afbfd581bd1ebd02a-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/nformatika-3"> <img src="/img/tmb/14/1351953/f2bee74fe9914707093df9ab33494219-210x.jpg" alt="Інформатика"> <span class="desc"> <span>Інформатика</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 133</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/lektsiya-2-rastrovaya-grafika"> <img src="/img/tmb/15/1417648/9ef495afaa5469b73f3053dc902cbd0d-210x.jpg" alt="Лекция 2. Растровая графика"> <span class="desc"> <span>Лекция 2. Растровая графика</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 101</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/upravlenie-vnedreniem-informatsionnyh-sistem-upravlenie-soderzhaniem"> <img src="/img/tmb/15/1445451/bd0e1955f97712f35e1b0b7c4d4977c2-210x.jpg" alt="Управление внедрением информационных систем. Управление содержанием"> <span class="desc"> <span>Управление внедрением информационных систем. Управление содержанием</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 155</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/656920-urok-informatiki-po-teme-opisanie-predmetov"> <img src="/img/tmb/7/656920/ac9b2dc30d0051193c2940d114cc3c41-210x.jpg" alt="Урок информатики по теме Описание предметов"> <span class="desc"> <span>Урок информатики по теме Описание предметов</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 125</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/645395-prezentatsiya-po-informatike-protsedury-i-funktsii"> <img src="/img/tmb/7/645395/e282ca27f8efb6c344ba5b2425d8f7e1-210x.jpg" alt="Презентация по информатике Процедуры и функции"> <span class="desc"> <span>Презентация по информатике Процедуры и функции</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 127</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/vidy-personalnyh-kompyuterov"> <img src="/img/tmb/11/1079802/9cf37b5202e8d1df44f23954250ecbbd-210x.jpg" alt="Виды персональных компьютеров"> <span class="desc"> <span>Виды персональных компьютеров</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 178</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/programmirovanie-obedinenie-raznorodnyh-elementov"> <img src="/img/tmb/11/1045942/4bdae867538ccc6ccc900d852839d8ec-210x.jpg" alt="Программирование. Объединение разнородных элементов."> <span class="desc"> <span>Программирование. Объединение разнородных элементов.</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 158</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/rabota-s-programmoy-pervologo-30_"> <img src="/img/tmb/14/1370203/209a9eb8436a9c312ab253497815da1e-210x.jpg" alt="Работа с программой ПервоЛого 3.0"> <span class="desc"> <span>Работа с программой ПервоЛого 3.0</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 138</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/alfavitnyy-podhod-k-opredeleniyu-kolichestva-informatsii"> <img src="/img/tmb/11/1092208/1e7fc50380f65d7a5390c7ba9c283e88-210x.jpg" alt="Алфавитный подход к определению количества информации"> <span class="desc"> <span>Алфавитный подход к определению количества информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 120</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternye-virusy-i-bezopasnost-v-seti"> <img src="/img/tmb/12/1129160/4ed660d3f9582de7390ed968bbc1290e-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/prezentatsiya-v-obuchenii-1"> <img src="/img/tmb/12/1179656/e0b100f0a8ffaa476b8acf43ff773034-210x.jpg" alt="Презентация в обучении"> <span class="desc"> <span>Презентация в обучении</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 108</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/582792-diktant-po-teme-elektronnye-tablitsyn"> <img src="/img/tmb/6/582792/0769e9509619eaaf8f2b39fe86bba52d-210x.jpg" alt="Диктант по теме Электронные таблицы№"> <span class="desc"> <span>Диктант по теме Электронные таблицы№</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 153</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ispring-suite"> <img src="/img/tmb/15/1471606/7412a3bc43ec4afaa2c96f0fa9c82444-210x.jpg" alt="iSpring Suite"> <span class="desc"> <span>iSpring Suite</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 128</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/569874-prezentatsiyu-k-uroku-informatiki-na-temu"> <img src="/img/tmb/6/569874/e370dceeafcfa8fb6326efe00d55e5fd-210x.jpg" alt="Презентацию к уроку информатики на тему Microsoft Excel"> <span class="desc"> <span>Презентацию к уроку информатики на тему Microsoft Excel</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 132</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/545487-informatika-pn-boyynsha-prezentatsiyany-tayryby-web"> <img src="/img/tmb/6/545487/94e16300de49a9e0e5e95633d15a158a-210x.jpg" alt="Информатика пәні бойынша презентацияның тақырыбы Web – технологияларының негізгі ұғымдары (1курс)"> <span class="desc"> <span>Информатика пәні бойынша презентацияның тақырыбы Web – технологияларының негізгі ұғымдары (1курс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 174</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/dosldzhennya-ta-proektuvannya-mondex-seredovishche"> <img src="/img/tmb/15/1401827/e8b50aac0a79672af819c027834e3839-210x.jpg" alt="Дослідження та проектування Mondex середовище"> <span class="desc"> <span>Дослідження та проектування Mondex середовище</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 97</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/reshenie-sistem-logicheskih-uravneniy"> <img src="/img/tmb/11/1070872/e0dd19bf6ce4d3aa38523a633e826419-210x.jpg" alt="Решение систем логических уравнений"> <span class="desc"> <span>Решение систем логических уравнений</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 176</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/klassifikatsiya-po-1"> <img src="/img/tmb/11/1084968/6a28ddf5af6d3d05728cb6298bc00aa4-210x.jpg" alt="Классификация ПО"> <span class="desc"> <span>Классификация ПО</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 130</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/515582-prezentatsiya-po-informatike-na-temu-istoriya-32"> <img src="/img/tmb/6/515582/4bfd0fb0e047435d07515111fe8844fe-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/osnovy-postroeniya-vpn"> <img src="/img/tmb/13/1263654/f22fba936aa1b24f8667f2d4db23a4c9-210x.jpg" alt="Основы построения VPN"> <span class="desc"> <span>Основы построения VPN</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 144</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/rastrovyy-graficheskiy-redaktor-corel-paint-shop_"> <img src="/img/tmb/13/1285387/cadae29651a7faec4816f5c30eb63f87-210x.jpg" alt="Растровый графический редактор Corel Paint Shop Pro X"> <span class="desc"> <span>Растровый графический редактор Corel Paint Shop Pro X</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 111</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/613288-prezentatsiya-po-predmetno-orientirovannym-is-na"> <img src="/img/tmb/7/613288/802cbcd8a900e28b25d895cd9532eef2-210x.jpg" alt="Презентация по предметно-ориентированным ИС на тему Основные темы и определения. ПОЭИС"> <span class="desc"> <span>Презентация по предметно-ориентированным ИС на тему Основные темы и определения. ПОЭИС</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 173</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/redaktirovanie-kompyuternogo-risunka"> <img src="/img/tmb/11/1053806/dd23ea2595c1cb2a1235f31a8e04996d-210x.jpg" alt="Редактирование компьютерного рисунка"> <span class="desc"> <span>Редактирование компьютерного рисунка</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 133</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/595041-prezentatsiya-po-informatike-wordpad"> <img src="/img/tmb/6/595041/9427b8f11319868491754269d98a2f4b-210x.jpg" alt="Презентация по информатике WordPad"> <span class="desc"> <span>Презентация по информатике WordPad</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 144</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/funktsionalnaya-shema-kompyutera-3"> <img src="/img/tmb/12/1178319/5bcaf16e2404e3ddb9506f729ed41a33-210x.jpg" alt="Функциональная схема компьютера"> <span class="desc"> <span>Функциональная схема компьютера</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 108</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/661341-prezentatsiya-po-informatike-na-temu-avtorskoe-1"> <img src="/img/tmb/7/661341/1b293f6eb9815a9eafd5543c95816ad4-210x.jpg" alt="Презентация по информатике на тему Авторское право в сети Интернет"> <span class="desc"> <span>Презентация по информатике на тему Авторское право в сети Интернет</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 346</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>