Till Startsidan
JavaScript.nu / HTML-kurs / Tabeller

Tabeller 

I detta kapitel:
Tabeller
Lathund
F�rgad tabell
Storleken
Attribut
Test

Till att b�rja med vill jag informera om att tabeller till en b�rjan �r mycket komplicerade att g�ra. Explorer �r lite sn�llare �n Netscape i dessa sammanhang och visar din tabell �ven om du r�kat felkoda den. Netscape d�remot kr�ver att du kodar korrekt f�r att visa tabellen korrekt.

D�r du vill ha din tabell skriver du: 

<TABLE>
</TABLE>

Detta r�cker dock inte. F�r varje rad i tabellen m�ste du l�gga till en TR-tagg (Table Row = TabellRad) mellan raderna ovan: 

   <TR>
   </TR>

Antag att du vill ha tre rader (TR) i din tabell (TABLE), d� skriver du allts� 

<TABLE>
   <TR>
   </TR>

   <TR>
   </TR>

   <TR>
   </TR>
</TABLE>
F�r varje kolumn i tabellen m�ste du nu l�gga till en TD-tagg (Table Data = TabellData) mellan TR-taggarna: 
      <TD></TD>
Vill du nu ha fyra kolumner i din tabell, d� blir koden allts�: 
<TABLE>
   <TR>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
   </TR>

   <TR>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
   </TR>

   <TR>
      <TD></TD>
      <TD></TD>
      <TD></TD>
      <TD></TD>
   </TR>
</TABLE>
Mellan TD-taggen l�gger vi slutligen in v�r text. H�r visas hur koden ser ut d� och hur tabellen blir p� riktigt. F�r att du ska se varje rad och varje kolumn som rutor l�gger jag �ven till BORDER="1" i TABLE-taggen, vilket allts� ger hela tabellen en smal ram. Koden och resultatet blir nu: 
<TABLE BORDER="1">
   <TR>
      <TD>Rad 1, Kolumn 1</TD>
      <TD>Rad 1, Kolumn 2</TD>
      <TD>Rad 1, Kolumn 3</TD>
      <TD>Rad 1, Kolumn 4</TD>
   </TR>

   <TR>
      <TD>Rad 2, Kolumn 1</TD>
      <TD>Rad 2, Kolumn 2</TD>
      <TD>Rad 2, Kolumn 3</TD>
      <TD>Rad 2, Kolumn 4</TD>
   </TR>

   <TR>
      <TD>Rad 3, Kolumn 1</TD>
      <TD>Rad 3, Kolumn 2</TD>
      <TD>Rad 3, Kolumn 3</TD>
      <TD>Rad 3, Kolumn 4</TD>
   </TR>
</TABLE>
Tabellen blir d� s�h�r:
Rad 1, Kolumn 1 Rad 1, Kolumn 2 Rad 1, Kolumn 3 Rad 1, Kolumn 4
Rad 2, Kolumn 1 Rad 2, Kolumn 2 Rad 2, Kolumn 3 Rad 2, Kolumn 4
Rad 3, Kolumn 1 Rad 3, Kolumn 2 Rad 3, Kolumn 3 Rad 3, Kolumn 4

Notera att mellanslagen jag anv�nt i koden inte �r n�dv�ndiga utan endast har till funktion att f� koden mer �versk�dlig.
Listan nedan fungerar som en lathund f�r dig om du ska g�ra din egna tabell:
  1. Starta med att skapa <TABLE> och </TABLE>.
  2. L�gg till en TR f�r varje rad du ska ha. Detta ska ligga mellan <TABLE> och </TABLE>.
  3. L�gg till en TD f�r varje kolumn du ska ha. Detta ska ligga mellan <TR> och </TR>.
  4. L�gg till texten i varje kolumn (kolumnerna kan givetvis ocks� l�mnas tomma genom att inte skriva n�got i kolumnen). Detta ska ligga mellan <TD> och </TD>.
  5. Om du vill ha en ram runt hela tabellen, l�gg till BORDER="1" i <TABLE>.
  6. Klart, s� l�tt var det ;)
Du har nu l�rt dig tre taggar (TABLE, TR och TD) och ett attribut (BORDER) du kan ha i TABLE-taggen. Border skapar en ram runt din tabell.
N�gra andra attribut som kan vara bra att k�nna till �r BGCOLOR, BACKGROUND, WIDTH och HEIGHT. Med BGCOLOR och BACKGROUND best�ms bakgrundsf�rgen respektive bakgrundsbilden i tabellen. Exemplet nedan visar en tabell med tre rader och fem kolumner. Tabellen har en tre rader tjock ram runt sig och en bl� bakgrundsf�rg. En av raderna �r gr�n och tv� av kolumnerna �r r�da. En av cellerna har en bakgrundsbild som bakgrund. 
<TABLE BORDER=3 BGCOLOR="blue">
   <TR>
      <TD>Rad 1, Kolumn 1</TD>
      <TD>Rad 1, Kolumn 2</TD>
      <TD>Rad 1, Kolumn 3</TD>
      <TD BACKGROUND="bild.gif">Rad 1, Kolumn 4</TD>
      <TD>Rad 1, Kolumn 5</TD>
   </TR>

   <TR BGCOLOR="green">
      <TD>Rad 2, Kolumn 1</TD>
      <TD BGCOLOR="red">Rad 2, Kolumn 2</TD>
      <TD>Rad 2, Kolumn 3</TD>
      <TD>Rad 2, Kolumn 4</TD>
      <TD>Rad 2, Kolumn 5</TD>
   </TR>

   <TR>
      <TD>Rad 3, Kolumn 1</TD>
      <TD>Rad 3, Kolumn 2</TD>
      <TD BGCOLOR="red">Rad 3, Kolumn 3</TD>
      <TD>Rad 3, Kolumn 4</TD>
      <TD>Rad 3, Kolumn 5</TD>
   </TR>
</TABLE>
Koden ovan resulterar i tabellen nedan:
Rad 1, Kolumn 1 Rad 1, Kolumn 2 Rad 1, Kolumn 3 Rad 1, Kolumn 4 Rad 1, Kolumn 5
Rad 2, Kolumn 1 Rad 2, Kolumn 2 Rad 2, Kolumn 3 Rad 2, Kolumn 4 Rad 2, Kolumn 5
Rad 3, Kolumn 1 Rad 3, Kolumn 2 Rad 3, Kolumn 3 Rad 3, Kolumn 4 Rad 3, Kolumn 5

L�gg m�rke till att d� jag �ndrar f�rgen till bl�tt i TABLE-taggen blir allt mellan <TABLE> och </TABLE> bl�tt, dvs. hela tabellen blir bl�. D� jag �ndrar f�rgen p� en rad (TR) till gr�n blir alla kolumner i denna rad gr�na. D� jag �ndrar f�rgen p� en cell (TD) blir endast just den cellen f�rgad. Detta g�ller s�v�l om jag f�rgar cellen med en f�rg eller med en bild ("red" samt "bild.gif" i mitt fall).
Som jag tidigare n�mnde �r WIDTH och HEIGHT bland de viktigare attributen du beh�ver l�ra dig. Nedan visas hur en tabells storlek kan �ndras med WIDTH- och HEIGHT-attributen. V�rdena kan antingen vara heltalsv�rden (anges i pixlar) eller procentuella v�rden. L�gg m�rke till att jag i tabellkoderna nedan inte har varje rad (TR) och varje kolumn (TD) p� en ny rad. Jag har bara gjort en ny rad f�rst efter varje rad (</TR>). Detta �r givetvis lika korrekt som att ha radbyten efter varje kolumn. 

<TABLE BORDER="1">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1
2
3
4


<TABLE BORDER="1" HEIGHT="100%" WIDTH="200">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1
2
3
4


<TABLE BORDER="1" HEIGHT="600" WIDTH="75%">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

1
2
3
4


<TABLE BORDER="1" HEIGHT="10%" WIDTH="10%">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

1
2
3
4

Tabellen har som du nu vet tre taggar - <TABLE>, <TR> och <TD>. (egentligen 4, man kan n�mligen anv�nda <TH> (Table Header = TabellHuvud) ist�llet f�r <TD>).
I var och en av dessa kan ett flertal attribut placeras. Nedan ser du i vilken/vilka av taggarna dessa attribut kan placeras, vad de har f�r nytta samt v�rdet som kan skrivas i attributen.
M�nga av v�rdena som ska anges med ett tal klarar ocks� av att du skriver v�rdet i %.
V�rdet anger du d�r det st�r ... (t.ex. BORDER="..."). Att kunna alla attributen �r lite av en �verkurs.

Attribut  <TABLE>   <TR>   <TD>   Fungerar...  Funktion 
BORDER="..."
*
 
 
 
V�rdet �r kanternas tjocklek.
CELLSPACING="..."
*
 
 
 
Antalet bildpunkter mellan de enskilda cellerna.
CELLPADDING="..."
*
 
 
 
Antalet bildpunkter mellan kanterna av cellerna och dess inneh�ll.
WIDTH="..."
*
 
*
 
Bredden p� cellen/tabellen i bildpunkter.
ALIGN="..."
 
 
*
 
Horisontell justering. Ange: left, right eller center som v�rde.
VALIGN="..."
 
 
*
 
Vertikal justering. Ange: top, bottom, middle eller baseline som v�rde.
ROWSPAN="..."
 
 
*
 
En cell kan str�cka sig �ver flera rader, ange antalet rader som v�rde.
COLSPAN="..."
 
 
*
 
En cell kan str�cka sig �ver flera kolumner, ange antalet kolumner som v�rde.
NOWRAP
 
*
*
 
Om detta anges kommer texten INTE att brytas automatiskt
BACKGROUND="..."
*
*
*
*
V�rdet ska vara bildens namn som hamnar som bakgrund i tabellen, raden eller cellen.
BGCOLOR="..."
*
*
*
*
V�rdet ska vara f�rgens namn/RGBv�rde som hamnar som bakgrund i tabellen, raden eller cellen.
BORDERCOLOR="..."
*
*
*
*
Anger kantens f�rg.
BORDERCOLORLIGHT="..."
*
*
*
*
Anger kantens ljusa f�rg.
BORDERCOLORDARK="..."
*
*
*
*
Anger kantens m�rka f�rg.


Test
I slutet av varje kapitel i HTML-kursen finns n�gra fr�gor som du ska svara p� f�r att testa dina kunskaper inom HTML. Om du har f�tt alla r�tt s� �r det bara att g� vidare, fast har du haft n�got fel kan det kanske vara klokt att f�rs�ka lista ut vad som kan ha varit fel. Givetvis kan du g� vidare �ven om du inte svarar r�tt p� alla fr�gor.
Vilken av dessa taggar anv�nds f�r att skapa en tabell?
<TABEL>
<TABELL>
<TABLE>

Vilken tagg anv�nds f�r att skapa en rad i din tabell?
<TD>
<TR>
<TH>

I vilken tagg kan man inte anv�nda WIDTH-attributet?
<TD>
<TABLE>
<TR>

Som standard hamnar all text i en kolumn i mitten av kolumnen. Hur f�r man den att hamna l�ngst upp i kolumnen?
<TD ALIGN="top">
<TD VALIGN="top">
<TD TOP>

Vilket av f�ljande attributv�rden �r felaktiga?
ALIGN="right"
BACKGROUND="red"
WIDTH="50%"

Hur m�nga <TD> (eller <TH>) finns i koden f�r en tabell med tre rader och fyra kolumner?
3
4
12



Copyright © Omid Rouhani 1997-2022; Alla r�ttigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]