Відмінності між версіями «Створення веб-сторінок Одеська школа 27 Урок 4»
(→Завдання) |
|||
| (не показані 33 проміжні версії цього учасника) | |||
| Рядок 11: | Рядок 11: | ||
<b><td></b> НЕобов'язковий парний йому <b></td></b> - створення комірки таблиці у рядку | <b><td></b> НЕобов'язковий парний йому <b></td></b> - створення комірки таблиці у рядку | ||
| − | <h2 style = color:green;> | + | <h2 style = color:green;>Приклад таблиці</h2> |
<table> | <table> | ||
<tr> | <tr> | ||
| − | <td> | + | <td>№ |
| − | <td> | + | <td>Прізвище |
| − | <td> | + | <td>Ім'я |
| − | <td> | + | |
| − | <td> | + | <tr> |
| + | <td>1 | ||
| + | <td> Франко | ||
| + | <td>Іван | ||
| + | <tr> | ||
| + | |||
| + | <td>2 | ||
| + | <td> Шевченко | ||
| + | <td>Тарас | ||
| + | |||
| + | <tr> | ||
| + | <td>3 | ||
| + | <td>Українка | ||
| + | <td> Леся | ||
| + | |||
| + | <tr> | ||
| + | <td>4 | ||
| + | <td>Загребельний | ||
| + | <td> Павло | ||
| + | |||
| + | <tr> | ||
| + | <td>5 | ||
| + | <td> Гончар | ||
| + | <td>Олесь<br> | ||
</table> | </table> | ||
| Рядок 26: | Рядок 49: | ||
А так виглядає сам HTML-код.</p> | А так виглядає сам HTML-код.</p> | ||
| − | < | + | |
| − | < | + | <table> <br> |
| − | < | + | <tr><br> |
| − | < | + | <td>№ <td>Прізвище <td>Ім'я |
| − | < | + | |
| − | < | + | <tr><br> |
| − | </ | + | <td>1 <td> Франко <td>Іван |
| + | |||
| + | <tr><br> | ||
| + | <td>2 <td> Шевченко <td>Тарас | ||
| + | |||
| + | <tr><br> | ||
| + | <td>3 <td>Українка <td> Леся | ||
| + | |||
| + | <tr><br> | ||
| + | <td>4 <td>Загребельний <td> Павло | ||
| + | |||
| + | <tr><br> | ||
| + | <td>5 <td> Гончар <td>Олесь | ||
| + | </table> | ||
| + | |||
| + | <h2> Атрибути тега <table> </h2> | ||
| + | <b>align</b> - <br> | ||
| + | Вирівнювання таблиці відносно документа. Можливі значення: center, left, right <br> | ||
| + | <b>bgcolor</b> -<br> | ||
| + | Визначає колір фону в таблиці <br> | ||
| + | <b>border</b> -<br> | ||
| + | Товщина рамки в пікселях. Якщо атрибут не вказаний, то таблиця виводиться без видимої рамки <br> | ||
| + | <b>bordercolor</b> -<br> | ||
| + | Колір рамки таблиці<br> | ||
| + | <b>width</b> - <br> | ||
| + | Ширина таблиці в процентах (80%) або в пикселях (700)<br> | ||
| + | |||
| + | <h2 style = color:green;>Приклад застосування атрибутів тега <table></h2> | ||
| + | |||
| + | <table align=center bgcolor=#00FFFF border=2 bordercolor=red width=400> | ||
| + | <tr> | ||
| + | <td>№ | ||
| + | <td>Прізвище | ||
| + | <td>Ім'я | ||
| + | |||
| + | <tr> | ||
| + | <td>1 | ||
| + | <td> Франко | ||
| + | <td>Іван | ||
| + | <tr> | ||
| + | |||
| + | <td>2 | ||
| + | <td> Шевченко | ||
| + | <td>Тарас | ||
| + | |||
| + | <tr> | ||
| + | <td>3 | ||
| + | <td>Українка | ||
| + | <td> Леся | ||
| + | |||
| + | <tr> | ||
| + | <td>4 | ||
| + | <td>Загребельний | ||
| + | <td> Павло | ||
| + | |||
| + | <tr> | ||
| + | <td>5 | ||
| + | <td> Гончар | ||
| + | <td>Олесь<br> | ||
| + | </table> | ||
| + | |||
| + | <p style="font-size:14pt; color:blue;"> | ||
| + | |||
| + | А так виглядає сам HTML-код.</p> | ||
| + | |||
| + | |||
| + | <table align=center<br> bgcolor=#00FFFF <br>border=2<br> bordercolor=red <br>width=400<br>> <br> | ||
| + | <tr><br> | ||
| + | <td>№ <td>Прізвище <td>Ім'я | ||
| + | |||
| + | <tr><br> | ||
| + | <td>1 <td> Франко <td>Іван | ||
| + | |||
| + | <tr><br> | ||
| + | <td>2 <td> Шевченко <td>Тарас | ||
| + | |||
| + | <tr><br> | ||
| + | <td>3 <td>Українка <td> Леся | ||
| + | |||
| + | <tr><br> | ||
| + | <td>4 <td>Загребельний <td> Павло | ||
| + | |||
| + | <tr><br> | ||
| + | <td>5 <td> Гончар <td>Олесь | ||
| + | </table> | ||
| + | |||
| + | == Атрибути тега <tr> == | ||
| + | <b>align</b> - <br> | ||
| + | Вирівнювання таблиці відносно документа. Можливі значення: center, left, right, justify, char <br> | ||
| + | <b>bgcolor</b> -<br> | ||
| + | Визначає колір фону <u>рядка</u> таблиці <br> | ||
| + | <b>bordercolor</b> -<br> | ||
| + | Колір рамки <u>рядка</u> таблиці. Рамка відображається, коли встановлено атрибут border з ненульовим значенням у тега <table>. <br> | ||
| + | <b>valign</b> | ||
| + | Вирівнює текст у комірках рядка по вертикалі<br> | ||
| + | top - по верхньому краю <br> | ||
| + | middle - по центру <br> | ||
| + | bottom - по нижньому краю<br> | ||
| + | |||
| + | |||
| + | == Атрибути тега <td> == | ||
| + | <b>align</b> - <br> | ||
| + | Вирівнювання таблиці відносно документа. Можливі значення: <i>center, left, right, justify, char</i> <br> | ||
| + | <b>bgcolor</b> -<br> | ||
| + | Визначає колір фону <u>рядка</u> таблиці <br> | ||
| + | <b>bordercolor</b> -<br> | ||
| + | Колір рамки <u>рядка</u> таблиці. Рамка відображається, коли встановлено атрибут border з ненульовим значенням у тега <table>. <br> | ||
| + | <b>valign</b> | ||
| + | Вирівнює текст у комірках рядка по вертикалі<br> | ||
| + | <i>top</i> - по верхньому краю <br> | ||
| + | <i>middle</i> - по центру <br> | ||
| + | <i>bottom</i> - по нижньому краю<br> | ||
| + | |||
| + | <b>height</b> - <br> | ||
| + | Висота комірки. | ||
| + | |||
| + | <b>nowrap</b> - <br> | ||
| + | Забороняє перенесення рядків у комірці. | ||
| + | |||
| + | <b>width</b> -<br> | ||
| + | Ширина комірки. | ||
| + | |||
| + | == Завдання == | ||
| + | 1. Створіть HTML-сторінку за зразком поданим на Рис. 1 | ||
| + | [[Файл:Таблиця_27.png]] | ||
| + | |||
| + | 2. Створіть HTML-сторінку, що містить таблицю з розкладом уроків вашого класу за зразком поданим на Рис. 2 | ||
| + | |||
| + | [[Файл:Таблица_28.png]] | ||
Поточна версія на 22:01, 18 жовтня 2013
Зміст
Урок 4
Таблиці
Таблиці у Web-документах застосовуються не лише для розміщення табличних даних. Їх також використовують для вставки зображень і посилань, для компонування Web-сторінки тощо.
Теги
<table> обов'язковий парний йому </table> - створення таблиці
<tr> НЕобов'язковий парний йому </tr> - створення рядка таблиці
<td> НЕобов'язковий парний йому </td> - створення комірки таблиці у рядку
Приклад таблиці
| № | Прізвище | Ім'я |
| 1 | Франко | Іван |
| 2 | Шевченко | Тарас |
| 3 | Українка | Леся |
| 4 | Загребельний | Павло |
| 5 | Гончар | Олесь |
А так виглядає сам HTML-код.
<table>
<tr>
<td>№ <td>Прізвище <td>Ім'я
<tr>
<td>1 <td> Франко <td>Іван
<tr>
<td>2 <td> Шевченко <td>Тарас
<tr>
<td>3 <td>Українка <td> Леся
<tr>
<td>4 <td>Загребельний <td> Павло
<tr>
<td>5 <td> Гончар <td>Олесь
</table>
Атрибути тега <table>
align -
Вирівнювання таблиці відносно документа. Можливі значення: center, left, right
bgcolor -
Визначає колір фону в таблиці
border -
Товщина рамки в пікселях. Якщо атрибут не вказаний, то таблиця виводиться без видимої рамки
bordercolor -
Колір рамки таблиці
width -
Ширина таблиці в процентах (80%) або в пикселях (700)
Приклад застосування атрибутів тега <table>
| № | Прізвище | Ім'я |
| 1 | Франко | Іван |
| 2 | Шевченко | Тарас |
| 3 | Українка | Леся |
| 4 | Загребельний | Павло |
| 5 | Гончар | Олесь |
А так виглядає сам HTML-код.
<table align=center
bgcolor=#00FFFF
border=2
bordercolor=red
width=400
>
<tr>
<td>№ <td>Прізвище <td>Ім'я
<tr>
<td>1 <td> Франко <td>Іван
<tr>
<td>2 <td> Шевченко <td>Тарас
<tr>
<td>3 <td>Українка <td> Леся
<tr>
<td>4 <td>Загребельний <td> Павло
<tr>
<td>5 <td> Гончар <td>Олесь
</table>
Атрибути тега <tr>
align -
Вирівнювання таблиці відносно документа. Можливі значення: center, left, right, justify, char
bgcolor -
Визначає колір фону рядка таблиці
bordercolor -
Колір рамки рядка таблиці. Рамка відображається, коли встановлено атрибут border з ненульовим значенням у тега <table>.
valign
Вирівнює текст у комірках рядка по вертикалі
top - по верхньому краю
middle - по центру
bottom - по нижньому краю
Атрибути тега <td>
align -
Вирівнювання таблиці відносно документа. Можливі значення: center, left, right, justify, char
bgcolor -
Визначає колір фону рядка таблиці
bordercolor -
Колір рамки рядка таблиці. Рамка відображається, коли встановлено атрибут border з ненульовим значенням у тега <table>.
valign
Вирівнює текст у комірках рядка по вертикалі
top - по верхньому краю
middle - по центру
bottom - по нижньому краю
height -
Висота комірки.
nowrap -
Забороняє перенесення рядків у комірці.
width -
Ширина комірки.
Завдання
1. Створіть HTML-сторінку за зразком поданим на Рис. 1
2. Створіть HTML-сторінку, що містить таблицю з розкладом уроків вашого класу за зразком поданим на Рис. 2
