Tabeleid läheb veebilehtedel ikka vaja - kas tahate mõnda lihtsat lehte kujundada või informatsiooni ülevaatlikult esitada - ikka on vaja luua veerge ja ridu. Vahel võib olla väike mõistatus kuidas ühendada ühes veerus ridu ja teises reas tulpasid või lisada raame ja värve.
Järgneva õpetuse idee on saadud lehelt www.cyberbits.com/, mis nüüdseks on suletud, aga tabelite loomise ja kujundamise õpetused elavad edasi...
Tabeli päised
Teeki <TH> kasutatakse tabeli päise loomiseks. TH teek on põhimõtteliselt sama, mis TD teek, ainult päise sisu kuvatakse rasvases kirjas ja joondatakse keskele.
| Paaritud arvud | Paarisarvud | | 1 | 2 | | 3 | 4 |
Tabeli loomise kood <TABLE BORDER=1>
<TR>
<TH>Paaritud arvud</TH>
<TH>Paarisarvud</TH>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
| Tabeli päised võivad olla nii tabeli ülareas kui vasakus servas.
| | Paaritud arvud | Paarisarvud | Need on
esimesed
neli
numbrit | 1 | 2 | | 3 | 4 |
Tabeli loomise kood
<TABLE BORDER=1>
<TR>
<TD></TD>
<TH>Paaritud arvud</TH>
<TH>Paarisarvud</TH>
</TR>
<TR>
<TH ROWSPAN=2>
Need on<BR>neli<BR>
esimest<BR>bumbrit</TH>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE> | |
Tabeli pealkirjad Tabeli pealkirjad asetsevad vaikimisi tabeli kohal. Pealkirjade loomiseks on teek <CAPTION></CAPTION>
Fantastiline nelik
Tabeli loomise kood <TABLE BORDER=1>
<CAPTION>Fantastiline nelik
</CAPTION>
<TR>
<TD>1</TD><TD>2</TD>
</TR>
<TR>
<TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
| Samas võib tabeli pealkiri asuda ka tabeli all. Sel juhul peab lisama <CAPTION> teegi atribuudile <ALIGN=> väärtuseks BOTTOM
Tabeli loomise kood <TABLE BORDER=1>
<CAPTION ALIGN=BOTTOM>
Fantastiline nelik </CAPTION>
<TR>
<TD>1</TD> <TD>2</TD>
</TR>
<TR>
<TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
| |
Tabeli raamid Tabeli näide
Tabeli loomise kood
<TABLE BORDER=1>
<TR>
<TD>1</TD><TD>2</TD>
</TR>
<TR>
<TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
| Siin on näide tabelist, mille raami paksus on 25 px.
Tabeli loomise kood <TABLE BORDER=25>
<TR>
<TD>1</TD> <TD>2</TD>
</TR>
<TR>
<TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
| Tabel võib olla ka ilma raamideta.
Tabeli loomise kood <TABLE BORDER=0
CELLPADDING=25>
<TR>
<TD>1</TD><TD>2</TD>
</TR>
<TR>
<TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
| Veel üks näide
Tabeli loomise kood <TABLE BORDER=10
CELLPADDING=25>
<TR>
<TD>1</TD> <TD>2</TD>
</TR>
<TR>
<TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
| |
Taustavärvid
Atribuuti <BGCOLOR> (taustavärv) kasutatakse teekidega <TABLE>, <TH>,<TR> ning <TD>. | | Paaritud arvud | Paaris arvud | Need on
neli esimest
numbrit | 1 | 2 | | 3 | 4 | <TABLE BORDER=1 BGCOLOR="Lime">
<TR>
<TD></TD>
<TH BGCOLOR="Aqua">Paaritud arvud</TH>
<TH BGCOLOR="Fuchsia">Paaris arvud</TH>
</TR>
<TR>
<TH ROWSPAN=2>
Need on <BR>neli <BR> esimest <BR> numbrit </TH>
<TD BGCOLOR="Aqua">1</TD>
<TD BGCOLOR="Fuchsia">2</TD>
</TR>
<TR BGCOLOR="Red">
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
| |
Read ja veerud- Veergudes (tulpades) jooksevad andmed ülevalt alla.
- Ridades jooksevad andmed vasakult paremale.
Näitlikustame ridu ja veerge | |  |  | Lahter | Lahter | Lahter | | Lahter | Lahter | Lahter | | Lahter | Lahter | Lahter | | Lahter | Lahter | Lahter | |
Veergude ühendamine Atribuuti <COLSPAN> kasutatakse teekide <TD> or <TH> ulatuses, et ühendada kahte või rohkemat veergu. | Esimesed neli numbrit | | 1 | 2 | | 3 | 4 |
Tabeli loomise kood <TABLE BORDER=1>
<TR>
<TH COLSPAN=2>
Esimesed neli numbrit</TH>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
|
Siin on veel üks näide
| 1 | 2 | | Esimesed neli numbrit | | 3 | 4 |
Tabeli loomise kood <TABLE BORDER=1>
<TR> <TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TH COLSPAN=2>
Esimesed neli numbrit</TH>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
| |
Ridade ühendamine Atribuuti <ROWSPAN> kasutatake teekide <TD> või <TH> ulatuses, et ühendada kahte või rohkemat rida.
Need on
esimesed
neli
numbrit | 1 | 2 | | 3 | 4 |
Tabeli loomise kood <TABLE BORDER=1>
<TR>
<TH ROWSPAN=2>
Need on <BR> esimesed
<BR> neli <BR> numbrit </TH>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
| Siin on veel üks näide
| 1 | Need on
neli
esimest
numbrit | 2 | | 3 | 4 |
Tabeli loomise kood <TABLE BORDER=1>
<TR>
<TD>1</TD>
<TD ROWSPAN=2>
Need on <BR> neli <BR>
esimest <BR> numbrit </TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
| |
Andmete ja lahtrite vaheline kaugus Lahtri sisu ja lahtri joone vahelist kaugust määratakse atribuudiga <CELLPADDING> teeki <TABLE>.
Tabeli loomise kood <TABLE BORDER=1 >
<TR>
<TD>1</TD><TD>2</TD>
</TR>
<TR>
<TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
| Sama tabel, ainult kasutatud atribuuti <CELLPADDING=25> teegis <TABLE>.
Tabeli loomise kood <TABLE BORDER=1 CELLPADDING=25>
<TR>
<TD>1</TD> <TD>2</TD>
</TR>
<TR>
<TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
| |
Lahtrite vaheline kaugus Lahtrite vahelist kaugust on võimalik määrata atribuudiga <CELLSPACING=> teegis <TABLE>.
Tabeli loomise kood <TABLE BORDER=1 >
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
| | Sama tabel, ainult kasutatud atribuuti <CELLSPACING=25> teegis <TABLE>.
Tabeli loomise kood <TABLE BORDER=1
CELLSPACING=25>
<TR>
<TD>1</TD> <TD>2</TD>
</TR>
<TR>
<TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
| |
Tabeli laius ja kõrgus Tabeli või lahtrite laiuse ja kõrguse määramiseks kasutatakse atribuute WIDTH= ja HEIGHT= Lisatakse teekidesse <TABLE> <TH> või <TD>.
| Paaritud numbrid | Paarisnumbrid | | 1 | 2 | | 3 | 4 |
Laiem tabel näeb välja selline
| Paaritud numbrid | Paarisnumbrid | | 1 | 2 | | 3 | 4 |
Tabeli loomise kood <TABLE BORDER=1 WIDTH=350 HEIGHT=110>
<TR>
<TH>Odd Numbers</TH>
<TH>Even Numbers</TH>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
| |
Tabeli joondus VALIGN=Top
ALIGN=Left | VALIGN=Top
ALIGN=Center | VALIGN=Top
ALIGN=Right | VALIGN=Middle
ALIGN=Left | VALIGN=Middle
ALIGN=Center | VALIGN=Middle
ALIGN=Right | VALIGN=Bottom
ALIGN=Left | VALIGN=Bottom
ALIGN=Center | VALIGN=Bottom
ALIGN=Right | |