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

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

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

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

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>Количество просмотров: 163</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="52f434d089691a06dea427615e9e3a64" 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/graficheskie-informatsionnye-obekty-1"> <img src="/img/tmb/14/1344102/c3c911b3fb5563d69b702b48aa68b0d0-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/586506-poznavatelnye-zadachi-v-sistemah-schisleniya"> <img src="/img/tmb/6/586506/b6a66d30c43f0cd87b48ace7e1766109-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/580257-prezentatsiya-po-informatike-na-t-emu-1"> <img src="/img/tmb/6/580257/58e125c0853f05e61022c685c117d535-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/printsipy-raboty-vychislitelnoy-tehniki"> <img src="/img/tmb/12/1171646/780b5f2d4151229ba4a3fa68503ae86e-210x.jpg" alt="ПРИНЦИПЫ РАБОТЫ ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ"> <span class="desc"> <span>ПРИНЦИПЫ РАБОТЫ ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 170</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuter-15"> <img src="/img/tmb/13/1240735/5a86e72c47cff46a973c5293a4b0e6e0-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/programmirovanie-na-yazyke-paskal_"> <img src="/img/tmb/13/1251549/da0b5dcb636c6f228d42856d11c1e16c-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="clear"></div> </div> </div> </div> <div class="cntWrapper"> <div class="list"> <h2 class="right-heading" id="related">Похожие презентации</h2> <div class="wrapper"> <a href="/informatika/570111-graficheskiy-ispolnitel-cherepashka-logo"> <img src="/img/tmb/6/570111/b2fa522f25bfe46df90da7c2f1a6bdd8-210x.jpg" alt="Графический исполнитель Черепашка ЛОГО"> <span class="desc"> <span>Графический исполнитель Черепашка ЛОГО</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 196</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/interfeysy-konteynernye-klassy"> <img src="/img/tmb/12/1157364/5556c7e36e2e80664eb5b33713cffa3e-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/portalnye-tehnologii-dlya-biznesa-microsoft-navision_"> <img src="/img/tmb/13/1283243/3d79189db769ab919bf13d2afd1fcba1-210x.jpg" alt="Портальные технологии для бизнеса (Microsoft Navision + Microsoft CRM + SharePoint)"> <span class="desc"> <span>Портальные технологии для бизнеса (Microsoft Navision + Microsoft CRM + SharePoint)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 161</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/informatika-i-informatsionnye-tehnologii"> <img src="/img/tmb/12/1131473/fb0618230d1296f8b89fbfa5463bc537-210x.jpg" alt="Информатика и информационные технологии"> <span class="desc"> <span>Информатика и информационные технологии</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 173</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/mscflightloads-62"> <img src="/img/tmb/11/1047388/91e49e59108d4257e6c51f9cb1195af5-210x.jpg" alt="MSC.Flightloads 6.2"> <span class="desc"> <span>MSC.Flightloads 6.2</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 184</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/613492-rastrly-grafika-tayrybyna-szzhmba"> <img src="/img/tmb/7/613492/f03b439eab8d2dfb652f7057a407a103-210x.jpg" alt="Растрлық графика тақырыбына сөзжұмбақ"> <span class="desc"> <span>Растрлық графика тақырыбына сөзжұмбақ</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 291</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/formatirovanie-teksta-4"> <img src="/img/tmb/12/1136540/cfcb13ccfb5dcf6bdc7dfc8741cf798d-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/noksologiya-vzaimodeystvie-cheloveka-s-okruzhayushchey-sredoy"> <img src="/img/tmb/15/1401927/57fd538782b1906e9c14c7ff99300951-210x.jpg" alt="Ноксология. Взаимодействие человека с окружающей средой. (Лекция 3. Занятие 2.1)"> <span class="desc"> <span>Ноксология. Взаимодействие человека с окружающей средой. (Лекция 3. Занятие 2.1)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 177</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/lineynye-vychislitelnye-algoritmy-2"> <img src="/img/tmb/11/1057141/4a5f488b15d104a63db59ce4a7353cf8-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/protokol-http"> <img src="/img/tmb/12/1173400/b9590bed2716ec57649ce6cbdbe6e5e0-210x.jpg" alt="Протокол HTTP"> <span class="desc"> <span>Протокол HTTP</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 340</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ispolzovanie-blokov-denesha-v-rabote-s"> <img src="/img/tmb/8/758562/8e172e63edfa096f3d0a4ca1ea6454fd-210x.jpg" alt="Использование блоков Дьенеша в работе с детьми. презентация к занятию по информатике (средняя группа)"> <span class="desc"> <span>Использование блоков Дьенеша в работе с детьми. презентация к занятию по информатике (средняя группа)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 205</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/uroki-s-ispolzovaniem-kompyuternyh-tehnologiy"> <img src="/img/tmb/13/1261914/fd25e3776dae20f569b6a67fd5374d8d-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="wrapper"> <a href="/informatika/protokoly-setevogo-urovnya-modeli-osi-protokoly_"> <img src="/img/tmb/13/1253075/8aebe84b08cf37088e382eaf4546e9fb-210x.jpg" alt="Протоколы сетевого уровня модели OSI. Протоколы ARP, RARP, ICMP"> <span class="desc"> <span>Протоколы сетевого уровня модели OSI. Протоколы ARP, RARP, ICMP</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 185</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/upravlyayushchie-operatory-yazykov-programmirovaniya-c-c"> <img src="/img/tmb/12/1154779/efa76b737c4e70d3758a8845dc51605b-210x.jpg" alt="Управляющие операторы языков программирования C, C++, VBA, Pascal"> <span class="desc"> <span>Управляющие операторы языков программирования C, C++, VBA, Pascal</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 200</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/osnovnye-ponyatiya-baz-dannyh-1"> <img src="/img/tmb/15/1404717/27211c85895fd7f080b9cbfee5cf304f-210x.jpg" alt="Основные понятия баз данных"> <span class="desc"> <span>Основные понятия баз данных</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 179</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/642265-prezentatsiya-po-teme-modelirovanie-kak-metod-1"> <img src="/img/tmb/7/642265/f4a009435f0b5d11a33e60fbd0f72eb8-210x.jpg" alt="Презентация по теме Моделирование как метод познания"> <span class="desc"> <span>Презентация по теме Моделирование как метод познания</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 198</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/programmirovanie-na-yazyke-turbo-pascal_"> <img src="/img/tmb/13/1295747/71430a2a99b2b9fe02482f97e1e3cf88-210x.jpg" alt="Программирование на языке Turbo Pascal"> <span class="desc"> <span>Программирование на языке Turbo Pascal</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 172</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/virusy-i-antivirusnye-programmy-10-klass"> <img src="/img/tmb/11/1038705/85ad9bb259aeac8e9f5f826bad59bcbd-210x.jpg" alt="Вирусы и антивирусные программы (10 класс)"> <span class="desc"> <span>Вирусы и антивирусные программы (10 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 204</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/titulnaya-stranitsa"> <img src="/img/tmb/14/1380593/68f43f58d4493ce05979084019f62c0d-210x.jpg" alt="Титульная страница"> <span class="desc"> <span>Титульная страница</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 129</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/delegaty"> <img src="/img/tmb/13/1252473/06e58b7bdfd4d84adf28148d6f73612e-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/520573-prezentatsiya-k-uroku-ispolniteli-vokrug-nas-1"> <img src="/img/tmb/6/520573/afca42b253b8d59f4b49b71495b10721-210x.jpg" alt="Презентация к уроку Исполнители вокруг нас"> <span class="desc"> <span>Презентация к уроку Исполнители вокруг нас</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 230</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/607812-sistemy-schisleniya-13"> <img src="/img/tmb/7/607812/1b13d3dda2f89ac6940fb02a617af13d-210x.jpg" alt="Системы счисления"> <span class="desc"> <span>Системы счисления</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 150</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/viktorina-gagarin"> <img src="/img/tmb/12/1109551/23d91b198484e3a4184148bc5107e84a-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/575987--obshchie-svedeniya-o-yazyke-programmirovaniya"> <img src="/img/tmb/6/575987/b2f9365af6ef63da6183d04344ae5034-210x.jpg" alt=": Общие сведения о языке программирования Паскаль1"> <span class="desc"> <span>: Общие сведения о языке программирования Паскаль1</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 196</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>