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

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

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

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

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>Количество просмотров: 110</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="5b39fbc56b4a5715921d0737eda47e3e" 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/sistemy-schisleniya-26"> <img src="/img/tmb/12/1125557/b849f48fa8411da5881f6ad706c635c8-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/aifp-5-dinamicheskoe-programmirovanie"> <img src="/img/tmb/15/1457023/aaf23630a5b0748afff601a9912892e9-210x.jpg" alt="АиФП 5. Динамическое программирование"> <span class="desc"> <span>АиФП 5. Динамическое программирование</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 122</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/sistemy-schisleniya-38_"> <img src="/img/tmb/14/1386412/6f9a528c9e029c6367bad3997bf75717-210x.jpg" alt="Системы счисления"> <span class="desc"> <span>Системы счисления</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 126</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/elektronnaya-tablitsa-ms-excel"> <img src="/img/tmb/11/1097400/0ee8ded93e224b9c444be4f4a3ac3cd7-210x.jpg" alt="Электронная таблица MS Excel"> <span class="desc"> <span>Электронная таблица MS Excel</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 165</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/tsentralnyy-protsessor"> <img src="/img/tmb/11/1068653/a2c8d8a6f40708b424a261c94322f221-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/resursy-internet-1"> <img src="/img/tmb/11/1073114/b389ebdffb0bd427d2c1ae24f3730423-210x.jpg" alt="Ресурсы Internet"> <span class="desc"> <span>Ресурсы Internet</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 183</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/analiz-zashchishchennosti-na-urovne-operatsionnoy-sistemy"> <img src="/img/tmb/11/1084933/7434b3ca3e2aa3d5e4efe58217fb1e00-210x.jpg" alt="Анализ защищенности на уровне операционной системы"> <span class="desc"> <span>Анализ защищенности на уровне операционной системы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 134</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/539100-prezentatsiya-po-informatike-na-temu-osnovy-33"> <img src="/img/tmb/6/539100/7bdfc962990ba3505321bff2681e2bad-210x.jpg" alt="Презентация по информатике на тему Основы защиты информации"> <span class="desc"> <span>Презентация по информатике на тему Основы защиты информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 158</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/dinamicheskaya-pamyat-1"> <img src="/img/tmb/14/1340194/e492f13fa7cb059a1f965b2a7b2d5c07-210x.jpg" alt="Динамическая память"> <span class="desc"> <span>Динамическая память</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 106</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/diagrammy-deyatelnosti"> <img src="/img/tmb/15/1465062/c4c564710ab7de35662f6d3db78e192d-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/predstavlenie-informatsii-v-kompyutere-3"> <img src="/img/tmb/12/1192653/a447518d153bd0c0f422a44648be9fa1-210x.jpg" alt="Представление информации в компьютере"> <span class="desc"> <span>Представление информации в компьютере</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 136</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/informatsionnaya-sistema-3"> <img src="/img/tmb/12/1151694/af69d818e09d80db33075d01eb2d961c-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/514346-prezentatsiya-po-ikt-na-temu-osnovnye"> <img src="/img/tmb/6/514346/329a8a8e18f2a2827a96b39d0e39d93e-210x.jpg" alt="Презентация по ИКТ на тему Основные этапы моделирования (8 класс)"> <span class="desc"> <span>Презентация по ИКТ на тему Основные этапы моделирования (8 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 144</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternye-virusy-i-borba-s-nimi-1"> <img src="/img/tmb/14/1347045/fd92ec69215c051aee2a8c8a3f155359-210x.jpg" alt="Компьютерные вирусы и борьба с ними"> <span class="desc"> <span>Компьютерные вирусы и борьба с ними</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 134</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/html-edits-v1"> <img src="/img/tmb/15/1437685/80751f63177d44fc80485bdccdecd885-210x.jpg" alt="HTML Edits V1"> <span class="desc"> <span>HTML Edits V1</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 106</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/logicheskie-velichiny-operatsii-vyrazheniya-operatsii-logicheskogo"> <img src="/img/tmb/12/1115568/c7a588bb49d0fddb0593b48b164a97a2-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/tekstovaya-i-graficheskaya-informatsiya_"> <img src="/img/tmb/14/1385619/a5b089f383b786691ee48815d2569ccd-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/vidy-informatsii-5"> <img src="/img/tmb/14/1341521/1e467836477ebac04fde84b19e94be68-210x.jpg" alt="Виды информации"> <span class="desc"> <span>Виды информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 131</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/metody-sortirovki-massiva_"> <img src="/img/tmb/14/1372986/9bd2bc1a113ea7912933d5aa44572e41-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/tipy-dannyh-5"> <img src="/img/tmb/15/1482226/1b2bf03e07bc3de9f862db9a228c1832-210x.jpg" alt="Типы данных"> <span class="desc"> <span>Типы данных</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 276</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/643849-prezentatsiya-po-kazahskomu-yazyku-na-temu-620"> <img src="/img/tmb/7/643849/b5f3c976a4f2af768c7e9bf98c152664-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/554948-prezentatsiya-tehnicheskie-sredstva-kompyuternoy-grafiki"> <img src="/img/tmb/6/554948/ca9f586c3131c517c6fbcd4c622cbd99-210x.jpg" alt="Презентация Технические средства компьютерной графики"> <span class="desc"> <span>Презентация Технические средства компьютерной графики</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 160</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/607719-vidy-algoritma-reshenie-zadach"> <img src="/img/tmb/7/607719/690152ec1daf7df76f4144e78b5d09c2-210x.jpg" alt="Виды алгоритма. Решение задач"> <span class="desc"> <span>Виды алгоритма. Решение задач</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 121</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/subd-access-3"> <img src="/img/tmb/11/1099902/4698689c595799b04568645bdf154847-210x.jpg" alt="SUBD ACCESS"> <span class="desc"> <span>SUBD ACCESS</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 128</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/bazy-dannyh-2037"> <img src="/img/tmb/15/1453776/582444e082dc1fd031d7e70d2f209ea8-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/return-to-libc-attack"> <img src="/img/tmb/15/1471565/047ad656263e284e75f5b1664f5fd61c-210x.jpg" alt="Return to libc attack"> <span class="desc"> <span>Return to libc attack</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 132</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/sistemy-schisleniya-v-zadaniyah-ege-i"> <img src="/img/tmb/12/1127891/1c3e0ab36bea68fec0890dfcfd4f7298-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/507902-prezentatsiya-po-informatike-na-temu-sozdanie-33"> <img src="/img/tmb/6/507902/91360d8c046aab2f4aa74f16a38039aa-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/vvedenie-v-multimediynye-bazy-dannyh-10"> <img src="/img/tmb/12/1164486/1d07670800b64bbfa9d084d04551c306-210x.jpg" alt="Введение в мультимедийные базы данных 10"> <span class="desc"> <span>Введение в мультимедийные базы данных 10</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 125</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/metody-shifrovaniya-1"> <img src="/img/tmb/15/1409670/981105e6c22d599722ab765bef9b2586-210x.jpg" alt="Методы шифрования"> <span class="desc"> <span>Методы шифрования</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 160</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>