Презентация на тему 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>Количество просмотров: 242</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="022441865d461957857277d07f64db2b" 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/ustroystva-vvoda-i-vyvoda-informatsii"> <img src="/img/tmb/13/1244713/7fb9f250234aebf13a8261adfdc35c8b-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/elementy-algebry-logiki_"> <img src="/img/tmb/13/1276627/954cfc1d79636bf2dbd7006b9cb8014f-210x.jpg" alt="Элементы алгебры логики"> <span class="desc"> <span>Элементы алгебры логики</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 124</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/sravnenie-mnozhestv-3"> <img src="/img/tmb/13/1208637/f152a36d45f97f67c3ff5a99e63045f1-210x.jpg" alt="Сравнение множеств"> <span class="desc"> <span>Сравнение множеств</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 120</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/522057-prezentatsiya-k-uroku-po-teme-sozdanie-2"> <img src="/img/tmb/6/522057/ae04366a5008c3901e6e3aedd0ed3ad4-210x.jpg" alt="Презентация к уроку по теме Создание Flash-анимации, 10 класс"> <span class="desc"> <span>Презентация к уроку по теме Создание Flash-анимации, 10 класс</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 197</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/edinitsy-izmereniya-informatsii-6_"> <img src="/img/tmb/14/1363107/840ed65b08b9dc281e11c56cb4027802-210x.jpg" alt="Единицы измерения информации"> <span class="desc"> <span>Единицы измерения информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 111</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/priznaki-obektov-1_"> <img src="/img/tmb/13/1256581/f99606279225441dca291ed47481bd42-210x.jpg" alt="Признаки объектов"> <span class="desc"> <span>Признаки объектов</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 103</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/virusy-i-antivirusnye-programmy-7"> <img src="/img/tmb/11/1058715/56c3e1930942757ef71de7abf64359dd-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/lektsiya-9-cc-stil-programmirovaniya-struktury"> <img src="/img/tmb/15/1434252/bde3501513537cd4099384fd3f9ea48c-210x.jpg" alt="Лекция 9 (C/C++). Стиль программирования. Структуры в Си. Объединения - union"> <span class="desc"> <span>Лекция 9 (C/C++). Стиль программирования. Структуры в Си. Объединения - union</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 176</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/internet-kursy"> <img src="/img/tmb/12/1130331/2ab824de7f3a502df696ab19ddce53c9-210x.jpg" alt="Интернет курсы"> <span class="desc"> <span>Интернет курсы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 167</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/otsenka-slozhnyh-sistem"> <img src="/img/tmb/12/1176793/df2e214fc2905ea1c31ba57ea864097c-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/ispolzovanie-igrovyh-priyomov-na-logopedicheskih-zanyatiyah-1"> <img src="/img/tmb/9/862731/0e620f6f4c189ad9769e586b06549407-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/kratkiy-obzor-uslug_"> <img src="/img/tmb/13/1252493/35da18b6e575fd8dcad5bf408cdfbe28-210x.jpg" alt="Краткий обзор услуг"> <span class="desc"> <span>Краткий обзор услуг</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 148</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternyy-sleng"> <img src="/img/tmb/13/1251084/be43516b55f100cbc226db1c00afbb76-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/kompyuternye-virusy-i-antivirusnye-programmy-68"> <img src="/img/tmb/14/1304439/94c39ae251d9193ac4863745c78fe579-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/515168-elektronnye-tablitsy-2007"> <img src="/img/tmb/6/515168/5c048a6a51e9d31c68f1b32170068e34-210x.jpg" alt="Электронные таблицы"> <span class="desc"> <span>Электронные таблицы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 76</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/pravovaya-ohrana-programm-i-dannyh-zashchita"> <img src="/img/tmb/11/1055542/bf3bcc6c33fb6cda03ae5e6cd6908027-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/617615-prezentatsiya-po-informatike-na-temutehnicheskie-sredstva"> <img src="/img/tmb/7/617615/29bd8429a92ba56a4897d09f5ce4a7ce-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/559151-prezentatsiya-po-teme-osnovy-logiki-2"> <img src="/img/tmb/6/559151/71806ade318f7d9362eb6672b5af2100-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/rabota-v-sotsialnyh-setyah"> <img src="/img/tmb/12/1167769/d50fc87f8ba56ab743a64faa470f73fe-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/funktsii-excel-1_"> <img src="/img/tmb/13/1277871/8322abdf19d3328e11daed74dfba4b87-210x.jpg" alt="Функции Excel"> <span class="desc"> <span>Функции Excel</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 106</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/504826-prezentatsiya-k-uroku-informatiki-slozhnye-usloviya-1"> <img src="/img/tmb/6/504826/879df393f1ebb01caae66bfbac98b77c-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/505075-prezentatsiya-programmirovanie-lineynyh-algoritmov"> <img src="/img/tmb/6/505075/27424331c78bd52a16b518d77d055ba4-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/apparatnoe-obespechenie-sovremennogo-kompyutera"> <img src="/img/tmb/11/1084165/d129925616fc2e81674cff570236116c-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/setevoy-etiket-1"> <img src="/img/tmb/11/1048473/9b5959b1ff26381ead5f8af017b49e8b-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/563516-prezentatsiya-po-informatike-informatsiya-i-eyo-1"> <img src="/img/tmb/6/563516/cc68f05161cacdfe6f5c909c498a5f54-210x.jpg" alt="Презентация по информатике Информация и её свойства (7 класс)"> <span class="desc"> <span>Презентация по информатике Информация и её свойства (7 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 175</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/3d-grafika-1_"> <img src="/img/tmb/14/1373732/ec112fb4c5427aaba9dcc878d664052e-210x.jpg" alt="3D-графика"> <span class="desc"> <span>3D-графика</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 134</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/511210-prezentatsiya-logika-formy-myshleniya"> <img src="/img/tmb/6/511210/7ca0aaf83f4b4e2f569dcb4becbb0bbe-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/autodesk-inventor-professional"> <img src="/img/tmb/12/1106973/7926526fc01916b76cbfa6c85dbf99ea-210x.jpg" alt="Autodesk Inventor® Professional"> <span class="desc"> <span>Autodesk Inventor® Professional</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 188</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/514147-prezentatsiya-po-podgotovke-k-kontrolnoy-rabote"> <img src="/img/tmb/6/514147/90315c74945e73d12186533988db3337-210x.jpg" alt="Презентация по подготовке к контрольной работе на тему Действия с информацией (3 класс)"> <span class="desc"> <span>Презентация по подготовке к контрольной работе на тему Действия с информацией (3 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 177</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/interaktivnaya-igra-prezentatsiya-uroka-dlya-interaktivnoy-4"> <img src="/img/tmb/9/823342/7de57df87ab6f67f2be91593dc8f5778-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="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>