<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Створення таблиць. Частина 2.</metakeywords>
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Створення таблиць. Частина 2.</metakeywords>
-
<br> '''Тема: Створення таблиць. Частина 2.'''
+
==Тема==
+
*'''Створення таблиць. Частина 2.'''
-
'''Мета:''' Навчити розтягувати і додавати окремі елементи таблиці і регулювати відстань між ними.
+
==Мета==
+
*Навчити розтягувати і додавати окремі елементи таблиці і регулювати відстань між ними.
-
'''Тип уроку:''' теоретично-практичний
+
==Тип уроку==
+
*теоретично-практичний
-
'''Хід уроку:'''
+
==Хід уроку==
-
<br>
+
===Розтягування клітинок===
Продовжимо вивчення таблиць. Цього разу завдання полягає в тому, щоб розтягнути клітинку 1х1 на два стовпці. Приклад показаний на малюнку внизу:
Продовжимо вивчення таблиць. Цього разу завдання полягає в тому, щоб розтягнути клітинку 1х1 на два стовпці. Приклад показаний на малюнку внизу:
Строка 17:
Строка 20:
<br>
<br>
-
[[Image:Tbl1.jpg]]
+
[[Image:Tbl1.jpg|480px|Створення таблиць]]
<br>
<br>
Строка 25:
Строка 28:
*'''COLSPAN''' - визначає кількість стовпців, на які розтягується потрібний клітинку
*'''COLSPAN''' - визначає кількість стовпців, на які розтягується потрібний клітинку
*'''ROWSPAN''' - задає кількість рядків, на які розтягується клітинку.
*'''ROWSPAN''' - задає кількість рядків, на які розтягується клітинку.
-
-
<br>
Для створення вказаної таблиці, треба використовувати атрибут ''COLSPAN'' зі значенням "2" для клітинки 1х1:
Для створення вказаної таблиці, треба використовувати атрибут ''COLSPAN'' зі значенням "2" для клітинки 1х1:
Строка 52:
Строка 53:
< /table >
< /table >
-
<br>
Як видно з результату, клітинка 1х1 розтягнута на довжину двох стовпців.
Як видно з результату, клітинка 1х1 розтягнута на довжину двох стовпців.
Строка 62:
Строка 62:
<br>
<br>
-
[[Image:Tbl2.jpg]]
+
[[Image:Tbl2.jpg|480px|Створення таблиць]]
<br> Тепер розберемося з параметром ''ROWSPAN''. Принцип дії тут точно такий:
<br> Тепер розберемося з параметром ''ROWSPAN''. Принцип дії тут точно такий:
Строка 92:
Строка 92:
<br>
<br>
-
'''Відстань між елементами таблиці. '''
+
===Відстань між елементами таблиці===
Прибрати простір між елементами таблиці можна за допомогою атрибуту cellspacing з параметром «0», яка повинна прописуватися біля тегу TABLE.
Прибрати простір між елементами таблиці можна за допомогою атрибуту cellspacing з параметром «0», яка повинна прописуватися біля тегу TABLE.
Строка 98:
Строка 98:
Спробуємо виконати таку операцію з нашою таблицею:
Спробуємо виконати таку операцію з нашою таблицею:
-
<br>
< table cellspacing="0" > < tr>
< table cellspacing="0" > < tr>
Строка 120:
Строка 119:
< /table >
< /table >
-
<br> [[Image:Tbl4.jpg]]
+
<br> [[Image:Tbl4.jpg|480px|Створення таблиць]]
<br>
<br>
Строка 128:
Строка 127:
<br>
<br>
-
[[Image:Tbl5.jpg]]
+
[[Image:Tbl5.jpg|480px|Створення таблиць]]
<br>
<br>
-
'''Збільшення розмірів таблиці.'''
+
===Збільшення розмірів таблиці===
Весь цей час дії проводилися з таблицею невеликого розміру. Давайте спробуємо збільшити її.
Весь цей час дії проводилися з таблицею невеликого розміру. Давайте спробуємо збільшити її.
Строка 138:
Строка 137:
Для цього біля того ж таки тегу TABLE прописуємо атрибут cellpadding з будь-яким значенням (візьмемо «30») : ''< table cellspacing="6" cellpadding="30" >''
Для цього біля того ж таки тегу TABLE прописуємо атрибут cellpadding з будь-яким значенням (візьмемо «30») : ''< table cellspacing="6" cellpadding="30" >''
А для того, щоб навпаки розширити межі прописуємо атрибуту cellspacing зі значенням, наприклад, «6».
Збільшення розмірів таблиці
Весь цей час дії проводилися з таблицею невеликого розміру. Давайте спробуємо збільшити її.
Для цього біля того ж таки тегу TABLE прописуємо атрибут cellpadding з будь-яким значенням (візьмемо «30») : < table cellspacing="6" cellpadding="30" >
Самоконтроль
1. Як розтягнути окрему клітинку по ширині рядка?
2. Як розширити стовпець на два рядки?
3. Яким командами регулюється відстань між клітинками?
4. За допомогою яких атрибутів можна збільшити розмір усієї таблиці?
Список використаної літератури
1. Урок на тему: «Вставка і форматування таблиць в HTML», Голубенко Н. С., м. Київ.
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.
Над уроком працювали
Голубенко Н. С.
Соловйов М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.