Презентация на тему 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>Количество просмотров: 273</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="f523995e7ac3cf720e3e56073f10562c" 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/putevoditel-v-mir-ellektronnogo-obshcheniya_"> <img src="/img/tmb/13/1251320/2c95c3684d151ad2f06a39fec8022227-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/bezopasnaya-rabota-v-sotsialnyh-setyah-2"> <img src="/img/tmb/13/1243862/0c1183e34bb7aec40aeead9b5ce1fa53-210x.jpg" alt="Безопасная работа в социальных сетях"> <span class="desc"> <span>Безопасная работа в социальных сетях</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 177</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/gosaleru"> <img src="/img/tmb/11/1057540/c8935545d0ad574723866b236c91f401-210x.jpg" alt="GOSALE.RU"> <span class="desc"> <span>GOSALE.RU</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 258</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/demonstratsionnaya-nepreryvnaya-prezentatsiya_"> <img src="/img/tmb/13/1246120/2c19dce3c1c11c973bb18c93cc36c5cc-210x.jpg" alt="Демонстрационная непрерывная презентация"> <span class="desc"> <span>Демонстрационная непрерывная презентация</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 152</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/edinitsy-izmereniya-informatsii-6"> <img src="/img/tmb/12/1160325/aa595f3de55613599d9576305d939db3-210x.jpg" alt="Единицы измерения информации"> <span class="desc"> <span>Единицы измерения информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 168</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/sistemnyy-podhod-3"> <img src="/img/tmb/14/1335579/4340f9b7c8ab3b3076e70314cd96444a-210x.jpg" alt="Системный подход"> <span class="desc"> <span>Системный подход</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 138</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/sozdanie-konsolnogo-prilozheniya-s-tekstovym-menyu"> <img src="/img/tmb/15/1449194/707cf7346d9e9f4dcfa64c870c71796b-210x.jpg" alt="Создание консольного приложения с текстовым меню"> <span class="desc"> <span>Создание консольного приложения с текстовым меню</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 174</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/576176-prezentatsiya-po-informatike-na-temu-formy-12"> <img src="/img/tmb/6/576176/2909821c1df71838c43073e25df81d52-210x.jpg" alt="Презентация по информатике на тему Формы представления информации"> <span class="desc"> <span>Презентация по информатике на тему Формы представления информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 182</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/546800-prezentatsiya-po-informatike-na-temu-microsoftofficeexcel"> <img src="/img/tmb/6/546800/4a4055ba32b088423e91183438246c4a-210x.jpg" alt="Презентация по информатике на тему Microsoft+Office+EXCEL (8класс)"> <span class="desc"> <span>Презентация по информатике на тему Microsoft+Office+EXCEL (8класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 174</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/flesh-pamyat-2"> <img src="/img/tmb/13/1291828/d645042fa043257af0344713613937b8-210x.jpg" alt="Флеш память"> <span class="desc"> <span>Флеш память</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 163</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompleks-uprazhneniy-dlya-glaz"> <img src="/img/tmb/13/1256321/7f2913462b20a1d62a54bf9acc8c3adb-210x.jpg" alt="Комплекс упражнений для глаз"> <span class="desc"> <span>Комплекс упражнений для глаз</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 154</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternye-virusy-i-antivirusnye-programmy-38_"> <img src="/img/tmb/13/1271743/1a79b132032b87300952e594f160ac28-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/computer-programming-essentials-java--java"> <img src="/img/tmb/15/1479319/afd22c850bb0727d47c54732e56b97f0-210x.jpg" alt="Computer Programming Essentials| Java | Java Technologies"> <span class="desc"> <span>Computer Programming Essentials| Java | Java Technologies</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 187</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/sozdanie-sobstvennogo-shablona-prezentatsii"> <img src="/img/tmb/12/1167136/3d5808ce8d8736e761138f66595b3476-210x.jpg" alt="Создание собственного шаблона презентации"> <span class="desc"> <span>Создание собственного шаблона презентации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 159</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/chto-takoe-piksel-1"> <img src="/img/tmb/13/1271783/ed0ce91998e4ef93a6e237eb74ea687b-210x.jpg" alt="Что такое пиксель"> <span class="desc"> <span>Что такое пиксель</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 174</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/otsenka-i-metodicheskaya-podderzhka-protsessa-informatizatsii"> <img src="/img/tmb/12/1149727/df6d7db6259d8b31e7a870992dad526f-210x.jpg" alt="Оценка и методическая поддержка процесса информатизации ОУ"> <span class="desc"> <span>Оценка и методическая поддержка процесса информатизации ОУ</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 175</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/hranenie-informatsii-10"> <img src="/img/tmb/15/1461405/fe636d1062058a1c0c80401ec812097f-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/naznachenie-sistemnoy-sredy-windows"> <img src="/img/tmb/12/1197654/1a96a6e3078c23fbfa5e91c2c34314b6-210x.jpg" alt="Назначение системной среды Windows"> <span class="desc"> <span>Назначение системной среды Windows</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 177</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/portfolo-2016"> <img src="/img/tmb/12/1152469/f65b132cbc7675e45af96564c1438b87-210x.jpg" alt="портфоліо"> <span class="desc"> <span>портфоліо</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 172</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/izmerenie-informatsii-alfavitnyy-podhod-k-izmereniyu_"> <img src="/img/tmb/14/1337624/bbc8ccde0e1ab8c372f762d459486547-210x.jpg" alt="Измерение информации. Алфавитный подход к измерению информации"> <span class="desc"> <span>Измерение информации. Алфавитный подход к измерению информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 171</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/sotsialnye-seti-ili-smm-i-smo"> <img src="/img/tmb/11/1098614/100b8704ee4ee4f905531088ae0a0bd6-210x.jpg" alt="Социальные сети или SMM и SMO продвижение"> <span class="desc"> <span>Социальные сети или SMM и SMO продвижение</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 202</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/grafy-2"> <img src="/img/tmb/11/1047224/a24be552ab0e703bd001ff2720384d18-210x.jpg" alt="Графы"> <span class="desc"> <span>Графы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 229</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/pravovye-i-eticheskie-aspekty-ispolzovaniya-interneta-5"> <img src="/img/tmb/11/1070576/3f386971e38a2fdb9feb0c27340f72fd-210x.jpg" alt="Правовые и этические аспекты использования Интернета"> <span class="desc"> <span>Правовые и этические аспекты использования Интернета</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 200</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/angliyskiy-yazyk-2-klass-urok-4"> <img src="/img/tmb/9/811799/b3c2510affcbdaf9f0d09e92252aef0d-210x.jpg" alt="Английский язык 2 класс, урок 4 презентация к уроку по информатике (2 класс)"> <span class="desc"> <span>Английский язык 2 класс, урок 4 презентация к уроку по информатике (2 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 175</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/610380-prezentatsiya-po-informatike-sistema-raboty-s"> <img src="/img/tmb/7/610380/65b6c51c05fe9c5742ad25f6b9a8fefb-210x.jpg" alt="Презентация по информатике Система работы с одаренными школьниками"> <span class="desc"> <span>Презентация по информатике Система работы с одаренными школьниками</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 187</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/shablon-dlya-napisaniya-proekta-ngueu"> <img src="/img/tmb/15/1447154/f231c9b4ed1a215a1b1b3917cb8f9063-210x.jpg" alt="Шаблон для написания проекта. НГУЭУ"> <span class="desc"> <span>Шаблон для написания проекта. НГУЭУ</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 342</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/attestatsionnaya-rabota-proekty-na-urokah-informatiki"> <img src="/img/tmb/15/1406734/9b134962ff3feff86778a8b398a19f6c-210x.jpg" alt="Аттестационная работа. Проекты на уроках информатики. (6 класс)"> <span class="desc"> <span>Аттестационная работа. Проекты на уроках информатики. (6 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 156</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/dvoichnoe-kodirovanie-zvukovoy-informatsii-1_"> <img src="/img/tmb/14/1365029/d1823c32bb78ef7db2d50c50fb804693-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/kompyuternye-virusy-125"> <img src="/img/tmb/14/1377626/659fd4a3daaf9f350e0f61e42dae32ca-210x.jpg" alt="Компьютерные вирусы"> <span class="desc"> <span>Компьютерные вирусы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 188</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/informatsionnaya-sistema-okn-podmoskove"> <img src="/img/tmb/15/1430264/6487d0b1eb1c6ab2c727ce925f5897aa-210x.jpg" alt="Информационная система ОКН-Подмосковье"> <span class="desc"> <span>Информационная система ОКН-Подмосковье</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 194</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>