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

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

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

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

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>Количество просмотров: 119</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="2b6c79e09e5ef04c035130a5c94cf891" 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/bitlocker-v-windows-server-2008-i_"> <img src="/img/tmb/14/1367856/a12aa8cc170755d31629d9a773841bdf-210x.jpg" alt="BitLocker в Windows Server 2008 и Windows Vista SP1"> <span class="desc"> <span>BitLocker в Windows Server 2008 и Windows Vista SP1</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 164</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/tsentralnyy-protsessor_"> <img src="/img/tmb/14/1390765/667847c44a84c5dbbdde53742a11ddf6-210x.jpg" alt="Центральный процессор"> <span class="desc"> <span>Центральный процессор</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 115</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/594511-tehnicheskie-sredstva-kompyuternoy-grafiki-2"> <img src="/img/tmb/6/594511/bbfc64720e65f09e5b1b875689dbda88-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="wrapper"> <a href="/informatika/profilnoe-obuchenie-i-ikt"> <img src="/img/tmb/11/1042321/aeda6f55e00b5c0c8b0660ec5ab7be33-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/kak-vyzhit-v-sotsialnyh-setyah"> <img src="/img/tmb/11/1085451/6d14909beadab77a40098061e1efd9a2-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/604649-prezentatsiya-po-ikt-kolichestvo-informatsii-kak"> <img src="/img/tmb/7/604649/424d4d22d02d717188c8151f72afcc42-210x.jpg" alt="Презентация по ИКТ Количество информации как мера уменьшения неопределенности знания (8-9 класс)"> <span class="desc"> <span>Презентация по ИКТ Количество информации как мера уменьшения неопределенности знания (8-9 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 133</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/klaviatury-i-myshi_"> <img src="/img/tmb/14/1383811/6a03b7f186c23b4c59e3eb4bba82e3ce-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/kompyuternye-virusy-i-antivirusnye-programmy-33_"> <img src="/img/tmb/13/1265129/842230875122a8a4733028eb3422da5b-210x.jpg" alt="Компьютерные вирусы и антивирусные программы"> <span class="desc"> <span>Компьютерные вирусы и антивирусные программы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 141</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/598039-prezentatsiya-po-informatike-na-temu-test-1"> <img src="/img/tmb/6/598039/bc3fc22bced3f60596e4eeae29b3a717-210x.jpg" alt="Презентация по информатике на тему Тест по теме СУБД"> <span class="desc"> <span>Презентация по информатике на тему Тест по теме СУБД</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 204</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/558144-prezentatsiya-po-informatike-k-vneauditornomu-meropriyatiyu"> <img src="/img/tmb/6/558144/c6790ee4d307e03c9c05bd20fffe8020-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/yazyk-si-chast-5-privedenie-tipov"> <img src="/img/tmb/14/1396848/2035dd602ecdc3fa9f85d634d0044461-210x.jpg" alt="Язык си. Часть 5. Приведение типов. Символы и строки"> <span class="desc"> <span>Язык си. Часть 5. Приведение типов. Символы и строки</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 121</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/543887-bezopasnyy-internet-10"> <img src="/img/tmb/6/543887/67ca27b009242eff9ab82b0d93451346-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/531675-prezentatsiya-po-informatike-microsoft-powerpoint-badarlamasyprezentatsiyalar"> <img src="/img/tmb/6/531675/3f3685519e4738042c436d8de90309f8-210x.jpg" alt="Презентация по информатике Microsoft PowerPoint Бағдарламасы.Презентациялар"> <span class="desc"> <span>Презентация по информатике Microsoft PowerPoint Бағдарламасы.Презентациялар</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 120</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/obrabotka-tekstovoy-informatsii-na-kompyutere_"> <img src="/img/tmb/14/1363256/13e7cf2bbf7b56f968b288647fbefa67-210x.jpg" alt="Обработка текстовой информации на компьютере"> <span class="desc"> <span>Обработка текстовой информации на компьютере</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 128</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/videoadaptery-radeon"> <img src="/img/tmb/11/1064222/9470687d3fba2ec387a7908058eb7ded-210x.jpg" alt="Видеоадаптеры Radeon"> <span class="desc"> <span>Видеоадаптеры Radeon</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 120</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/632211-pascal-abcurok-7dzhordzh-bullogika"> <img src="/img/tmb/7/632211/ce0bb1685b6b967acab61bd6f0a55994-210x.jpg" alt="Pascal ABC_Урок 7_Джордж Буль_Логика"> <span class="desc"> <span>Pascal ABC_Урок 7_Джордж Буль_Логика</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 189</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/svoystva-i-vidy-algoritmov"> <img src="/img/tmb/12/1177696/8c73a039d605a7a693a901bdd1614b54-210x.jpg" alt="Свойства и виды алгоритмов"> <span class="desc"> <span>Свойства и виды алгоритмов</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 141</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/536408-prezentatsiya-po-informatike-i-ikt-sohranenie"> <img src="/img/tmb/6/536408/cfb6c9002e3650e6f7f9296e85146372-210x.jpg" alt="Презентация по информатике и ИКТ Сохранение результатов поиска информации в сети Интернет 3 класс"> <span class="desc"> <span>Презентация по информатике и ИКТ Сохранение результатов поиска информации в сети Интернет 3 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 145</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/sistemno-deyatelnostnyy-podhod-na-urokah-informatiki"> <img src="/img/tmb/12/1114909/47e7ce18b3b081386e4ad529f26fec21-210x.jpg" alt="Системно-деятельностный подход на уроках информатики"> <span class="desc"> <span>Системно-деятельностный подход на уроках информатики</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 144</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/635682-prezentatsiya-po-informatike-na-temu-istoriya-46"> <img src="/img/tmb/7/635682/dea7a849b2db0856b40393a3824d2f15-210x.jpg" alt="Презентация по информатике на тему История вычислительной техники"> <span class="desc"> <span>Презентация по информатике на тему История вычислительной техники</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 141</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/bezopasnyy-internet-24"> <img src="/img/tmb/12/1143076/217607711788543d2a3f7f4f8c7b3444-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/chelovek-i-informatsiya-4"> <img src="/img/tmb/12/1172291/b40146d3bd9022edb98e03dcea8ea137-210x.jpg" alt="Человек и информация"> <span class="desc"> <span>Человек и информация</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 168</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/zadacha-o-potoke-minimalnoy-stoimosti"> <img src="/img/tmb/15/1454421/c558b6ebb8d56dc5849875998df546e2-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/zashchita-sobstvennoy-informatsii-ot-nesanktsionirovannogo-dostupa-7_"> <img src="/img/tmb/14/1305098/e9821b2cc799da6de299f8addc2af87a-210x.jpg" alt="Защита собственной информации от несанкционированного доступа"> <span class="desc"> <span>Защита собственной информации от несанкционированного доступа</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 109</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kodirovanie-algoritmicheskih-struktur"> <img src="/img/tmb/12/1120701/0bebf2ac581200baeb27a520e749b814-210x.jpg" alt="КОДИРОВАНИЕ АЛГОРИТМИЧЕСКИХ СТРУКТУР"> <span class="desc"> <span>КОДИРОВАНИЕ АЛГОРИТМИЧЕСКИХ СТРУКТУР</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 190</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/matematicheskiy-paket-mathcad"> <img src="/img/tmb/11/1055595/2bb7c57ab22bc71421154d9ad0d0171e-210x.jpg" alt="МАТЕМАТИЧЕСКИЙ ПАКЕТ MATHCAD"> <span class="desc"> <span>МАТЕМАТИЧЕСКИЙ ПАКЕТ MATHCAD</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 205</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/553106-hranenie-informatsii-sozdaem-i-sohranyaem-fayly"> <img src="/img/tmb/6/553106/d8233a8788add33f2b7d4b547db88b1d-210x.jpg" alt="Хранение информации. Создаем и сохраняем файлы"> <span class="desc"> <span>Хранение информации. Создаем и сохраняем файлы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 178</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kvn-po-informatike-i-matematike"> <img src="/img/tmb/12/1130789/d0ba3927098296770d5b8d0c6442ef0d-210x.jpg" alt="КВН по информатике и математике"> <span class="desc"> <span>КВН по информатике и математике</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 190</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/formatirovanie-2008"> <img src="/img/tmb/14/1323878/f0ede7a5db124b396295a8eb1136d9f2-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/vred-i-polza-pk"> <img src="/img/tmb/12/1174338/76177bdc8a559a036525b8f8cec5819f-210x.jpg" alt="вред и польза пк"> <span class="desc"> <span>вред и польза пк</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 209</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>