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

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

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

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

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>Количество просмотров: 165</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="e995c820b45379b15ff3a0753db206d9" 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/vstavka-v-dokument-matematicheskih-formul_"> <img src="/img/tmb/13/1260537/c127b6bed6ff07be1a6a39eab1f7bfa7-210x.jpg" alt="Вставка в документ математических формул"> <span class="desc"> <span>Вставка в документ математических формул</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 199</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/test-po-informatike-na-temu-tekstovyy"> <img src="/img/tmb/15/1469970/a0ea55740076b356e74073523c7400f4-210x.jpg" alt="Тест по информатике на тему Текстовый процессор MS Word"> <span class="desc"> <span>Тест по информатике на тему Текстовый процессор MS Word</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 200</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/skype-5"> <img src="/img/tmb/12/1182476/243a4655e599ba4722f63b0700ab354d-210x.jpg" alt="Skype"> <span class="desc"> <span>Skype</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 182</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternye-seti-11_"> <img src="/img/tmb/14/1348342/90d57fd196ab2a34b573b09a3e60ae06-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="wrapper"> <a href="/informatika/upravlenie-kompyuterom-s-pomoshchyu-menyu_"> <img src="/img/tmb/14/1307362/93d6ef97840c48ea685b453e79b3befa-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/tsentr-razvitiya-i-reabilitatsii-rebenka"> <img src="/img/tmb/15/1442153/24207699b2d2007021c2b9427281a6c8-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/603194-slayd-vektorlyk-obektlermen-7-synyp"> <img src="/img/tmb/7/603194/611e67df6e6d7266439dae6ecb15a5b1-210x.jpg" alt="Слайд векторлык объектілермен 7 сынып"> <span class="desc"> <span>Слайд векторлык объектілермен 7 сынып</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 184</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> 279</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/openoffice-1"> <img src="/img/tmb/12/1194483/2575cf9510f06b054da5e7c3b25895a6-210x.jpg" alt="OpenOffice"> <span class="desc"> <span>OpenOffice</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 163</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/544101-kouching-daryndy-talantty-bala"> <img src="/img/tmb/6/544101/b5a0ebb8247f29e0dd00056a023758e9-210x.jpg" alt="КОУЧИНГ ДАРЫНДЫ, ТАЛАНТТЫ БАЛА"> <span class="desc"> <span>КОУЧИНГ ДАРЫНДЫ, ТАЛАНТТЫ БАЛА</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 335</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/618272-prezentatsiya-po-informatike-na-temu-osnovy-39"> <img src="/img/tmb/7/618272/a4c89f06045181ed6794943c8315b54d-210x.jpg" alt="Презентация по информатике на тему Основы логики (8 класс)"> <span class="desc"> <span>Презентация по информатике на тему Основы логики (8 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 171</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/postroenie-diagramm-i-grafikov-2_"> <img src="/img/tmb/14/1355808/f0d570829e4e79cf0bbc53edd9ce81d6-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/adresatsiya-kompyuterov-v-seti-1"> <img src="/img/tmb/11/1078978/ec612038197c2f17f01e89b4b94b8bcb-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/multimediya-internet-i-novye-tehnologii-v"> <img src="/img/tmb/14/1325939/c02264f8345347555f74d81533b5e9a7-210x.jpg" alt="Мультимедия, интернет и новые технологии в системе образования"> <span class="desc"> <span>Мультимедия, интернет и новые технологии в системе образования</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 154</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/tsiklicheskiy-algoritm-2"> <img src="/img/tmb/12/1101635/b483b3b61e8e597d25776b31b3e04735-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/diagrammy-10"> <img src="/img/tmb/12/1170024/9f882f9cc14f40a0fac96084cdd2b771-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/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> 167</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/reshenie-zadach-veroyatnost"> <img src="/img/tmb/12/1196805/a2837e2808962d3c3029fcffc02ceb8b-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/programmaly-zhabdya-atysty-talaptarmen-zhmys-steu"> <img src="/img/tmb/15/1406989/26ced81df997db925b082bcf8b2499df-210x.jpg" alt="Программалық жабдыққа қатысты талаптармен жұмыс істеу принциптері. Жобалау мәселелері"> <span class="desc"> <span>Программалық жабдыққа қатысты талаптармен жұмыс істеу принциптері. Жобалау мәселелері</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 172</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/organizatsiya-i-struktura-telekommunikatsionnyh-kompyuternyh-setey_"> <img src="/img/tmb/14/1344971/d50ea11328a363be4d3df48ef62c2bcc-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/566949-tsifrly-azastan-onkndgn-masaty"> <img src="/img/tmb/6/566949/1828a7aaa7d7cb32da04ff7fd26c60bd-210x.jpg" alt="Цифрлы Қазақстан онкүндігінің мақсаты"> <span class="desc"> <span>Цифрлы Қазақстан онкүндігінің мақсаты</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 523</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/bezopasnost-v-sotsialnyh-setyah-16"> <img src="/img/tmb/14/1381432/2ceca97e5abe4de82b285d057fa624cc-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/osnovnye-internet-terminy"> <img src="/img/tmb/11/1077397/bff03e724042f274f0459e7ca6349e75-210x.jpg" alt="Основные интернет - термины"> <span class="desc"> <span>Основные интернет - термины</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 202</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ustroystvo-sistemnogo-bloka-3"> <img src="/img/tmb/12/1178990/b13dd70c731deb4c696964f615dbe200-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/svoystva-informatsii-edinitsy-izmereniya-informatsii_"> <img src="/img/tmb/14/1340375/053adcefae2467462c10fa4a175ed894-210x.jpg" alt="Свойства информации. Единицы измерения информации"> <span class="desc"> <span>Свойства информации. Единицы измерения информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 154</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/554679-prezentatsiya-po-informatike-po-teme-novye"> <img src="/img/tmb/6/554679/df8bd81592e24cf754f0f82ea1d023da-210x.jpg" alt="Презентация по информатике по теме Новые поколения ЭВМ Нейрокомпьютеры"> <span class="desc"> <span>Презентация по информатике по теме Новые поколения ЭВМ Нейрокомпьютеры</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 256</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/lektsya-110-organzatsya-hesh-poshuku-yak"> <img src="/img/tmb/15/1415321/cefc7c6623336bfa1c2f0321f669d25f-210x.jpg" alt="Лекція 1/10. Організація хеш-пошуку як узагальнення вибірки за прямою адресою, вибір хеш-функцій та розв’язання колізій"> <span class="desc"> <span>Лекція 1/10. Організація хеш-пошуку як узагальнення вибірки за прямою адресою, вибір хеш-функцій та розв’язання колізій</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 153</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/istoriya-razvitiya-kompyuternoy-tehniki-1"> <img src="/img/tmb/14/1317329/5412ee6235565e8871054aca091f5e71-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/prezentatsiya-solnyshko-2-mladshaya-gruppa-kompyuternaya"> <img src="/img/tmb/9/861065/7c4215da0d58dd1796970a7f0a2d9a42-210x.jpg" alt="Презентация Солнышко 2 младшая группа компьютерная программа по информатике (младшая группа)"> <span class="desc"> <span>Презентация Солнышко 2 младшая группа компьютерная программа по информатике (младшая группа)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 141</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/bezopasnaya-rabota-v-sotsialnyh-setyah-31"> <img src="/img/tmb/12/1152495/7e28a3897e1257786038c2a0965100b0-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="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>