KNOWLEDGE HYPERMARKET


Створення таблиць. Частина 2. Повні уроки
Строка 88: Строка 88:
< /table >  
< /table >  
-
<br> [[Image:Tbl3.jpg]]  
+
<br> [[Image:Tbl3.jpg|480px|Створення таблиць]]  
<br>  
<br>  

Версия 18:47, 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 >


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


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

Прибрати простір між елементами таблиці можна за допомогою атрибуту 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.




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




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

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

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




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

Предмети > Інформатика > Інформатика 10 клас