Створення таблиць
мовою розмітки гіпертексту HTML
Таблиця в html дозволяе розташовувати текст за зручними форматами розташуваня.
Для цього уся сторінка будується, як де-яка таблиця, в кожному рядку чи стовпчику якої розташовано потрібний об’єкт.
Основні теги:
1. Початок (кінець) створення таблиці: <table> . . . </table>
2. Початок (кінець) рядка таблиці: <tr> . . . </tr>
3. Початок, кінець стовпчика: <td> . . . </td>
4. Колір фону: <bgcolor=колір>
5. Висота таблиці: Height =пікселі або проценти
6. Ширина таблиці: Width= пікселі або проценти
7. Вирівнювання клітинки по горизонталі: Align=”параметр”
параметри: Center – по центру;
Left – по лівому краю;
Right – по правому краю;
8. Вирівнювання клітинки по вертикалі: Valign=”параметр”
параметри: Top – по верхньому краю;
Middle – по центру;
Bottom – по нижньому краю;
9. Об’єднання стовпчиків: Colspan=кількість
10. Об’єднання рядочків: Rowspan=кількість
11. Відстань між клітинками таблиці: Cellspacing=розмір
12. Розмір окантовки таблиці: border = розмір
13. Колір окантовки: bordercolor=колір
14. Заголовок до таблиці <th>Заголовок</th>
Приклад таблиці:
1. Створення таблицю за зразком:
Таблиця створюється по рядкам
<html> <body>
<table>
<tr>
<td> 1*1 </td>
<td> 1*2 </td>
<td> 1*3 </td>
</tr>
1*1 | 1*2 | 1*3 |
2*1 | 2*2 | 2*3 |
<tr>
<td> 2*1 </td>
<td> 2*2 </td>
<td> 2*3 </td>
</tr>
</table>
</body> </html>
2. Створити таблицю за зразком:
1*1 | 1*2 | 1*3 |
2*1 | 2*2 | |
3*1 | 3*2 |
<html>
<body>
<table border=5 bordercolor=gold cellspacing=5 width=100% height=80%>
<tr height=20%>
<td width=80% bgcolor=blue> 1*1 </td>
<td bgcolor=gold rowspan=2> 1*2 </td>
<td > 1*3 </td>
</tr>
<tr>
<td> <font color=pink>2*1 </td>
<td > 2*2 </td>
</tr>
<tr>
<td>3*1</td>
<td align=center colspan=2>
<p align=center>3*2</td>
</tr>
</table>
</body>
</html>
Завдання самоконтролю
1 | ||
2 | 4 | 6 |
3 | 5 |
Створити таблицю за вказаними параметрами, вирівняним елементи за зразком. 1 | 2 | 7 |
3 |
| |
4 | 5 |
1 | 3 | 4 |
2 | 5 | |
6 |
1 | ||
2 | 5 | 6 |
3 | 7 | |
4 |
Група І-41
| ||||
Прізвище | Предмет | |||
анг. | інф. | фіз.. | іст. | |
- З вказаними властивостями; З вказаними вирівнюваннями; Заповнити таблицю довільними записами; Колір сторінки сірий; Кожен головний рядок має свій колір; Тип шрифту курсив або жирний; Окантовка розміру 4, синього кольору; У першому рядку під написом розташувати малюнок; Розміри таблиці ширина 80%, а висота 70%; Після таблиці гіперпосилання «Далі», що переходить на сторінку Stor2.html.
Наші уроки | Інформатика – |
Алгебра – | |
Історія – | |
Назад |
6. Створити сторінку (Stor2.html).
o З вказаними властивостями;
o З вказаними вирівнюваннями;
o Заповнити таблицю записами про вказаний предмет;
o Колір сторінки рожевий;
o Кожен головний рядок має свій колір;
o Тип шрифту курсив або жирний;
o Відстань між клітинками =5;
o Розміри рядків таблиці в пікселях;
o Після таблиці гіперпосилання «Назад», що переходить на сторінку Stor1.html.
