Tabeller: Lär dig hur man skapar tabeller - www.JavaScript.nu

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:

Starta med att skapa <TABLE> och </TABLE>.
Lägg till en TR för varje rad du ska ha. Detta ska ligga mellan <TABLE> och </TABLE>.
Lägg till en TD för varje kolumn du ska ha. Detta ska ligga mellan <TR> och </TR>.
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>.
Om du vill ha en ram runt hela tabellen, lägg till BORDER="1" i <TABLE>.
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 ]