Будь умным!

У вас вопросы?
У нас ответы:) SamZan.net

Лабораторна робота 3 Створення таблиць Мета роботи- навчитись створювати таблиці Хід роботи- Ско

Работа добавлена на сайт samzan.net:

Поможем написать учебную работу

Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.

Предоплата всего

от 25%

Подписываем

договор

Выберите тип работы:

Скидка 25% при заказе до 24.11.2024

Лабораторна робота № 3

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

Мета роботи: навчитись створювати таблиці

Хід роботи:

  1.  Скопіювати в папку Прізвище_HTML видані викладачем графічні файли Zamok.jpg та Tochka.jpg, Yellow.jpg.
  2.  В папці Прізвище_HTML створити текстовий документ з назвою Table.html, відкрити його за допомогою браузеру та перейти до редагування HTML-коду.
  3.  Створимо таблицю, яка складається із двох рядків та трьох стовпців та містить текстову інформацію.  Структура таблиці показана на рис.1.

11

12

13

21

22

23

Рис. 1. Таблиця, яку необхідно відобразити у вікні браузера

Записуємо відповідний HTML-код файлу Table.html з цієї таблицею (границі поки що невидимі) та переглянемо її у браузері:

<html>

<head>

<title>Створення таблиць </title>

</head>

<body>

<table>

<tr>

<td>11</td>

<td>12</td>

<td>13</td>

</tr>

<tr>

<td>21</td>

<td>22</td>

<td>23</td>

</tr>

</ table>

</body>

</html>

  1.  Визначимо границі таблиці. Реалізуємо це за допомогою параметра border. Колір границі задається параметром bordercolor="колір_границі". Для визначення таблиці із границями чорного кольору, товщина яких дорівнює 3 пікселі, необхідно записати наступний код:

...

<table border="3" bordercolor="#000000" >

<tr>

<td>11</td>

<td>12</td>

<td>13</td>

</tr>

<tr>

<td>21</td>

<td>22</td>

<td>23</td>

</tr>

 </ table>

</body>

Переглянемо цю таблицю у браузері (рис. 2)

Рис. 2. Відображення таблиці із границями товщиною 3 пікселі у вікні браузера

  1.  Визначимо висоту рядків та ширину стовпців а також відображення таблиці із білим та сірим кольором фону  для  сусідніх комірок. Створимо таблицю із рядками висотою 40 та стовбцями шириною стовбців 60 пікселів. Ширина стовпців та висота рядків задається за допомогою параметрів width та  height відповідно. Записуємо HTML-код для заданої таблиці та переглянемо її у браузері (рис. 3):

…

<table border="3" bordercolor="#000000">

<tr>

<td  height = "40" width = "60" bgcolor = "#ffffff">11</td>

<td  width = "60" bgcolor = "#999999">12</td>

<td  width = "60" bgcolor = "#ffffff">13</td>

</tr>

<tr>

<td  height = "40" width = "60" bgcolor = "#999999">21</td>

<td  width = "60" bgcolor = "#ffffff">22</td>

<td  width = "60" bgcolor = "#999999">23</td>

</tr>

</table>

</body>

Рис. 3. Відображення таблиці із висотою рядків 40 та шириною стовпців 60  пікселів

  1.  Зробимо вертикальне та горизонтальне вирівнювання  змісту таблиці.  Таблиця, яку необхідно отримати зображена на рис. 4.

Рис. 4. Таблиця, яку необхідно відобразити у вікні браузера

Реалізуємо це за допомогою параметру valign="middle" (top, bottom) для вертикального вирівнювання та  параметру align="center" (left, right) для горизонтального вирівнювання. Записуємо HTML-код для заданої таблиці та переглянемо її у браузері

…

<table border="3" bordercolor="#000000" >

<tr>

<td height="40" width="60" valign="top" align="left" bgcolor = "#ffffff">11</td>

<td width="60" valign="middle" align="center" bgcolor = "#999999">12</td>

<td width="60" valign="bottom" align="right" bgcolor = "#ffffff">13</td>

</tr>

<tr>

<td height="40" width="60" valign="top" align="left" bgcolor ="#999999">21</td>

<td width="60" valign="middle" align="center" bgcolor = "#ffffff">22</td>

<td width="60" valign="bottom" align="right" bgcolor = "#999999">23</td>

</tr>

</table>

</body>

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

…

<table align="center">

<tr height="200">

<td width="200" valign="top" background="Zamok.jpg" align="center"> <h1><br><br>ЗВІТ</h1></td>

<td width="50" background="Tochka.jpg"></td>

<td  width="300" valing="top" background="Yellow.jpg" align="center">

<h3>Таблиця, яка показує успішність  групи ОА-Д-2:</h3>

<table cellspasing="3" border="3" bordercoler="black"  

background="Yellow.jpg">

<tr  height="40">

<td width="200"  align="center"> п'ятірок </td>

<td width="100" align="center">10%</td>

</tr>

<tr height="40">

<td width="200"  align="center" >четвірок </td>

<td width="100"  align="center" >70% </td>

</tr>

<tr height="40">

<td width="200"   align="center">трійок </td>

<td width="100"  align="center" >20% </td>

</tr>

<tr height="40">

<td width="200"   align="center">двійок </td>

<td width="100" align="center" >не має </td>

</tr>

</table>

<br> <h3>Викладач</h3>

</td>

</tr>

</table>

</body>

Переглянемо цю таблицю у браузері.

Завдання для самостійної роботи

  1.  У редакторі "Блокнот" дописати нові вивчені теги мови HTML у  ваш сайт.
  2.  Розробити ще дві сторінки вашого сайту фірми. Вони повинні  містити таблиці із вирівнюванням та форматуванням комірок..
  3.  Зберегти сайт із змінами у власній папці.

Питання для самоперевірки

  1.  Навіщо використовуються таблиці?
  2.  Як визначити кількість рядків у таблиці?
  3.  Як визначити кількість колонок в таблиці?
  4.  Як визначити горизонтальне вирівнювання змісту комірок таблиці?
  5.  Чи можна визначити вертикальне вирівнювання змісту рядків таблиці?
  6.  Чи можна визначити ширину окремої комірки таблиці?
  7.  Як визначити ширину таблиці?
  8.  Чи можна визначити висоту таблиці?
  9.  Як встановити відстань між комірками таблиці?
  10.  Як встановити встановити товщину границь таблиці?


11

12

13

21

22

23




1. Criticl Life Lessons You Cn Lern From Kung Fu Pnd в которой автор рассказывает что он вынес из просмотра мультфильма Кунгфу П
2. Что пронеслось как вешнее дыханье Что надо мной так быстро протекло И что
3. темам. 2.Формирование сознания к глубокому усвоению знаний основных фондов.
4. Доходы государственного бюджета и их классификация
5. РЕФЕРАТ дисертації на здобуття наукового ступеня кандидата педагогічних наук Київ 1998
6. тематики Расти должны все цветы
7. Книга Эшли об узлах Книга сообщества http---vk
8. партии правого толка в основном либеральной антикоммунистической направленности; 2 демократические п
9. реферат дисертації на здобуття наукового ступеня кандидата технічних наук Харкі
10. 1Научное знание представляет собой сложную систему в которую включена разнообразная научная информация
11. Статья 50 Норма продолжительности рабочего времени Нормальная продолжительность рабочего времени работни
12. ЗАНЯТОСТЬ И ТРУДОУСТРОЙСТВО- ПОНЯТИЕ И ФОРМЫ Занятость ~ деятельность граждан Республики Беларусь связан
13. Мезоэкономические проблемы российской экономики
14. Мировая экономика.html
15. Тема- ТРАВМЫ КОНЕЧНОСТЕЙ И ИХ ЛЕЧЕНИЕ НА ЭТАПАХ МЕДИЦИНСКОЙ ЭВАКУАЦИИ
16. тема 14. ВВП страны равен 4000 у.html
17. B ~ылмыс жасау~а кін~лі деп таныл~ан адам~а прокурор ~аулысымен та~айындалатын оны~ ы~тары мен бо
18. . ПРИЧИНЫ РАЗЛИЧИЙ В ДОХОДАХ Конечной целью экономического развития является рост благосостояния человека
19. вариант Основные средства 918000 Амортизация основных средств
20. Sitution- Student - It~s my girlfriend~s birthdy next week nd I wnt to give her surprise with specil present or specil evening somewhere

Материалы собраны группой SamZan и находятся в свободном доступе