Презентация на тему 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-2962960-4 --> <div id="yandex_rtb_R-A-2962960-4"></div> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-2962960-4", "renderTo": "yandex_rtb_R-A-2962960-4" }) }) </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>Количество просмотров: 225</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="906dae58324700d8d01c33ce99e0e417" 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-2962960-2 --> <div id="yandex_rtb_R-A-2962960-2"></div> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-2962960-2", "renderTo": "yandex_rtb_R-A-2962960-2" }) }) </script></div> </div> <div class="list related"> <h2>Похожие презентации</h2> <div class="wrapper"> <a href="/informatika/graficheskiy-rezhim-raboty"> <img src="/img/tmb/12/1172974/e632ac89a0c4876d56a35c39fdd66937-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/kompyuternyy-kruzhok_"> <img src="/img/tmb/14/1305988/dacd31a175913e94024c4b183f67f4dd-210x.jpg" alt="Компьютерный кружок"> <span class="desc"> <span>Компьютерный кружок</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 93</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prezentatsiya-k-uroku-po-teme-kak-5"> <img src="/img/tmb/13/1209327/b435c9cb43f52d2e1eb534c0406b78b3-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="wrapper"> <a href="/informatika/514529-prezentatsiya-po-informatike-3-klass-3"> <img src="/img/tmb/6/514529/f09ce438c99e315c495dbfb25415c6e1-210x.jpg" alt="Презентация по информатике 3 класс"> <span class="desc"> <span>Презентация по информатике 3 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 139</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/vidy-algoritmov-tsikl"> <img src="/img/tmb/11/1090891/39c61650bed4cff4f56cf1e2963a4014-210x.jpg" alt="Виды алгоритмов. Цикл"> <span class="desc"> <span>Виды алгоритмов. Цикл</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 169</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/reshenie-logicheskih-zadach-3_"> <img src="/img/tmb/14/1319471/f2fd6b058ee38bb06bb16132300243c7-210x.jpg" alt="Решение логических задач"> <span class="desc"> <span>Решение логических задач</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 112</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/blok-shemy-2"> <img src="/img/tmb/12/1130302/0f8839fb3deba95c7b49c77a50a0a4c0-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/508055-prezentatsiya-po-proektu-na-temumultiplikatsiya"> <img src="/img/tmb/6/508055/d0ae5b31d400a2f5459f5b37347f1134-210x.jpg" alt="Презентация по проекту на тему:Мультипликация"> <span class="desc"> <span>Презентация по проекту на тему:Мультипликация</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 228</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/tekstovyy-redaktor-ms-word-formatirovanie-dokumenta-1_"> <img src="/img/tmb/15/1430909/2ed8ce776bca884cef4ed13ea2b0ad3f-210x.jpg" alt="Текстовый редактор MS Word. Форматирование документа"> <span class="desc"> <span>Текстовый редактор MS Word. Форматирование документа</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 99</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/651600-prezentatsiya-uroka-po-teme-kodirovanie-informatsii"> <img src="/img/tmb/7/651600/71849fb4ee5288f794576746230777a3-210x.jpg" alt="Презентация урока по теме Кодирование информации 5 класс"> <span class="desc"> <span>Презентация урока по теме Кодирование информации 5 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 143</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/575582-massiv-br-tipt-mlmetterd-belgl-br"> <img src="/img/tmb/6/575582/738f9dfd52eadc9c3e8b1fc599845094-210x.jpg" alt="Массив- бір типті мәліметтердің белгілі бір тобынан тұратын жүйелі тип. Элементтердің типі массивтің базалық типі деп аталады. Паскальда массив құрылымдық типтегі айнымалы ретінде қарастырылады. Массивке тұтасынан бір ат беріледі. Массивтің элементтері и"> <span class="desc"> <span>Массив- бір типті мәліметтердің белгілі бір тобынан тұратын жүйелі тип. Элементтердің типі массивтің базалық типі деп аталады. Паскальда массив құрылымдық типтегі айнымалы ретінде қарастырылады. Массивке тұтасынан бір ат беріледі. Массивтің элементтері и</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 166</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/vsemirnaya-pautina-2"> <img src="/img/tmb/11/1062440/e813824f0578fc7c5c280f2190b2a341-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/tekstovyy-redaktor-ms-word-formatirovanie-dokumenta-1"> <img src="/img/tmb/12/1182366/806cf27e411b50eec06936693a4eab42-210x.jpg" alt="Текстовый редактор MS-Word. Форматирование документа."> <span class="desc"> <span>Текстовый редактор MS-Word. Форматирование документа.</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 146</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/vosstanovlenie-dannyh_"> <img src="/img/tmb/13/1273891/3df00acbe12a6b964e8336c8c08fc1a9-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/otchyot-po-predmetnym-nedelyam-prezentatsiya-po"> <img src="/img/tmb/10/931750/691b1d26c057466ba2a5cc51bd1833b9-210x.jpg" alt="Отчёт по предметным неделям презентация по информатике по теме"> <span class="desc"> <span>Отчёт по предметным неделям презентация по информатике по теме</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 135</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/informatsionnaya-bezopasnost-mif-ili-realnost"> <img src="/img/tmb/12/1116228/9a3033791fc2a15b1f94d02ee3f3dd01-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/ustroystva-vvoda-informatsii-skanery"> <img src="/img/tmb/12/1176815/2527a6017d23985a7204fd36789fd6d2-210x.jpg" alt="Устройства ввода информации. Сканеры"> <span class="desc"> <span>Устройства ввода информации. Сканеры</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 145</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/666406-vidy-i-klassifikatsiya-modeli"> <img src="/img/tmb/7/666406/8bfe3d4ca6c69b7ddc56affb0e00d8c8-210x.jpg" alt="Виды и классификация модели"> <span class="desc"> <span>Виды и классификация модели</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 336</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/rabota-s-obektami-v-srede-microsoft-1"> <img src="/img/tmb/12/1103369/cb40ae6a919b035c408065b9081ce387-210x.jpg" alt="Работа с объектами в среде Microsoft Power Point"> <span class="desc"> <span>Работа с объектами в среде Microsoft Power Point</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 103</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/algoritm-i-ego-formalnoe-ispolnenie-6"> <img src="/img/tmb/12/1178589/259df172619f0af36a250960e9acb054-210x.jpg" alt="Алгоритм и его формальное исполнение"> <span class="desc"> <span>Алгоритм и его формальное исполнение</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 116</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/otnosheniya-mezhdu-ponyatiyami-7"> <img src="/img/tmb/14/1393904/6eb3a9daa79f098ea71d47f4e4d443ca-210x.jpg" alt="Отношения между понятиями"> <span class="desc"> <span>Отношения между понятиями</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 84</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/informatsionnaya-deyatelnost-cheloveka-1_"> <img src="/img/tmb/13/1256557/2dcbb209a131719230ffcf5d137f1679-210x.jpg" alt="Информационная деятельность человека"> <span class="desc"> <span>Информационная деятельность человека</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 123</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prikladnoe-programmnoe-obespechenie-1_"> <img src="/img/tmb/14/1365262/23910766cfcdb8dfbfd76f6b0f48f296-210x.jpg" alt="Прикладное программное обеспечение"> <span class="desc"> <span>Прикладное программное обеспечение</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 113</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternye-virusy-93"> <img src="/img/tmb/12/1161217/d00220a7bc8e6b4a16ff412bee3ebf9a-210x.jpg" alt="Компьютерные вирусы"> <span class="desc"> <span>Компьютерные вирусы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 104</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/stranichnaya-organizatsiya-yacheek"> <img src="/img/tmb/14/1348466/046f17dc93d2e487ebcd2a83961f9d47-210x.jpg" alt="Страничная организация ячеек"> <span class="desc"> <span>Страничная организация ячеек</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 98</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/bezopasnost-rebyonka-v-internete"> <img src="/img/tmb/11/1073522/fdfe69bf9bb73986efc5f68a7ed1fc93-210x.jpg" alt="Безопасность ребёнка в интернете"> <span class="desc"> <span>Безопасность ребёнка в интернете</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 107</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/elektronnyy-uchebnik-po-distsipline-informatika-i"> <img src="/img/tmb/13/1238414/4eecccfe9bcd6b1cf41e03b8b7e178c1-210x.jpg" alt="Электронный учебник по дисциплине “Информатика и Программирование”"> <span class="desc"> <span>Электронный учебник по дисциплине “Информатика и Программирование”</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 116</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ikt-v-obrazovatelnom-protsesse-1"> <img src="/img/tmb/12/1190717/779d91868fb978c48839b668d4364477-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/509681-bashkortostan-moy-kray-rodnoy-2"> <img src="/img/tmb/6/509681/9ca561aad8d5554d4fd637d891465dcf-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/razvitie-logicheskogo-myshleniya-na-urokah-informatiki_"> <img src="/img/tmb/14/1356482/c7047af74be561f1533edf99529709a4-210x.jpg" alt="Развитие логического мышления на уроках информатики"> <span class="desc"> <span>Развитие логического мышления на уроках информатики</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 99</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>