Att skapa tabeller i en Internet web-sida

HTML kommandon för tabeller stöds ej av alla web-läsare. Om en web-läsare hittar ett kommando som den ej stödjer har den ingen funktion. Alla kommandon i den här beskrivningen stöds av Netscape Navigator 2.0. och de flesta av Microsoft Internet Explorer 2.0.

Beskrivningen är uppdelad i två delar. Följande del listar upp de kommando och deras attribut som används för att skapa tabeller. Nästföljande del visar ett antal exempel på tabeller och vilka kommando som används.

1. Tabellkommando
2. Tabellrad
3. Tabelldata
4. Tabellrubrik
5. Tabelltitel

Del 2: Exempel

1. En enkel tabell
2. En tabell med titel och rubriker
3. En tabell med bilder och länkar
4. En tabell med olika kolumnvidd och radhöjd
5. En tabell med olika bakgrundsfärger

En tabell skapas med <TABLE> kommandot.

<TABLE> ... </TABLE>

Detta är huvudkommandot för att skapa en tabell. Alla andra tabellkommandon måste stå innanför detta <TABLE> kommando.

<TABLE BORDER>

Som standard har en tabell ingen ram. För att sätta en ram runt tabellen tilläggs attributen BORDER. Även om ramen ej finns lämnas plats för den, dvs tabellen tar lika stor plats med eller utan ram.

<TABLE BORDER=värde>

Genom att tillåta BORDER attributen ha ett värde vinner man två saker. Först får man möjlighet att betona vissa tabeller före andra. En tabell med BORDER=4 som innehåller en tabell med BORDER=1 ser snyggare ut än om bägge hade samma värde på BORDER. För det andra kan man ta tillbaka den plats som reserverats för ramen om man använder BORDER=0 och får då mer kompakta tabeller.

<TABLE CELLSPACING=värde>

Detta specificerar den plats mellan enheterna i tabeller. Om ej angiven används CELLSPACING=2.

<TABLE CELLPADDING=värde>

Detta specificerar den plats mellan tabellen och dess rad. Om ej angiven används CELLPADDING=1. Används ett noll värde ser tabellen kanske fel ut eftersom innehållet och ramen går in i varandra.

<TABLE WIDTH=vidd>

Denna attribut används för att definera tabellens vidd, antingen i punkter eller som en procentsats av dokumentets vidd.

<TABLE HEIGHT=höjd>

Denna attribut används för att definera tabellens höjd, antingen i punkter eller som en procentsats av dokumentets höjd.

<TABLE BGCOLOR=färg>

BGCOLOR attributen används för att att ändra färgen på bakgrunden av hela tabellen. Färgen specificeras vanligtvis som ett RGB värde (t.ex. BGCOLOR=#FF0000) I vissa web-läsare som Microsofts InfoExplorer 3.0, kan färgnamn användas (t.ex BGCOLOR=RED). För att förenkla, har vi gjort en tabell med de mest användbara färgerna.

<TABLE ALIGN=LEFT el. ALIGN=RIGHT>

ALIGN attributen används för att placera tabellen horisontellt. ALIGN=LEFT placera tabellen till vänster. ALIGN=RIGHT placera tabellen till höger. Om ALIGN ej används, blir tabellen placerad till vänster.

<TABLE HSPACE="horisontalMagrinal">

HSPACE attributen anger avståndet mellan den vänstra och högra kanten av tabellen och allt utanför tabellen.

<TABLE VSPACE="vertikalMagrinal">

VSPACE attributen anger avståndet mellan den översta och understa kanten av tabellen och allt utanför tabellen.

En tabellrad skapas med <TR> kommandot.

<TR> ... </TR>

Antalet <TR> kommandon bestämmer antalet rader i tabellen.

<TR ALIGN=LEFT el. CENTER el. RIGHT>

Detta bestämmer textens horisontella placering i en tabellenhet. Det kan vara höger (ALIGN=RIGHT), vänster (ALIGN=LEFT) eller centrerad (ALIGN=CENTER). Detta gäller för alla tabellenheter i raden.

<TR VALIGN=TOP el. MIDDLE el. BOTTOM el. BASELINE>

Detta bestämmer textens vertikala placering i en tabellenhet. Det kan vara vid toppen (VALIGN=TOP), mitten (VALIGN=MIDDLE), botten (VALIGN=BOTTOM) eller på samma baslinje (VALIGN=BASELINE). Detta gäller för alla tabellenheter i raden.

<TR BGCOLOR=färg>

Har samma funktion som i <TABLE> kommandot, men bara för denna rad.

En tabelldata-enhet skapas med <TD> kommandot.

<TD> ... </TD>

Antalet <TD> kommandon bestämmer antalet enheter i en rad. Tabelldata-enheten måste finnas inom ett <TR> kommando. Om alla rader ej har samma antal enheter, blir de korta raderna utfyllda med tomma enheter. En tabellenhet kan innehålla de kommandon som annars finns i ett HTML dokument.

<TD ALIGN=LEFT el. CENTER el. RIGHT>
<TD VALIGN=TOP el. MIDDLE el. BOTTOM el. BASELINE>

Har samma funktion som i <TR> kommandot, men bara för denna enhet. Som standard blir tabelldata-enheterna placerade till vänster och i mitten.

<TD NOWRAP>

Enheten kan anpassas över flera rader för att innehållet ska få plats. Om detta är ej är önskvärt, kan NOWRAP attributen tilläggas.

<TD COLSPAN=kolumner>

Denna attribut bestämmer hur många kolumner enheten skall ta. Som standard tar varje enhet en kolumn.

<TD ROWSPAN=rader>

Denna attribut bestämmer hur många rader enheten skall ta. Som standard tar varje enhet en rad.

<TD WIDTH=värde>

Bestämmer enhetens vidd, antingen i punkter eller som en procentsats av tabellens vidd.

<TD HEIGHT=värde>

Bestämmer enhetens höjd i punkter. Internet Explorer (men ej Netscape) verkar tillåta höjden som en procentsats av fönstrets (inte tabellens) höjd.

<TD BGCOLOR=färg>

Har samma funktion som i <TR> kommandot, men bara för denna enhet.

En tabellrubrik-enhet skapas med <TH> kommandot.

<TH> ... </TH>

Detta kommando definierar en tabellrubrik-enhet. Tabellrubrik-enheter är identiska till tabelldata-enheter, med undantag för placering och typsnitt. Placeringen är centrerad (istället för vänster) och typsnittet är fet (istället för normal).

<TH ALIGN=LEFT el. CENTER el. RIGHT>
<TH VALIGN=TOP el. MIDDLE el. BOTTOM el. BASELINE>
<TH NOWRAP>
<TH COLSPAN=kolumner>
<TH ROWSPAN=rader>
<TH WIDTH=värde>
<TH HEIGHT=värde>
<TH BGCOLOR=färg>

Har samma funktion som i <TD> kommandot.

En tabelltitel skapas med <CAPTION> kommandot.

<CAPTION> ... </CAPTION>

Detta definierar tabellens titel. Kommandot måste vara innanför <TABLE> kommandot men får inte vara innanför ett <TR> kommando. Titeln placeras utanför själva tabellen, centrerad och precis ovanför. Om titeln är längre än tabellen, blir titeln uppdelad i flera rader.

<CAPTION ALIGN=TOP el. BOTTOM>

Vill man ej ha titeln placerad ovanför tabellen, används ALIGN= BOTTOMför att sätta den under tabellen.< /DD>< /DD>

Exempel

   <TABLE BORDER>
   <TR> <TD>Julstjärna</TD> <TD>Euphorbia pulcherrima</TD> </TR>
   <TR> <TD>Hortensia</TD> <TD>Hydrangea macrophylla</TD> </TR>
   <TR> <TD>Flitiga Lisa</TD> <TD>Impatiens walleriana</TD> </TR>
   </TABLE>

   <TABLE BORDER>
   <CAPTION ALIGN=TOP>April System Design AB</CAPTION>
   <TR><TH>Namn</TH><TH>Avdelning</TH><TH>Direkt Telefon</TH></TR>
   <TR><TD>Lars-Ola Jansson</TD><TD>Försäljning</TD><TD>08 / 50 90 6100</TD></TR>
   <TR><TD>Keith Barker</TD><TD>Utveckling</TD><TD>08 / 50 90 6121</TD></TR>
   <TR><TD>Björn Karlsson</TD><TD>Utveckling</TD><TD>08 / 50 90 6125</TD></TR>
   </TABLE>

   <center>
   <TABLE CELLPADDING=10>
   <CAPTION>Produkter från April System Design</CAPTION>
   <TR>
   <TD ALIGN=MIDDLE VALIGN=TOP  width=150">
   <a href="http://www.april.se/ii.html"><img src="ii_icon.gif" width=103 height=31></a><br>
   Internetanslutning för lokala nätverk.<br>
   </TD>
   <TD ALIGN=MIDDLE VALIGN=TOP width=150>
   <a href="http://www.april.se/f95.html"><img src="f95_icon.gif" width=103 height=31></a><br>
   PC till UNIX koppling via TCP/IP <br>
   </TD>
   </TR>
   <TR>
   <TD ALIGN=MIDDLE VALIGN=TOP width=150>
   <a href="http://www.april.se/anita.html"><img src="an_icon.gif" width=103 height=31></a><br>
   Terminalemulator för Windows. <br>
   </TD>
   <TD ALIGN=MIDDLE VALIGN=TOP width=150>
   <a href="http://www.april.se/xport.html"><img src="xp_icon.gif" width=103 height=31></a><br>
   NetBIOS Router för X.25, Asynkront och ISDN <br>
   </TD>
   </TR>
   </TABLE>
   </center>

Produkter från April System Design

Internetanslutning för lokala nätverk.	PC till UNIX koppling via TCP/IP
Terminalemulator för Windows.	NetBIOS Router för X.25, Asynkront och ISDN

    <TABLE BORDER=4>
    <CAPTION ALIGN=TOP>Krukväxter</CAPTION>
    <TR>
    <TH COLSPAN=2>Namn</TH>
    <TH ROWSPAN=2>Beskrivning</TH> 
    </TR>
    <TR>
    <TH>svenskt</TH>
    <TH>latinskt</TH> 
    </TR>
    <TR>
    <TD VALIGN=TOP>Flitiga Lisa</TD> 
    <TD VALIGN=TOP>Impatiens walleriana</TD>
    <TD>Flitiga Lisa gör skäl för sitt trevliga namn. Den blommar nästan 
    hela året och det är inte svårt att få nya fina exemplar av den - 
    sticklingar rotar sig lätt.</TD>
    </TR>
    <TR>
    <TD VALIGN=TOP>Gardenia</TD> 
    <TD VALIGN=TOP>Gardenia jasminoides</TD> 
    <TD>Gardenia är en krukväxt för den kunniga. Den tål inte kalk i
    jorden eller i vattnet. Den vill ha en jämn fuktighet både i 
    luften och i jorden. Men den som lyckas med den blir belönad -
    både blad och blommor är utsökt vackra och den har en underbar 
    doft.</TD>
    </TR>
    </TABLE>

    <TABLE BORDER=4 BGCOLOR=#FFFFFF>
    <CAPTION ALIGN=TOP>Krukväxter</CAPTION>
    <TR BGCOLOR=#CCECFF>
    <TH COLSPAN=2>Namn</TH>
    <TH ROWSPAN=2>Beskrivning</TH> 
    </TR>
    <TR BGCOLOR=#CCECFF>
    <TH>svenskt</TH>
    <TH>latinskt</TH> 
    </TR>
    <TR>
    <TD VALIGN=TOP BGCOLOR=#FFFF00>Flitiga Lisa</TD> 
    <TD VALIGN=TOP>Impatiens walleriana</TD>
    <TD>Flitiga Lisa gör skäl för sitt trevliga namn. Den blommar nästan 
    hela året och det är inte svårt att få nya fina exemplar av den - 
    sticklingar rotar sig lätt.</TD>
    </TR>
    <TR>
    <TD VALIGN=TOP BGCOLOR=#FFFF00>Gardenia</TD> 
    <TD VALIGN=TOP>Gardenia jasminoides</TD> 
    <TD>Gardenia är en krukväxt för den kunniga. Den tål inte kalk i
    jorden eller i vattnet. Den vill ha en jämn fuktighet både i 
    luften och i jorden. Men den som lyckas med den blir belönad -
    både blad och blommor är utsökt vackra och den har en underbar 
    doft.</TD>
    </TR>
    </TABLE>

Uppdaterad 19:e november 2000