Создание таблиц. Часть 2. Полные уроки - История изменений

User17 в 19:52, 2 февраля 2013

2013-02-02T19:52:42Z

User16 в 12:56, 1 февраля 2013

2013-02-01T12:56:40Z

← Предыдущая		Версия 12:56, 1 февраля 2013
Строка 3:		Строка 3:
	<metakeywords>Информатика, класс, урок, на тему, 10 класс, Создание таблиц. Часть 2.</metakeywords>		<metakeywords>Информатика, класс, урок, на тему, 10 класс, Создание таблиц. Часть 2.</metakeywords>

-	'''~~Тема:~~ Создание таблиц. Часть 2.'''	+	==Тема==
		+	*'''Создание таблиц. Часть 2.'''

-	Цель: Научить растягивать и добавлять отдельные ячейки таблицы и регулировать расстояние между ними.	+	==Цель==
		+	*Научить растягивать и добавлять отдельные ячейки таблицы и регулировать расстояние между ними.

-	~~<br>~~	+	==Ход урока==

	Продолжим изучени таблиц. В этот раз задача состоит в том, чтобы растянуть ячейку 1х1 на два столбца. Пример показан на рисунке внизу:		Продолжим изучени таблиц. В этот раз задача состоит в том, чтобы растянуть ячейку 1х1 на два столбца. Пример показан на рисунке внизу:

-	~~<br>~~

-	[[Image:Tbl1.jpg]]	+	[[Image:Tbl1.jpg\|400px\|Таблица]]

-	~~<br>~~

	Сейчас самое время вспомнить о таких атрибутах как:		Сейчас самое время вспомнить о таких атрибутах как:
Строка 21:		Строка 21:
	*'''COLSPAN''' - определяет количество столбцов, на которые растягивается нужная ячейка		*'''COLSPAN''' - определяет количество столбцов, на которые растягивается нужная ячейка
	*'''ROWSPAN''' – задает количество рядов, на которые растягиваться ячейка.		*'''ROWSPAN''' – задает количество рядов, на которые растягиваться ячейка.
-
-	~~<br>~~

	Для создания указанной таблицы, нужно использовать атрибут '''COLSPAN '''со значением "2" для ячейки 1х1:		Для создания указанной таблицы, нужно использовать атрибут '''COLSPAN '''со значением "2" для ячейки 1х1:
Строка 57:		Строка 55:


		+	[[Image:Tbl2.jpg\|400px\|Таблица]]

-	~~[[Image:Tbl2.jpg]]~~

-	~~<br>~~ Теперь разберемся с параметром параметром '''ROWSPAN'''. Принцип действия тут точной такой же:	+	Теперь разберемся с параметром параметром '''ROWSPAN'''. Принцип действия тут точной такой же:

	< table >		< table >
Строка 84:		Строка 82:
	< /table >		< /table >

-	~~<br> [[Image:Tbl3.jpg]]~~


		+	[[Image:Tbl3.jpg\|400px\|Таблица]]
		+
		+
		+	===Расстояние между ячейками===

-	~~'''Расстояние между ячейками. '''~~

	Убрать пространство между ячейками таблицы можно при помощи атрибута cellspacing с параметром «0», которая должна прописываться возле тэга TABLE.		Убрать пространство между ячейками таблицы можно при помощи атрибута cellspacing с параметром «0», которая должна прописываться возле тэга TABLE.

	Попробуем проделать такую операцию с нашей таблицей:		Попробуем проделать такую операцию с нашей таблицей:
-


Строка 122:		Строка 121:
	А для того, чтобы наоборот расширить границы прописываем атрибуту cellspacing значение, к примеру, «6».		А для того, чтобы наоборот расширить границы прописываем атрибуту cellspacing значение, к примеру, «6».

-	~~<br>~~

-	[[Image:Tbl5.jpg]]	+	[[Image:Tbl5.jpg\|400px\|Таблица]]

-	~~<br>~~

-	~~'''~~Увеличение размеров таблицы~~.'''~~	+	===Увеличение размеров таблицы===

	Все это время действия проводились над таблицей небольшого размера. Давайте попробуем увеличить ее.		Все это время действия проводились над таблицей небольшого размера. Давайте попробуем увеличить ее.
Строка 134:		Строка 131:
	Для этого возле того же таки тэга TABLE прописываем атрибут cellpadding с любым значением (возмем 30):		Для этого возле того же таки тэга TABLE прописываем атрибут cellpadding с любым значением (возмем 30):

-	''< table cellspacing="6" cellpadding="30" >''	+	'''< table cellspacing="6" cellpadding="30" >'''
		+
		+	[[Image:Tbl6.jpg\|400px\|Таблица]]
		+
		+	{{#ev:youtube\|iQWe4VkHQIw}}

-	~~[[Image~~:~~Tbl6.jpg]]~~	+	{{#ev:youtube\|yJCnsRNDj-k}}

-	~~<br> {{#ev:youtube\|iQWe4VkHQIw}} {{#ev:youtube\|yJCnsRNDj-k}}~~ {{#ev:youtube\|7y8TiqQ50yw}}	+	{{#ev:youtube\|7y8TiqQ50yw}}

	<br>		<br>

-	~~'''~~Вопросы~~: '''~~	+	==Вопросы==

-	1. Как растянуть отдельную ячейку по ширине строки?	+	''1. Как растянуть отдельную ячейку по ширине строки? ''

-	2. Как расширить столбец на две строки?	+	''2. Как расширить столбец на две строки? ''

-	3. Каким командами убирается/добавляется расстояние между ячейками?	+	''3. Каким командами убирается/добавляется расстояние между ячейками? ''

-	4. С помощью каких атрибутов можно увеличить размер всей таблицы?	+	''4. С помощью каких атрибутов можно увеличить размер всей таблицы? '

	<br>		<br>

-	''Список использованных источников~~:''~~	+	==Список использованных источников==

-	1. Урок на тему: «Вставка и форматирование таблиц в HTML», Голубенко Н. С., г. Киев.	+	''1. Урок на тему: «Вставка и форматирование таблиц в HTML», Голубенко Н. С., г. Киев. ''

-	2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.	+	''2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.''

-	3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.	+	''3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г. ''

-	4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г.	+	''4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г. ''

-	<br> ''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''

	----		----

-	~~'''<u>Над уроком работали</u>'''~~

-	~~Голубенко Н~~. С.	+	''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''

		+
		+	----
		+
		+
		+	'''Над уроком работали'''
		+
		+	Голубенко Н. С.

	Соловьев М. С.		Соловьев М. С.
Строка 177:		Строка 183:

	----		----
-

User11 в 13:07, 29 марта 2011

2011-03-29T13:07:43Z

← Предыдущая		Версия 13:07, 29 марта 2011
Строка 166:		Строка 166:
	<br> ''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''		<br> ''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''

-	~~Если у вас есть исправления~~ или ~~предложения к данному уроку~~, [http://xvatit.com/~~index~~.~~php?do=feedback напишите нам~~].	+	----
		+
		+	'''<u>Над уроком работали</u>'''
		+
		+	Голубенко Н. С.
		+
		+
		+	Соловьев М. С.
		+
		+
		+	----
		+
		+
		+
		+	Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
		+
		+

-	Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - [http://xvatit.com/forum/ Образовательный форум].

	[[Category:Информатика_10_класс]]		[[Category:Информатика_10_класс]]

User17 в 11:56, 15 ноября 2010

2010-11-15T11:56:23Z

← Предыдущая		Версия 11:56, 15 ноября 2010
Строка 52:		Строка 52:
	Как видно из результата ячейка 1х1 растянута на длину двух ячеек.		Как видно из результата ячейка 1х1 растянута на длину двух ячеек.

-	И еще нам не нужно было прописывать ячейку 1х3. А если бы она осталась в коде, то вот что вышло бы:	+	И еще нам не нужно было прописывать ячейку 1х3.
		+
		+	А если бы она осталась в коде, то вот что вышло бы:
		+
		+

	[[Image:Tbl2.jpg]]		[[Image:Tbl2.jpg]]
Строка 82:		Строка 86:
	<br> [[Image:Tbl3.jpg]]		<br> [[Image:Tbl3.jpg]]

-	Расстояние между ячейками. Убрать пространство между ячейками таблицы можно при помощи атрибута cellspacing с параметром «0», которая должна прописываться возле тэга TABLE. Попробуем проделать такую операцию с нашей таблицей:	+
		+
		+	'''Расстояние между ячейками. '''
		+
		+	Убрать пространство между ячейками таблицы можно при помощи атрибута cellspacing с параметром «0», которая должна прописываться возле тэга TABLE.
		+
		+	Попробуем проделать такую операцию с нашей таблицей:
		+
		+

	< table cellspacing="0" > < tr>		< table cellspacing="0" > < tr>
Строка 122:		Строка 134:
	Для этого возле того же таки тэга TABLE прописываем атрибут cellpadding с любым значением (возмем 30):		Для этого возле того же таки тэга TABLE прописываем атрибут cellpadding с любым значением (возмем 30):

-	< table cellspacing="6" cellpadding="30" >	+	''< table cellspacing="6" cellpadding="30" >''

	[[Image:Tbl6.jpg]]		[[Image:Tbl6.jpg]]
Строка 128:		Строка 140:
	<br> {{#ev:youtube\|iQWe4VkHQIw}} {{#ev:youtube\|yJCnsRNDj-k}} {{#ev:youtube\|7y8TiqQ50yw}}		<br> {{#ev:youtube\|iQWe4VkHQIw}} {{#ev:youtube\|yJCnsRNDj-k}} {{#ev:youtube\|7y8TiqQ50yw}}

		+	<br>

-		+	'''Вопросы: '''
-	'''Вопросы: '''	+

	1. Как растянуть отдельную ячейку по ширине строки?		1. Как растянуть отдельную ячейку по ширине строки?

-	2. Как расширить столбец на две строки?	+	2. Как расширить столбец на две строки?

-	3. Каким командами убирается/добавляется расстояние между ячейками?	+	3. Каким командами убирается/добавляется расстояние между ячейками?

	4. С помощью каких атрибутов можно увеличить размер всей таблицы?		4. С помощью каких атрибутов можно увеличить размер всей таблицы?

		+	<br>

		+	''Список использованных источников:''

-	~~''Список использованных источников:''~~	+	1. Урок на тему: «Вставка и форматирование таблиц в HTML», Голубенко Н. С., г. Киев.
-		+
-	1. Урок на тему: «Вставка и форматирование таблиц в HTML», Голубенко Н. С., г. Киев.	+

	2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.		2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.
Строка 152:		Строка 164:
	4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г.		4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г.

-		+	<br> ''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
-	''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''	+

	Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].		Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].

User17: Новая страница: «'''Гипермаркет знаний>>Информатика>>[[Информа...»

2010-11-15T11:54:06Z

Новая страница: «'''Гипермаркет знаний>>Информатика>>[[Информа...»

Новая страница

'''[[Гипермаркет знаний - первый в мире!|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Создание таблиц. Часть 2.'''

<metakeywords>Информатика, класс, урок, на тему, 10 класс, Создание таблиц. Часть 2.</metakeywords>

'''Тема: Создание таблиц. Часть 2.'''

Цель: Научить растягивать и добавлять отдельные ячейки таблицы и регулировать расстояние между ними.

<br>

Продолжим изучени таблиц. В этот раз задача состоит в том, чтобы растянуть ячейку 1х1 на два столбца. Пример показан на рисунке внизу:

<br>

[[Image:Tbl1.jpg]]

<br>

Сейчас самое время вспомнить о таких атрибутах как:

*'''COLSPAN''' - определяет количество столбцов, на которые растягивается нужная ячейка
*'''ROWSPAN''' – задает количество рядов, на которые растягиваться ячейка.

<br>

Для создания указанной таблицы, нужно использовать атрибут '''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 >

<br>

Как видно из результата ячейка 1х1 растянута на длину двух ячеек.

И еще нам не нужно было прописывать ячейку 1х3. А если бы она осталась в коде, то вот что вышло бы:

[[Image:Tbl2.jpg]]

<br> Теперь разберемся с параметром параметром '''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 >

<br> [[Image: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 >

<br> [[Image:Tbl4.jpg]]

<br>

А для того, чтобы наоборот расширить границы прописываем атрибуту cellspacing значение, к примеру, «6».

<br>

[[Image:Tbl5.jpg]]

<br>

'''Увеличение размеров таблицы.'''

Все это время действия проводились над таблицей небольшого размера. Давайте попробуем увеличить ее.

Для этого возле того же таки тэга TABLE прописываем атрибут cellpadding с любым значением (возмем 30):

< table cellspacing="6" cellpadding="30" >

[[Image:Tbl6.jpg]]

<br> {{#ev:youtube|iQWe4VkHQIw}} {{#ev:youtube|yJCnsRNDj-k}} {{#ev:youtube|7y8TiqQ50yw}}

'''Вопросы: '''

1. Как растянуть отдельную ячейку по ширине строки?

2. Как расширить столбец на две строки?

3. Каким командами убирается/добавляется расстояние между ячейками?

4. С помощью каких атрибутов можно увеличить размер всей таблицы?

''Список использованных источников:''

1. Урок на тему: «Вставка и форматирование таблиц в HTML», Голубенко Н. С., г. Киев.

2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.

3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.

4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г.

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

Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].

Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - [http://xvatit.com/forum/ Образовательный форум].

[[Category:Информатика_10_класс]]