KNOWLEDGE HYPERMARKET

Створення таблиць. Частина 2. Повні уроки
Строка 3: Строка 3:
<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:
&lt; /table &gt;  
&lt; /table &gt;  
-
<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>
 
&lt; table cellspacing="0" &gt; &lt; tr&gt;  
&lt; table cellspacing="0" &gt; &lt; tr&gt;  
Строка 120: Строка 119:
&lt; /table &gt;  
&lt; /table &gt;  
-
<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»)&nbsp;: ''&lt; table cellspacing="6" cellpadding="30" &gt;''  
Для цього біля того ж таки тегу TABLE прописуємо атрибут cellpadding з будь-яким значенням (візьмемо «30»)&nbsp;: ''&lt; table cellspacing="6" cellpadding="30" &gt;''  
-
[[Image:Tbl6.jpg]]  
+
[[Image:Tbl6.jpg|480px|Створення таблиць]]  
-
<br> {{#ev: youtube|iQWe4VkHQIw}} {{#ev: youtube|yJCnsRNDj - k}} {{#ev: youtube|7y8TiqQ50yw}}  
+
<br> {{#ev: youtube|iQWe4VkHQIw}}  
 +
 
 +
{{#ev: youtube|yJCnsRNDj - k}}  
 +
 
 +
{{#ev: youtube|7y8TiqQ50yw}}  
<br>  
<br>  
-
'''Самоконтроль:'''
+
==Самоконтроль==
-
1. Як розтягнути окрему клітинку по ширині рядка?  
+
''1. Як розтягнути окрему клітинку по ширині рядка? ''
-
2. Як розширити стовпець на два рядки?  
+
''2. Як розширити стовпець на два рядки? ''
-
3. Яким командами регулюється відстань між клітинками?  
+
''3. Яким командами регулюється відстань між клітинками? ''
-
4. За допомогою яких атрибутів можна збільшити розмір усієї таблиці?  
+
''4. За допомогою яких атрибутів можна збільшити розмір усієї таблиці? ''
<br>  
<br>  
-
''Список використаної літератури:''
+
==Список використаної літератури==
-
1. Урок на тему: «Вставка і форматування таблиць в HTML», Голубенко Н. С., м. Київ.  
+
''1. Урок на тему: «Вставка і форматування таблиць в HTML», Голубенко Н. С., м. Київ. ''
-
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.  
+
''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''
-
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.  
+
''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''
-
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.  
+
''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008. ''
-
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.  
+
''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''
 +
 
 +
 
 +
----
<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''  
<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''  
-
<br> <br> ----
 
-
'''<u>Над уроком працювали</u>'''
+
----
-
<br> ----
 
-
'''<u>Над уроком працювали</u>'''
+
'''Над уроком працювали'''
Голубенко Н. С.
Голубенко Н. С.
-
 
Соловйов М. С.
Соловйов М. С.
-
----
 
 +
----

Версия 18:46, 2 ноября 2012

Гіпермаркет Знань>>Інформатика>>Інформатика 10 клас. Повні уроки>> Інформатика: Створення таблиць. Частина 2.

Содержание

Тема

  • Створення таблиць. Частина 2.

Мета

  • Навчити розтягувати і додавати окремі елементи таблиці і регулювати відстань між ними.

Тип уроку

  • теоретично-практичний

Хід уроку

Розтягування клітинок

Продовжимо вивчення таблиць. Цього разу завдання полягає в тому, щоб розтягнути клітинку 1х1 на два стовпці. Приклад показаний на малюнку внизу:


Створення таблиць


Зараз саме час згадати про такі атрибути як:

  • COLSPAN - визначає кількість стовпців, на які розтягується потрібний клітинку
  • ROWSPAN - задає кількість рядків, на які розтягується клітинку.

Для створення вказаної таблиці, треба використовувати атрибут COLSPAN зі значенням "2" для клітинки 1х1:

< table >

< tr >

< td height="35" bgcolor="pink" colspan="2" > < center >1x1< /center > < /td >

< td width="50" bgcolor="green" > < center >1x2< /center > < /td >

< /tr >

< tr >

<td height="35" width="50" bgcolor="green"> < center >2x1< /center > < /td >

<td width="50" bgcolor="pink"> < center >2x2< /center > < /td >

<td width="50" bgcolor="green"> < center >2x3< /center > < /td >

< /tr >

< /table >


Як видно з результату, клітинка 1х1 розтягнута на довжину двох стовпців.

Звертаємо увагу на те, що нам не потрібно було створювати і прописувати клітинку 1х3.

А якби вона залишилася в коді, то ось що вийшло б:


Створення таблиць


Тепер розберемося з параметром ROWSPAN. Принцип дії тут точно такий:

< table >

< tr >

< td height="35" bgcolor="pink" > < center >1x1< /center> < /td >

< td width="50" bgcolor="green" > < center >1x2< /center> < /td >

< td width="50" bgcolor="pink" rowspan="2"> < center >1x3< /center> < /td >

< /tr >

< tr >

< td height="35" width="50" bgcolor="green"> < center >2x1< /center> < /td >

< td width="50" bgcolor="pink" > < center >2x2< /center > < /td >

< /tr>

< /table >


Tbl3.jpg


Відстань між елементами таблиці

Прибрати простір між елементами таблиці можна за допомогою атрибуту cellspacing з параметром «0», яка повинна прописуватися біля тегу TABLE.

Спробуємо виконати таку операцію з нашою таблицею:


< table cellspacing="0" > < tr>

< td height="35" bgcolor="pink" > < center >1x1< /center > < /td>

< td width="50" bgcolor="green" > < center >1x2< /center > < /td>

< td width="50" bgcolor="pink" rowspan="2"> < center >1x3< /center> < /td >

< /tr >

< tr >

< td height="35" width="50" bgcolor="green" > < center >2x1< /center > < /td >

< td width="50" bgcolor="pink" > < center >2x2< /center > < /td >

< /tr >

< /table >


Створення таблиць


А для того, щоб навпаки розширити межі прописуємо атрибуту 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.



Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.



Над уроком працювали

Голубенко Н. С.

Соловйов М. С.



Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.

Источник — «http://edufuture.biz/index.php?title=%D0%A1%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8C._%D0%A7%D0%B0%D1%81%D1%82%D0%B8%D0%BD%D0%B0_2._%D0%9F%D0%BE%D0%B2%D0%BD%D1%96_%D1%83%D1%80%D0%BE%D0%BA%D0%B8»
Предмети > Інформатика > Інформатика 10 клас

Авторські права | Privacy Policy |FAQ | Партнери | Контакти | Кейс-уроки

©  Автор системы образования 7W и Гипермаркета Знаний - Владимир Спиваковский

При использовании материалов ресурса
ссылка на edufuture.biz обязательна (для интернет ресурсов - гиперссылка).
edufuture.biz 2008-© Все права защищены.
Сайт edufuture.biz является порталом, в котором не предусмотрены темы политики, наркомании, алкоголизма, курения и других "взрослых" тем.

Разработка - Гипермаркет знаний 2008-

Ждем Ваши замечания и предложения на email:
По вопросам рекламы и спонсорства пишите на email: