Презентация на тему 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>Количество просмотров: 249</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="9c2766ef6efeaebfea56e2b9d37ed271" 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/sergey-alekseevich-lebedev"> <img src="/img/tmb/11/1086852/d9419fecbbaba326664133847a3f00cc-210x.jpg" alt="Сергей Алексеевич Лебедев"> <span class="desc"> <span>Сергей Алексеевич Лебедев</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 180</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/avtomatizatsya-virobnichih-protsesv"> <img src="/img/tmb/15/1465940/db4f37ea29f4932614874bba7f61a8cf-210x.jpg" alt="Автоматизація виробничих процесів"> <span class="desc"> <span>Автоматизація виробничих процесів</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 137</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/razrabotka-plana-deystviy-i-ego-zapis"> <img src="/img/tmb/11/1042001/eac208e8104861265034525412791145-210x.jpg" alt="Разработка плана действий и его запись"> <span class="desc"> <span>Разработка плана действий и его запись</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 180</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/informatsionnye-tehnologii-14"> <img src="/img/tmb/12/1151206/c969646ac8737154262fffdabd6167b5-210x.jpg" alt="Информационные технологии"> <span class="desc"> <span>Информационные технологии</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 147</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/506914-urok-ispolzovanie-effektov-v-prezentatsii"> <img src="/img/tmb/6/506914/8207dada424a3bb4b79b717183fc7b95-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/kriptograficheskie-metody-zashchity"> <img src="/img/tmb/13/1263278/b2552aec4ff2e61170a4c4dce52431a0-210x.jpg" alt="Криптографические методы защиты"> <span class="desc"> <span>Криптографические методы защиты</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 149</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/587141-vse-pro-algoritmy-urok-informatika"> <img src="/img/tmb/6/587141/c3c4986d7864ab1a99f8ba0f05554336-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/predstavlenie-o-sostavnom-dokumente"> <img src="/img/tmb/12/1150893/0732962b0c83b96d7c34bf3deb9fa380-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/diagrammy-11"> <img src="/img/tmb/12/1177857/5b1c6814460d6e7ab4d17bb59fd1a0de-210x.jpg" alt="Диаграммы"> <span class="desc"> <span>Диаграммы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 137</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/lineynye-algoritmy-7"> <img src="/img/tmb/12/1175074/e46b81f4652a2f87f202d82e095f33a6-210x.jpg" alt="Линейные алгоритмы"> <span class="desc"> <span>Линейные алгоритмы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 156</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ispolnitel-robot-2"> <img src="/img/tmb/15/1450891/3997693e59e687f7651dd141f4c49ed1-210x.jpg" alt="Исполнитель робот"> <span class="desc"> <span>Исполнитель робот</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 181</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/obshchie-svedeniya-o-sistemah-elektrosvyazi"> <img src="/img/tmb/15/1476781/5588def3b687dbf1d187dc2ba0ae83a8-210x.jpg" alt="Общие сведения о системах электросвязи"> <span class="desc"> <span>Общие сведения о системах электросвязи</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 195</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/optimizatsiya-zaprosov"> <img src="/img/tmb/12/1150772/6c223474e0759ae408bc466135fc6ec7-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/541875-primenenie-mikroprotsessornye-sistemy"> <img src="/img/tmb/6/541875/c87e23853ccc7d012ecfa15ee51ad6c5-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/kompyuter--universalnaya-mashina-dlya-raboty"> <img src="/img/tmb/8/766590/f632a2b2e02816dca4adf60147426447-210x.jpg" alt="Компьютер – универсальная машина для работы с информацией"> <span class="desc"> <span>Компьютер – универсальная машина для работы с информацией</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 185</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/osnovnye-tegi-html"> <img src="/img/tmb/12/1110907/d7d7c86e03cbc60bf3865282dcf028bd-210x.jpg" alt="Основные теги HTML"> <span class="desc"> <span>Основные теги HTML</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 209</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternaya-mysh-2"> <img src="/img/tmb/12/1190626/039e54ef034a1858b47191c8b5636e94-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/602908-prezentatsiya-k-uroku-po-teme-grafy"> <img src="/img/tmb/7/602908/a96e7b37de8c9a62d3aafe02d023e49d-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/flash-pamyat"> <img src="/img/tmb/12/1100789/242aa922e361d4d3ca6fda195e02ae9b-210x.jpg" alt="Flash память"> <span class="desc"> <span>Flash память</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 123</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/protokoly-kollektivnoy-elektronnoy-tsifrovoy-podpiski-nad"> <img src="/img/tmb/12/1136885/2e8f9b448a7ceda82d6ce69afbf5fdc0-210x.jpg" alt="Протоколы коллективной электронной цифровой подписки над эллиптическими кривыми"> <span class="desc"> <span>Протоколы коллективной электронной цифровой подписки над эллиптическими кривыми</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 151</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/osnovy-logiki-5"> <img src="/img/tmb/11/1067642/d8f09efc51851644122de56f01929f03-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/ekstremalnoe-programmirovanie-1"> <img src="/img/tmb/15/1481655/91c09334016ec6740e99aca931504786-210x.jpg" alt="Экстремальное программирование"> <span class="desc"> <span>Экстремальное программирование</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 199</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/plottery-2_"> <img src="/img/tmb/13/1276867/20593c879f179fbd083a88055fca71ee-210x.jpg" alt="Плоттеры"> <span class="desc"> <span>Плоттеры</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 132</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ustroystva-vyvoda-dannyh_"> <img src="/img/tmb/13/1280135/42eae48f16807a4b8fcd5eb1c5e68d5e-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/osnovy-relyatsionnoy-algebry"> <img src="/img/tmb/15/1482502/fb51d582c0ed37d4e412da7599280a44-210x.jpg" alt="Основы реляционной алгебры"> <span class="desc"> <span>Основы реляционной алгебры</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 310</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/dannye-i-programmy-fayly-i-faylovaya_"> <img src="/img/tmb/14/1383480/f1f1d685e7899b94dbc81e3106a01de5-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/multimedia-tehnologii-v-internete"> <img src="/img/tmb/12/1101860/4e668c11b059f2224afa125fd5ef3ec5-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/chto-izuchaet-informatika"> <img src="/img/tmb/12/1161297/277ff2056c04923d89e26ff85d616829-210x.jpg" alt="Что изучает информатика?"> <span class="desc"> <span>Что изучает информатика?</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 147</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/primenenie-kompyuternyh-tehnologiy-v-obuchenii-mladshih_"> <img src="/img/tmb/14/1313153/38580f8e2d3e49f68f61f9060db7eb36-210x.jpg" alt="Применение компьютерных технологий в обучении младших школьников"> <span class="desc"> <span>Применение компьютерных технологий в обучении младших школьников</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 118</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/elektronnye-tablitsy-excel-1_"> <img src="/img/tmb/13/1285405/4f12e891ae64b5f4bd468f37a0b30193-210x.jpg" alt="Электронные таблицы EXCEL"> <span class="desc"> <span>Электронные таблицы EXCEL</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 119</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>