Презентация на тему 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>Количество просмотров: 272</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="fab451b92ab09f78f6b9b57f742586a4" 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/konvertirovanie-faylov"> <img src="/img/tmb/12/1123511/b2421a49a59bfce113624580e50c8e5c-210x.jpg" alt="Конвертирование файлов"> <span class="desc"> <span>Конвертирование файлов</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 219</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/struktury-dannyh-derevya-seti-grafy-tablitsy-1"> <img src="/img/tmb/11/1094528/719e2a0c349bcefa39cb340ea0abe5ce-210x.jpg" alt="Структуры данных: деревья, сети, графы, таблицы"> <span class="desc"> <span>Структуры данных: деревья, сети, графы, таблицы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 183</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/yazyki-programmirovaniya-5"> <img src="/img/tmb/15/1414125/41018b95a86797b764b409938b7261cc-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/dannye-i-programmy-fayly-i-faylovaya"> <img src="/img/tmb/12/1173611/609ddec6d3fdaa187bc92664a8f9107a-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/sozdanie-uchebnogo-web-sayta_"> <img src="/img/tmb/14/1359067/178e25c51219f83900a8b22737eb4a1e-210x.jpg" alt="Создание учебного Web-сайта"> <span class="desc"> <span>Создание учебного Web-сайта</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 154</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/581869-prezentatsiya-po-informatike-na-temu-baza-7"> <img src="/img/tmb/6/581869/9a41d2a46dc7a8b48fe8246a4cf3bccb-210x.jpg" alt="Презентация по информатике на тему База данных. Система управления базами данных(9 класс)"> <span class="desc"> <span>Презентация по информатике на тему База данных. Система управления базами данных(9 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 170</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/programmnoe-obespechenie-szhatie-faylov-arhivatory"> <img src="/img/tmb/11/1042720/223fb43fe798c6fc432bae652f9e411a-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/otkrytoe-po-1"> <img src="/img/tmb/12/1155081/b1477bd7d2faf49a71555effc0bc3d00-210x.jpg" alt="Открытое ПО"> <span class="desc"> <span>Открытое ПО</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 203</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/interaktivnaya-igra-apteka-metodicheskaya-razrabotka-po"> <img src="/img/tmb/9/849466/372ecae2d0b8bfb6f1909b816708355f-210x.jpg" alt="Интерактивная игра Аптека методическая разработка по информатике (средняя группа)"> <span class="desc"> <span>Интерактивная игра Аптека методическая разработка по информатике (средняя группа)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 183</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/informatizatsiya-obrazovaniya-1"> <img src="/img/tmb/15/1481124/37f25f4b1bb2cd940439947fb8d3a351-210x.jpg" alt="Информатизация образования"> <span class="desc"> <span>Информатизация образования</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 252</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> 211</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/poisk-informatsii-6"> <img src="/img/tmb/13/1209026/af465af83e483f254efca06e13870f30-210x.jpg" alt="Поиск информации"> <span class="desc"> <span>Поиск информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 193</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/fayly-i-faylovaya-sistema-8-klass"> <img src="/img/tmb/11/1072272/1a4f336c1cba6d645f1c88e6dfba23b3-210x.jpg" alt="Файлы и файловая система (8 класс) - презентация по Информатике"> <span class="desc"> <span>Файлы и файловая система (8 класс) - презентация по Информатике</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 179</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> 228</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/urok-n27-faylovaya-sistema"> <img src="/img/tmb/13/1202711/8b6f3d29d4dc1dd8dfe7df740c122620-210x.jpg" alt="Урок №27. Файловая система"> <span class="desc"> <span>Урок №27. Файловая система</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 163</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/667820-palitra-v-coreldraw"> <img src="/img/tmb/7/667820/0848be1f458716b4aaa71c7b77c9337a-210x.jpg" alt="Палитра в CorelDraw"> <span class="desc"> <span>Палитра в CorelDraw</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 180</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/637914-prezentatsiya-po-informatike-operativnaya-pamyat-1"> <img src="/img/tmb/7/637914/b1d3df5ec34b8f1139c68622a688a4f6-210x.jpg" alt="Презентация по информатике Оперативная память"> <span class="desc"> <span>Презентация по информатике Оперативная память</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 202</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/poisk-dannyh-1"> <img src="/img/tmb/11/1040975/31fef6bd6340baeeb2d2e2ac9ae08c80-210x.jpg" alt="Поиск данных"> <span class="desc"> <span>Поиск данных</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 246</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/lineynye-vychislitelnye-algoritmy-1_"> <img src="/img/tmb/14/1382019/e3c5f4d05e6cb7a57ffa097ab62e791f-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/kompyuternye-virusy-antivirusnye-programmy-37"> <img src="/img/tmb/11/1071601/93f243295a63b49eeae99285ec85d98d-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/orau-mehanizmdary-senmdlgne-baa-beru-kompyuterlk"> <img src="/img/tmb/15/1480098/41edc72a7c59f8ec8c5969a42424cefb-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/arhitektura-evm-2"> <img src="/img/tmb/13/1291349/3c562b874e45b064d55386ff69e06bfa-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/obzornaya-programma-na-assemblere"> <img src="/img/tmb/15/1477023/762c72549e416df443f8019d6076e621-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/problemy-nesanktsionirovannogo-dostupa"> <img src="/img/tmb/13/1228514/9f9cbd8a6a0f11eedcc68ad51e7028b7-210x.jpg" alt="Проблемы несанкционированного доступа"> <span class="desc"> <span>Проблемы несанкционированного доступа</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 157</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/istoriya-razvitiya-kompyuternoy-tehniki-1"> <img src="/img/tmb/14/1317329/5412ee6235565e8871054aca091f5e71-210x.jpg" alt="История развития компьютерной техники"> <span class="desc"> <span>История развития компьютерной техники</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 143</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/mou-sosh-n7-gorod-kachkanar-komanda"> <img src="/img/tmb/15/1441681/f2ed37b216b867a74c9f5d607224a52f-210x.jpg" alt="МОУ СОШ №7. Город Качканар. Команда Гумы"> <span class="desc"> <span>МОУ СОШ №7. Город Качканар. Команда Гумы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 137</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/it-prazdniki-1"> <img src="/img/tmb/13/1208264/7b3b374f4d9a7cde5c6b8d4f89c57f01-210x.jpg" alt="IT-праздники"> <span class="desc"> <span>IT-праздники</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 209</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/informatsionnaya-sreda-nachalnoy-shkoly_"> <img src="/img/tmb/13/1236794/5ef503213d663bb9caad31cb13dde6b0-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/pravila-povedeniya-v-sotsialnyh-setyah"> <img src="/img/tmb/13/1241068/89ac77d5d11513f54dac1d6aaad77b01-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/integrirovannye-sistemy-upravleniya"> <img src="/img/tmb/14/1360715/58518ab06dd152638cfa0f0327c60121-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="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>