Шевченко / ЛР3
.docxЛабораторна робота № 3
Тема: «HTML. Створення web-сторінки з таблицями»
Мета: Уміти додавати на сторінку таблицю. Форматувати строки, стовпці та комірки таблиці.
Теоретичні відомості
Створення таблиць
<table параметри>
Тег <table> служить контейнером для елементів, що визначають вміст таблиці. Будь-яка таблиця складається з рядків і комірок, які задаються за допомогою тегів <tr> і <td>.
Деякі параметри <table>
bordercolor = “колір рамки”
bgcolor= “колір таблиці”
border= “товщина рамки”
cellpadding= “Відступ від рамки до вмісту комірки” cellspacing= “Відстань між комірками”
Тег <thead> призначений для зберігання одного або кількох рядків, які представлені вгорі таблиці. Допустимо використовувати не більше одного елемента <thead> в межах однієї таблиці, і він повинен йти у вихідному коді відразу після тегу <table>
Тег <tr> служить контейнером для створення рядка таблиці. Кожна комірка в межах такого рядка може задаватися за допомогою тегу <th> або <td>.
Тег <th> призначений для створення однієї комірки таблиці, яка позначається як заголовна. Текст в такій клітинці відображається браузером зазвичай жирним шрифтом і вирівнюється по центру.
Тег <td> Призначений для створення однієї комірки таблиці.
Деякі параметри <th> та <td>
align= “left|right|center|justify”
визначає вирівнювання вмісту комірки по горизонталі.
valign= “top|bottom|middle”
вирівнювання вмісту комірки по вертикалі.
bgcolor= “Колір фону комірки”
bordercolor= “Колір рамки”
colspan= “Об'єднує горизонтальні комірки”
rowspan= “Об'єднує вертикальні комірки”
height= “Висота комірки”
width= “Ширина осередку”
Приклад
<table>
<thead>Заголовок таблиці </thead>
<tr>
<th>текст заголовок у клітинкі</th>
<td>текст у клітинкі</td>
…
</tr>
<tr>
<th>текст заголовок у клітинкі</th>
<td>текст у клітинкі</td>
…
</tr>
………………….
</table>
Порожню клітинку описують, як <td></td> або <td> </td> .
Послідовність виконання роботи
-
На новій web-сторінці створить таблицю з даними про свій рейтинг.
Таблиця буде складатися з 3 стовпців та 4 рядків.
Задайте заголовок таблиці “Результати рейтингу”.
Задайте заголовки стовпців та рядків.
Заповніть таблицю оцінками.
-
Новий файл збережіть під назвою file3.htm. Перегляньте його у браузері.
-
Змінить вигляд таблиці. Задайте товщину рамки таблиці, на приклад, 3, задайте кольори рамки та фона таблиці.
-
Вирівнюйте текст у клітинках таблиці.
У заголовках – по центру, в інших комірках – на ваш смак.
-
Задайте ширину та висоту комірок.
Рис 3. Приклад виконання роботи
Контрольні запитання
-
Яке призначення тегу table?
-
Який параметр тегу table використовується для завдання товщини рамки таблиці?
-
Який параметр тегу table використовується для завдання відступу від рамки до вмісту комірки та для завдання відстані між комірками?
-
Які теги формують у таблиці рядки, клітинки-заголовки і звичайні клітинки?
-
Як у таблиці об'єднати декілька клітинок в одну?
-
Який параметр використовують для вирівнювання елементів?