HTML – tabelite loomine

Written by adminevekj on 14. aug 2015. Posted in HTML

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

1 2
3 4

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

1 2
3 4
Fantastiline nelik

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

1 2
3 4

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.

1 2
3 4

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.

1 2
3 4

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

1 2
3 4

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
Need on veerud
Need on read 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>.

1 2
3 4

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>.

1 2
3 4

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>.

1 2
3 4

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>.

1 2
3 4

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