Лабораторна робота №5
Створення таблиць
Таблиці є зручним і простим способом розділення частин сторінки на горизонтальні і вертикальні фрагменти, вирівняні між собою. Як і звичайних таблицях, частини можуть бути відокремлені або не відокремлені один від одного рамкою з вертикальних і горизонтальних ліній.
Таблиця цілком полягає в пару дужок
<TABLE>
</TABLE>
Вказівка закриваючої дужки для таблиці, як і для всіх її складових частин є дуже важливим. У разі незакритої таблиці одні бpаузеpы не відображають взагалі нічого, інші спотворюють документ до невпізнання.
Клітини (осередки) таблиці задаються в порядку горизонтальних рядів зліва направо.
Кожний горизонтальний ряд полягає в дужки
<TR>
</TR>
а кожний осередок усередині ряду в дужки
<TD>
</TD>
Пример1 Створення таблиці
<table border=1>
<tr><td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td></tr>
<tr><td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td></tr>
</table>
Осередок 1 |
Осередок 2 |
Осередок 3 |
Осередок 4 |
Осередок 5 |
Осередок 6 |
Результат:
В даному прикладі для завдання ширини ліній рамки вказаний атрибут BORDER. Число після ключового слова задає ширину рамки в пікселях. Значення BORDER=0 указує на відсутність ліній рамки.
У принципі висловленого достатньо для побудови таблиць. Проте в у багатьох випадках вимагається оформити таблицю з урахуванням специфічних вимог автора, тому розглянемо деякі можливості 'прикрашення' таблиць.
Для <TABLE> можна задати:
WIDTH=число або WIDTH=пpоцент%
Тут треба вказати бажану ширину таблиці в пікселях або відсотках від ширини вікна, причому в другому випадку ціле число супроводжується знаком %.
Аналогічно
HEIGTH=число або HEIGTH=пpоцент%
задає бажану висоту таблиці в пікселях або відсотках.
Таблицю можна вирівняти вліво, управо або по центру вікна шляхом вказівки відповідно
ALIGN=LEFT
ALIGN=RIGHT
ALIGN=CENTER
Для <TD> можна вказати властивості окремого осередку:
ALIGN=LEFT
ALIGN=RIGHT
ALIGN=CENTER
задає вирівнювання по горизонталі тексту усередині осередку вліво, управо або по центру відповідно.
VALIGN=TOP
VALIGN=BOTTOM
VALIGN=MIDDLE
задає вертикальне вирівнювання - по верхньому краю, по нижньому або посередині.
Обидва ці атрибута можуть бути вказані і в <TR>. В цьому випадку вони визначають вирівнювання для всіх осередків рядка, окрім тих, де вони ж задані явно.
Бажана висота і ширина осередку указуються за допомогою параметрів, аналогічних параметрам для таблиці:
WIDTH=число WIDTH=відсоток%
HEIGTH=число HEIGTH=відсоток%
Аналогічно кольору фону і фоновому малюнку для сторінки в цілому можна задати їх для елемента таблиці. Параметри ті ж:
BGCOLOR=цвет
BACKGROUND=каpтинка
Опис параметрів таблиці і їх властивостей описаний нижче.
Властивість |
Значення |
Опис |
Приклад |
align= |
Left Right Center |
Вирівнювання таблиці |
align=center |
background= |
URL |
Фоновий малюнок |
background=pic.gif |
bgcolor= |
#rrggbb |
Колір фону таблиці |
bgcolor=#FF9900 |
border= |
n |
Товщина рамки в пикселах |
border=2 |
bordercolor= |
#rrggbb |
Колір рамки |
border-color=#333333 |
bordercol-ordark= |
#rrggbb |
Тінь рамки |
bordercol-ordark=#fOfOfO |
cellpadding= |
n |
Відстань між осередком і її вмістом |
cellpadding=7 |
cellspacing= |
n |
Дистанція між осередками |
cellspacing=3 |
nowrap |
|
Забороняє перенесення рядків в тексті |
<table nowrap> |
frame= |
Void Above Below Lhs Rhs Hsides Vsides Box |
Завдання типу рамки таблиці |
frame=hsides |
valign= |
Top Bottom |
Вирівнювання по висоті |
valign=top |
width= |
n n% |
Мінімальна ширина таблиці, можна задавати в пікселях або відсотках |
width=90% |
height |
n n% |
Мінімальна висота таблиці, можна задавати в пікселях або відсотках |
height=18 |
Створення складної таблиці. Атрибут colspan=n об'єднує п осередків по горизонталі (по стовпцях) Атрибут rowspan=n об'єднує п осередків по вертикалі (по рядках) Атрибут valign="middle" вирівнює текст в осередку по центру осередку по вертикалі
Приклад 2 Складна таблиця.
<HTML>
<HEAD>
<ТIТLЕ>СЛОЖНАЯ ТАБЛИЦА</ТIТLЕ>
</HEAD>
<BODY>
<TABLE border="l" width="75%" align=center> <TR>
<TD width="66%" colspan="2">
<P align="center">
</TD >
</TR >
<TR >
<TD width="33%" rowspan="2" valign="middle" >
</TD >
<TD width="33%">
</TD>
</TR >
<TR>
<TD width="33%">
<P align="right"> </TD > </TR >
</TABLE > </BODY > </HTML >
В результаті виходить наступна таблиця:
Два осередки, з'єднані по горизонталі |
|
Два осередки, з'єднані по вертикалі |
по лівому краю |
по правому краю |
|
Завдання 1
Створити просту і складну таблицю.