Презентация на тему Таблицы и фреймы

материал имеет табличную природу: расписание, глоссарий,...
Пример таблицы: расписание занятий.

Таблицы не следует использовать для размещения материала на странице, для этого лучше использовать позиционирование блоков.

Таблица – это блочный элемент

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/14/1325954/acc987db4ca1144361cba6f61b1e6f97-720x.jpg" target="_blank">Слайд 8</a> Управление поведением и видом фреймов<br>По умолчанию каждый фрейм </h3> <div class="image"> <a href="/img/tmb/14/1325954/acc987db4ca1144361cba6f61b1e6f97-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Управление поведением и видом фреймовПо умолчанию каждый фрейм имеет границу, размер его можно менять динамически и, если содержимое страницы не помещается во фрейм, то к нему автоматически добавляются полосы прокрутки (scrollbars).frames-attr.html"><img src="/img/tmb/14/1325954/acc987db4ca1144361cba6f61b1e6f97-720x.jpg" title="Таблицы и фреймы" 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/14/1325954/69ce85432179000029fea8d115da44ab-720x.jpg" target="_blank">Слайд 9</a> Загрузка страниц во фреймы<br>При переходах по гиперссылкам можно </h3> <div class="image"> <a href="/img/tmb/14/1325954/69ce85432179000029fea8d115da44ab-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/14/1325954/69ce85432179000029fea8d115da44ab-720x.jpg" title="Таблицы и фреймы" 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/14/1325954/d0531daa21e318c5f4eccb8a4249bb92-720x.jpg" target="_blank">Слайд 10</a> Особенности программирования<br>Программы, исполняющиеся в разных фреймах, независимы друг </h3> <div class="image"> <a href="/img/tmb/14/1325954/d0531daa21e318c5f4eccb8a4249bb92-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/14/1325954/d0531daa21e318c5f4eccb8a4249bb92-720x.jpg" title="Таблицы и фреймы" 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>Имя файла: tablitsy-i-freymy.pptx</li> <li>Количество просмотров: 132</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="ba5081571f3a172f9ce7e17b1af5a5d6" 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="/russkiy-yazyk/izmenenie-imyon-sushchestvitelnyh-po-chislam-2_">Изменение имён существительных по числам</a> </div> <div class="itemNavigation-item"> Следующая - <a class="itemNavigation-link" href="/angliyskiy-yazyk/v-gostinitse_">В гостинице</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/multipleksory-i-demultipleksory"> <img src="/img/tmb/15/1423368/4c5eea908949ee0db95fd70bcb7da361-210x.jpg" alt="Мультиплексоры и демультиплексоры"> <span class="desc"> <span>Мультиплексоры и демультиплексоры</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 184</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/sravnitelnyy-analiz-podhodov-k-proektirovaniyu-is"> <img src="/img/tmb/15/1441568/4cb669c8ed110bb42fa5d1dfc3fbc980-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/zend-framework-realizatsiya-patterna-mvc-v"> <img src="/img/tmb/14/1382994/238e03583e6a6b5a2243a34aa1c7ef82-210x.jpg" alt="Zend Framework. Реализация паттерна MVC в Zend Framework, общие сведения"> <span class="desc"> <span>Zend Framework. Реализация паттерна MVC в Zend Framework, общие сведения</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 123</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/analog-programm-windows-v-ubuntu"> <img src="/img/tmb/14/1396821/7bf082a24af42a1e609c94e7aaac309c-210x.jpg" alt="Аналог программ Windows в Ubuntu"> <span class="desc"> <span>Аналог программ Windows в Ubuntu</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 126</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/metodologiya-proektirovaniya_"> <img src="/img/tmb/13/1230943/55ba184bfae3c615660c482cd067217d-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/konstruirovanie-algoritmov-algoritmizatsiya-i-programmirovanie"> <img src="/img/tmb/15/1468707/d902dd4bc16841ca4ed76194c1b060f7-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="clear"></div> </div> </div> </div> <div class="cntWrapper"> <div class="list"> <h2 class="right-heading" id="related">Похожие презентации</h2> <div class="wrapper"> <a href="/informatika/vidi-suchasnih-personalnih-kompyuterv-pdgotovka-kompyutera"> <img src="/img/tmb/12/1145582/7e8c7cefb322f7385c855c99f7fdb4f5-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/sozdanie-web-dokumentov"> <img src="/img/tmb/11/1074206/8811c49bc1255860ca095b32ffe40f19-210x.jpg" alt="Создание Web - документов"> <span class="desc"> <span>Создание Web - документов</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 149</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/informatsiya-vidy-informatsii-2"> <img src="/img/tmb/12/1183275/5c05c9f5baa1c03a2483a6b693590a72-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/protokoly-kollektivnoy-etsp-nad-ellipticheskimi-krivymi"> <img src="/img/tmb/14/1311069/6612b9da5e239dcb5afa4423baf88a0e-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/making-powerpoint-slides"> <img src="/img/tmb/12/1153146/eee0febba79a78753e58735072cc9e66-210x.jpg" alt="Making PowerPoint Slides"> <span class="desc"> <span>Making PowerPoint Slides</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 189</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/peredacha-informatsii-v-kompyuternyh-setyah"> <img src="/img/tmb/13/1270706/14a576e1c96d4f958787c756952156df-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/lcd-monitory"> <img src="/img/tmb/11/1090600/807a3867d56b5982e2a8e8bdc9b6c03b-210x.jpg" alt="LCD мониторы"> <span class="desc"> <span>LCD мониторы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 171</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ustroystvo-kompyutera-43"> <img src="/img/tmb/15/1477452/cba49e3f08c524bcfb0f32c1ea94c677-210x.jpg" alt="Устройство компьютера"> <span class="desc"> <span>Устройство компьютера</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 165</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/634229-vospriyatie-i-predstavlenie-informatsii-1"> <img src="/img/tmb/7/634229/accf6efe41352e858891fca8cf531462-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/kodirovanie-tsvetovoy-informatsii"> <img src="/img/tmb/12/1152727/3b532050d8fc74b34c22a16a3f98e784-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/577059-prezentatsiya-po-informatike-vneklassnaya-deyatelnost"> <img src="/img/tmb/6/577059/06e1a42f89bab6673f2b08abb3de2f79-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/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> 316</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/555762-sozdanie-sayta-na-platforme-wix"> <img src="/img/tmb/6/555762/846a3b538796f9984eb1590e893207a2-210x.jpg" alt="Создание сайта на платформе WIX"> <span class="desc"> <span>Создание сайта на платформе WIX</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 250</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/animatsiya-4"> <img src="/img/tmb/12/1183056/52411be0dbe4699eb07b4cbeadcbe782-210x.jpg" alt="Анимация"> <span class="desc"> <span>Анимация</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 243</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/zashchita-sobstvennoy-informatsii-ot-nesanktsionirovannogo-dostupa-3_"> <img src="/img/tmb/13/1249693/c34ae016bc819ffffc0e6cdc955395e1-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/html-stranitsa"> <img src="/img/tmb/11/1062350/86be371a9f31288c523d2a1c61c7adac-210x.jpg" alt="HTML страница"> <span class="desc"> <span>HTML страница</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 145</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/dokumenty-i-deloproizvodstvo_"> <img src="/img/tmb/14/1351500/63f2270db1bab1f63f200e92e76ae033-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/tsiklicheskie-algoritmy-1"> <img src="/img/tmb/11/1093044/814937fcb61f68557eb85439bdd9594e-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/predstavlenie-o-programmnyh-sredah-kompyuternoy-grafiki-1"> <img src="/img/tmb/14/1398015/f8d3925069f30fa166e124b28386f512-210x.jpg" alt="Представление о программных средах компьютерной графики, мультимедийных средах"> <span class="desc"> <span>Представление о программных средах компьютерной графики, мультимедийных средах</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 214</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/sapr-autocad-2015-komandy-risovaniya"> <img src="/img/tmb/15/1470838/fd5b02636cf5318b82597f87685adbdf-210x.jpg" alt="САПР Autocad 2015. Команды рисования"> <span class="desc"> <span>САПР Autocad 2015. Команды рисования</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 133</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/pokolenie-protsessorov-amd_"> <img src="/img/tmb/13/1285423/8802a092f533c5d2226075a6340d93b9-210x.jpg" alt="Поколение процессоров AMD"> <span class="desc"> <span>Поколение процессоров AMD</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 100</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/559336-prezentatsiya-po-informatike-po-teme-kompyuternye"> <img src="/img/tmb/6/559336/1e8a35fa87644c4d1f265588d74cd8bb-210x.jpg" alt="Презентация по информатике по теме Компьютерные вирусы и защита от них (11класс)"> <span class="desc"> <span>Презентация по информатике по теме Компьютерные вирусы и защита от них (11класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 219</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/obrabotka-zvukovoy-informatsii"> <img src="/img/tmb/11/1053960/c17d40e61ef3f2a2aae6ce6e23ed9116-210x.jpg" alt="Обработка звуковой информации"> <span class="desc"> <span>Обработка звуковой информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 237</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/virtualnye-funktsii-i-polimorfizm"> <img src="/img/tmb/13/1236197/57528241df30f6205840b33497b6131c-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="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>