3.5.3 Робота з таблицями в html
Елемент TABLE забезпечує створення таблиць. Потрібно вказувати початковий і кінцевий теги. Кожна таблиця починається з необов'язкового тегу <CAPTION>, за яким ідуть один або кілька елементів <TR>, що формують рядки таблиці. Кожен рядок має одну або кілька комірок, що задаються елементами <TH> або < TD>.
Елемент <TABLE> може мати атрибути:
HEIGHT = n (%) – висота таблиці в пікселах (відсотках щодо вікна);
WIDTH = m (%) – ширина таблиці в пікселах (відсотках щодо вікна);
BORDER = n – розмір ліній сітки (n – натуральне число);
CELLSPACING = n – відстань між комірками (n–натуральне число);
CELLPADDING = n – відстань вмісту (тексту, графіки тощо) комірки від її границь (n – натуральне число);
BGCOLOR = color – установлює кольори фону таблиці;
BORDERCOLOR=color – установлює кольори рамки таблиці.
Кожна таблиця складається з рядків і стовпців. Рядок задається парою тегів <TR> … </TR>. Стовпець –<TD>…</TD>.
Наприклад, проілюструємо дії команд <TABLE>, <TR>, <TD> (рис.24).
<TABLE BORDER=1>
<TR>
<TD> Рядок1.
Стовпець1</TD>
<TD>Рядок1.
Стовпець2. </TD>
</TR>
<TR>
<TD>Рядок2.
Стовпець1</TD>
<TD>Рядок2.
Стовпець2</TD>
</TR>
</TABLE>
Рисунок 24 – Проста таблиця
Проілюструємо дію атрибутів <CELLSPACING>=10 й <CELLPADDING>=0 команди <BODY> (рис. 25).
<TABLE
BORDER=1 CELLSPACING=10
CELLPADDING
=
0>
<TR>
<TD>Рядок 1.
Стовпець 1</TD>
<TD>Рядок 1.
Стовпець 2 </TD>
</TR>
<TR>
<TD>Рядок 2.
Стовпець 1</TD>
<TD>Рядок 2.
Стовпець 2</TD>
</TR>
</TABLE>
Рисунок 25
Наприклад, проілюструємо дію атрибутів <CELLSPACING>=3 й <CELLPADDING>=10 команди <BODY> (рис. 26).
<TABLE
BORDER=1 CELLSPACING=3
CELLPADDING
= 10>
<TR>
<TD>Рядок 1.
Стовпець 1.</TD><TD>Рядок 1. Стовпець
2</TD>
</TR>
<TR><TD>Рядок
2. Стовпець 1.</TD><TD>Рядок 2. Стовпець
2</TD>
</TR>
</TABLE>
Рисунок 26
Кожен стовпець може мати заголовок, що задається необов'язковим тегом <TH>…</TH>.
Проілюструємо дії команд <CAPTION> та <TH> (рис.27).
<TABLE BORDER=1>
<CAPTION>Заголовок
таблиці</CAPTION>
<TH>Заголовок
1</TH><TH>Заголовок
2</TH>
<TR>
<TD>Рядок 1.
Стовпець 1.</TD>
<TD>Рядок 1.
Стовпець 2.</TD>
</TR>
<TR>
<TD>Рядок 2.
Стовпець 1.</TD>
<TD>Рядок
2.Стовпець 2.</TD>
</TR>
</TABLE>
Рисунок 27 – Дії команд <CAPTION> та <TH>
Теги рядків <TR> і стовпців <TD> можна використовувати в сполученні з такими атрибутами:
ALIGN = LEFT | RIGHT | CENTER вирівнювання вмісту по горизонталі.
Valign – вирівнювання вмісту:
=TOP – по вертикалі;
=MIDDLE – по верху;
=BOTTOM – по низу.
BGCOLOR=color – заливання кольорами;
COLSPAN=n – зробити комірку шириною в n стовпців;
ROWSPAN=m – зробити комірку висотою в m рядків.
Наприклад, проілюструємо дії атрибута BGCOLOR команди <TD>.
<TABLE BORDER=0
CELLSPACING=0>
<CAPTION>Протилежності</CAPTION>
<TR>
<TD BGCOLOR=FFCCFF>
Так</TD>
<TD BGCOLOR=CCFFCC>
Ні </TD>
</TR>
<TR>
<TD BGCOLOR=FFCCFF>
Гарячий </TD>
<TD BGCOLOR=CCFFCC>
Холодний </TD>
</TR>
<TR>
<TD BGCOLOR=FFCCFF>
М'який </TD>
<TD BGCOLOR=CCFFCC>
Твердий </TD>
</TR>
<TR>
<TD BGCOLOR=FFCCFF>
Добрий </TD>
<TD BGCOLOR=CCFFCC>
Злий </TD>
</TR>
</TABLE>