ualin.com
Додати статтю | Реєстрація


Інтернет
Автомобілі та мотоцикли
Бізнес
Будівництво, ремонт
Дім та родина
Діти
Захоплення, хобі
Комп'ютери та ПЗ
Красота, імідж, косметика
Медицина та здоров'я
Мода, стиль
Приготування їжи
Психологія та тренінги
Реклама та PR
Релігія, непізнане, окультизм
Реферати, курсові, лабораторні, методички
    Іноземні мови
    Інформатика
    Міське будівництво й господарство
    Медицина
    Менеджмент
    Різне
    Соціальна педагогіка
    Страхування
    Теорія грошей
    Функціонально вартісний аналіз
    Хімія
Собаки, кішки, рибки, птахи
Суспільство та політика
Товари та послуги
Туризм, подорожі
Фітнес, схуднення, дієти
Чоловік та жінка
Кава особливо корисна для жінок  
Первоцвіт (примула)  
Как не промахнуться при покупке межкомнатных дверей из дерева  
Як вибрати Dj-Мікшер  
Зимние шины Yokohama.  
Cт. Лючія й Барбадос — самі "весільні" острови  
Повернення боргів з фізичних осіб  
Требования пожарной безопасности при эксплуатации наиболее распространенных объектов предпринимательской деятельности (часть 3)  
Наскільки «органічні» органічні продукти?  
«Наша допомога потрібна армії, а святкування почекають!». Єдиному виробнику дитячих молочних сумішей на території України виповнилося 42 роки  
Безкоштовне розміщення статей: психологія, тренінги, авто, красота, мода, родина - ualin.com
финансы   кондиц   футбол   плащі   тема   косметическом   Chicco   сайту   засипати   Освещение   лікування   Капучіно   аналіз   частый   водянистый   стул   синтетичні  
Зберегти сторінку Зробити стартовою Відправити другу
 укр
 рус
Урок 4:«Работа с таблицами»
Урок 4:«Работа с таблицами»
Ход урока:
   Ознакомление с новым материалом.
   Таблицы в Web-документах применяются не только для размещения табличных данных. Они служат для вставки изображений и ссылок, для рациональной компоновки Web-страниц.



   
   Цели:
    Научиться создавать таблицы в Web-документах;
    Производить форматирование таблиц;
    Объединять ячейки в таблицах.
   
   План:
   1. Элементы таблицы.
   2. Задание параметров таблицы
   3. Атрибуты элемента Table.
   4. Атрибуты элементов строк и столбцов.
   5. Цвет в таблицах.
   6. Объединение ячеек таблицы.
   
   Ход урока:
   Ознакомление с новым материалом.
   Таблицы в Web-документах применяются не только для размещения табличных данных. Они служат для вставки изображений и ссылок, для рациональной компоновки Web-страниц.
   
   Элементы таблицы.
   Таблицы строятся по принципу вложения и вводятся на Web-страницу с помощью ряда элементов. Каждая таблица начинается открывающим тегом <TABLE> и заканчивается тегом </TABLE>. Создаваемая таблица как бы разворачивается по строкам, а строки заполняются ячейками. При этом внутри тегов <TABLE>…</TABLE> могут вставляться следующие элементы:
    TR – элемент создания строки;
    TD – элемент, определяющий содержимое ячейки данных;
    TH – элемент, определяющий ячейку заголовка.
   Например, для создания таблицы 3x2 используется следующий шаблон:
   <TABLE>
    <TR><TD>…</TD> <TD>…</TD></TR>
    <TR><TD>…</TD> <TD>…</TD></TR>
    <TR><TD>…</TD> <TD>…</TD></TR>
   </TABLE>
   где многоточием обозначено содержимое каждой ячейки. Внутри тегов первой строки <TR>…</TR> вместо элементов TD могут размещаться элементы заголовков каждого столбца – элементы TH.
   Задание: Постройте по этому шаблону таблицу телефонов, например, ваших друзей.
   <TABLE border>
    <TR><TH>Фамилия, имя</TH> <TH>Телефон</TH></TR>
    <TR><TD>Авдеенко Маша</TD> <TD>233-15-63</TD></TR>
    <TR><TD>Борисова Катя</TD> <TD>236-55-91</TD></TR>
    <TR><TD>Веденеев Олег</TD> <TD>446-21-67</TD></TR>
    <TR><TD>Григоренко Андрей</TD> <TD>245-22-88</TD></TR>
   </TABLE>
   Здесь в тег <TABLE> введен атрибут border, задающий внешнюю и внутренние рамки таблицы толщиной 1 пиксел. Данная таблица на Web-странице будет иметь вид, показанный на рис.
   
   Задание параметров таблицы.
   Взгляните на полученную таблицу. Она имеет ширину столбцов, равную максимальной длине текста в ячейках. Таблица выровнена по левому краю окна броузера, а ее содержимое отображается гарнитурой Times New Roman. Содержимое в ячейках заголовка выравнивается по центру, а в других ячейках – по левой границе. Чтобы изменить эти установки, принятые по умолчанию, используются различные атрибуты.
   
   Атрибуты элемента TABLE.
    width – задает ширину таблицы. Его значение выражается в пикселах или процентах (от полной ширины окна броузера). Например, тег <TABLE width=”40%”> задает таблицу с длиной всех строк, равной 40 % от ширины окна. Задание ширины в % предпочтительнее, поскольку строки таблицы полностью отображаются в окне броузера (без прокрутки).
    align – задает выравнивание таблицы в документе. Этот атрибут может принимать одно из трех значений: left (размещение таблицы вдоль левого края документа), center (по центру документа), right (вдоль правого края).
    border – задает вывод рамок таблицы. Если значение этого атрибута не определено, например, <TABLE border>, все рамки будут иметь толщину 1 пиксел. Если же значение задано (например, border=5, то толщина 5 пикселей будет присвоена только внешней рамке. Толщина внутренних рамок по-прежнему будет равняться 1 пикселу.
   
   Атрибуты элементов строк и столбцов.
   Рассмотренные выше атрибуты относятся к таблице в целом. Остановимся на атрибутах, которые позволяют задать определенное форматирование для ячеек строки.
    Width и height – устанавливают размеры ячеек строки: ширину и высоту. Эти атрибуты могут использоваться в тегах <TR>, <TD>.
    Align – задает выравнивание содержимого в ячейках и вводится в теги <TR> или <TD>. Этот атрибут может принимать значения: left, right, center и justify (выравнивание по левому и правому краям).
    Valign – определяет выравнивание содержимого по вертикали. Этот атрибут применяется с такими значениями: top (выравнивание по верхнему краю ячеек), bottom (по нижнему краю ячеек), middle (центрирование по вертикали) Например, тег <TR valign=”middle”> назначает центрирование по вертикали содержимого ячеек строки.
   
   Цвет в таблицах.
   Перечислим атрибуты, которые управляют цветом таблиц.
    Bgcolor – определяет цвет фона в таблице. В зависимости от того, в какой тег этот атрибут вводится (<TABLE>, <TR>, <TH> или <TD>), будет задан фон всей таблицы, фон строки, фон ячейки заголовка или фон данных. Например, тег <TABLE bgcolor=”red”> назначает красный фон всей таблицы, а тег <TD bgcolor=”yellow”> задает желтый фон ячейки данных.
    Bordercolor – назначает цвет рамок таблицы. Если атрибут bordercolor вставить в тег <TABLE>, то он будет действовать, когда у таблицы имеются рамки, то есть при наличии атрибута вorder. Если же нужно задать цвет лишь определенных ячеек, атрибут bordercolor помещается в теги <TR>, <TH> или <TD>. Например, тег <TR bordercolor=”FF0000”> задает красные границы всех ячеек строки.
   
   Объединение ячеек таблицы.
   В языке HTML предусмотрена возможность объединения смежных ячеек. Для этого в начальных тегах <TH> или <TD> применяются следующие атрибуты.
    Rowspan – объединяет ячейки смежных строк. Значение атрибута задает количество объединяемых ячеек. Например, начальный тег ячейки <TD rowspan=2> устанавливает объединение двух ячеек из смежных строк.
    Colspan – объединяет ячейки смежных столбцов. Например, <TD colspan=3> формирует одну ячейку данных из трех ячеек смежных столбцов.
   Если применить одновременно оба атрибута – rowspan и colspan, получим объединенную ячейку из смежных строк и столбцов. Например, тег <TD rowspan=2 colspan=4>
   Задает ясейку, расположенную на пересечении двух строк и четырех столбцов.
   Рассмотрим пример HTML-документа, в которой помещена таблица, описывающая результаты олимпиад, проводимых в школе.
   HTML-код этой страницы выглядит следующим образом:
   <HTML>
    <HEAD>
    <TITLE>Объединение ячеек</TITLE>
    </HEAD>
    <BODY>
    <H2>Результаты школьных олимпиад</H2>
   <TABLE border>
    <TR><TH>Участник</TH> <TH>Предмет</TH> <TH>Очки</TH></TR>
    <TR><TD rowspan=4>Класс 8-А</TD> <TD>Математика</TD><TD>114</TD></TR>
    <TR><TD>Физика</TD> <TD>81</TD></TR>
    <TR><TD>Химия</TD> <TD>71</TD></TR>
    <TR><TD colspan=2>
    <I>Общий балл: 266 </I></TD></TR>
    <TR><TD rowspan=4>Класс 8-Б</TD> <TD>Математика</TD><TD>157</TD></TR>
    <TR><TD>Физика</TD> <TD>79</TD></TR>
    <TR><TD>Химия</TD> <TD>101</TD></TR>
    <TR><TD colspan=2>
    <I>Общий балл: 337 </I></TD></TR>
    </TABLE>
    </BODY>
   </HTML>
   Таблица, представленная этим кодом, имеет две объединенные ячейки – «Класс 8-А» и «Класс 8-Б», которые получены из смежных ячеек одного столбца. Имеются также две ячейки «Общий балл…», полученные объединением двух смежных ячеек одной строки.
   
   Закрепление изученного на уроке.
   1. Перечислите HTML-элементы, с помощью которых создаются таблицы.
   2. Каковы параметры таблицы, принятые по умолчанию?
   3. Как вставить в Web-документ таблицу 3x3? Запишите HTML-код.
   4. Как задать ширину таблицы?
   5. Как выровнять таблицу по центру документа, по правому краю?
   6. Какими атрибутами задаются толщина и цвет рамок таблицы?
   7. Как задать заливку ячеек строки с определенным цветом?
   8. Запишите значения атрибутов для выравнивания содержимого ячеек по правому и верхнему краям.
   9. С помощью каких атрибутов выполняется объединение ячеек таблицы?
   
   Домашнее задание.
   Гаевский А. Ю. «Информатика 7-11» - §76 выучить.
   Зарецкая И. Т. «Информатика 10-11». Глава 6 § 4.7 выучить.
   Глушаков С.В., Ломотько Д.В., Мельников И.В. Работа в сети Интернет: Учебный курс. – Харьков: Фолио; М.: ООО «Издательство АСТ», 2001. (с.103 - 160).
   Конспекты в тетради выучить.
   
   
   Построение таблицы.
   
   
   
   
   <HTML>
    <HEAD>
    <TITLE>Построение таблицы</TITLE>
    </HEAD>
    <BODY>
   <TABLE border>
    <TR><TH>Фамилия, имя</TH> <TH>Телефон</TH></TR>
    <TR><TD>Авдеенко Маша</TD> <TD>233-15-63</TD></TR>
    <TR><TD>Борисова Катя</TD> <TD>236-55-91</TD></TR>
    <TR><TD>Веденеев Олег</TD> <TD>446-21-67</TD></TR>
    <TR><TD>Григоренко Андрей</TD> <TD>245-22-88</TD></TR>
   </TABLE>
    </BODY>
   </HTML>
   
   Объединение ячеек.
   
   
   
   <HTML>
    <HEAD>
    <TITLE>Объединение ячеек</TITLE>
    </HEAD>
    <BODY>
    <H2>Результаты школьных олимпиад</H2>
   <TABLE border>
    <TR><TH>Участник</TH> <TH>Предмет</TH> <TH>Очки</TH></TR>
    <TR><TD rowspan=4>Класс 8-А</TD> <TD>Математика</TD><TD>114</TD></TR>
    <TR><TD>Физика</TD> <TD>81</TD></TR>
    <TR><TD>Химия</TD> <TD>71</TD></TR>
    <TR><TD colspan=2>
    <I>Общий балл: 266 </I></TD></TR>
    <TR><TD rowspan=4>Класс 8-Б</TD> <TD>Математика</TD><TD>157</TD></TR>
    <TR><TD>Физика</TD> <TD>79</TD></TR>
    <TR><TD>Химия</TD> <TD>101</TD></TR>
    <TR><TD colspan=2>
    <I>Общий балл: 337 </I></TD></TR>
    </TABLE>
    </BODY>
   </HTML>
   
   
   
   

Автор: ualin | Відгуки: 0 | Перегляди: 6134 | 20/02/2011 Реферати, курсові, лабораторні, методички - Інформатика

Ссылка на статью:


Комментарий
    PhyllisBeike19:44 04-03-2017    
wh0cd729244 <a href=http://buycialis2017.com/>buy cialis</a>
    PhyllisBeike01:14 24-01-2017    
wh0cd729244 <a href=http://buyadalat.us.com/>cheap adalat</a> <a href=http://buycrestor.us.com/>crestor price</a> <a href=http://buydoxycycline.us.com/>Buy Doxycycline</a> <a href=http://zithromax.us.com/>Zithromax By Mail</a> <a href=http://buynexium.us


Страница: 1

Оставить комментарий
Ваше имя:
Комментарий:
Введите текст, изображенный на картинке:
 
 укр  |  рус