Tabeller i Html

1. Introduktion

Här får du lära dig om hur man gör tabeller med Html. Jag börjar med det vanligaste och ökar sedan svårighetsgraden successivt. Avsnitt 2 och 3 handlar om det som ingår i Html 3.2 och avsnitten därefter behandlar element och attribut som är specifika för Html 4.01.

Du kan läsa mer om olika kodstandarder på sidan Från Sgml till Xhtml. Läs mer >

Kompletterande sidor om hur du styr tabellernas utseende med stilmallar hittar du på sektionen om dem. Gå dit >

2. Grundläggande tabellkommandon

Så här ser grundkoden för en tabell ut:

<TABLE>
<TR>
<TD>Aristoteles</TD>
<TD>Sokrates</TD>
<TD>Cicero</TD>
</TR>
<TR>
<TD>Platon</TD>
<TD>Epikuros</TD>
<TD>Protagoras</TD>
</TR>
</TABLE>

<TABLE> är det mest grundläggande elementet i en tabell. Avslutningen </TABLE> måste alltid finnas.

<TR> betyder "table row" (tabellrad) och specificerar en rad i tabellen.

<TD> betyder "table data", som fritt kan översättas med "tabellcell". Elementet används för att specificera en kolumn i tabellen.

<TR> innehåller alltid en eller flera <TD> och/eller <TH> (se nedan). Avslutningarna för rader respektive celler är </TR> och </TD>.

<TR> och </TR> omsluter alltid <TD>, <TH> och deras avslutningar, men aldrig tvärtom, d.v.s man kan skriva <TR><TD></TD></TR>, men aldrig <TD><TR></TR></TD>.

Tabellen ovan blir så här i webbläsaren:

Några attribut

Tabellcellerna anpassar sig efter sitt innehåll. Använder du korta ord, blir cellerna små, som i exemplet ovan. Skriver du längre meningar, blir cellerna större. Men för att få tabellen att se ut så som du vill, finns det ett antal hjälpmedel eller attribut, som du kan använda.

Ett attribut skrivs inne i ett startelement, t.ex inne i <TABLE>, men aldrig inne i </TABLE>. Man kan skriva i princip hur många attribut som helst och ordningen spelar inte heller någon roll. Det enda man måste tänka på är att alla attribut måste vara giltiga och inte får motsäga varandra. Man bör också undvika att skriva samma attribut flera gånger.

Varje attribut har ett värde, som skrivs innanför citationstecken. Man kan i Html utesluta citationstecknet, om man använder värden som skrivs enbart med bokstäverna a-z eller A-Z, och med siffrorna 0-9. Man kan alltså skriva width=3 i stället för width="3". Man måste använda citationstecken om man anger procentvärden, t.ex width="100%".

width

Attributet "width" använder man när man vill ha en viss bredd, antingen på hela tabellen eller på en kolumn. Om width skrivs inne i <TABLE> kommer tabellen att få en viss bredd. Skrivs det inne i <TD> kommer kolumnen att få en viss bredd. Däremot fungerar det dåligt inuti <TR>.

<TABLE width="100%"> gör att tabellen blir lika bred som webbläsarfönstret.

Eftersom cellerna anpassar höjden efter innehållet behöver man inte använda "height"-attributet, även om det skulle vara möjligt. Men det är lätt att göra fel: anger du ett width- och ett height-värde, blir utrymmet maximerat och då kanske texten inte får plats, vilket kan resultera i att tabellen/texten inte går att läsa.

Förutom procent kan man också ange ett värde i antal pixlar: om du vill göra en fast vänstermarginal på din sida, kan du skriva:

<TABLE width="100%">
<TD width="100">texten i vänstermarginalen</TD>
<TD>texten på resten av sidan</TD>
</TABLE>

Som blir:

Jag har gjort så på startsidan. Använd pixelvärden när du vill att cellerna skall ha en exakt bredd. Tänk på att du därmed riskerar att de med mindre skärmyta måste bläddra i sidled för att se hela din tabell.

Det finns ytterligare ett sätt att ange bredden på en tabellcell, nämligen med värdet "*" (=stjärna), men det jag säger här fungerar inte i alla webbläsare, framförallt de lite äldre:

<TD width="200">
<TD width="*">
<TD width="*">

Detta skapar tre kolumner, den vänstra 200 pixlar bred och de två andra delar på resten av skärmbredden.

<TD width="*">
<TD width="*">
<TD width="*">

är samma som om man skrivit "33%". Det blir lika breda kolumner och webbläsaren delar den sista procenten i tre lika stora delar.

Du kan också skriva:

<TD width="1*">
<TD width="6*">
<TD width="3*">

som innebär att vänstra kolumnen tilldelas en del av skärmbredden, mellersta kolumnen sex delar och högra kolumnen tre delar. Detta är samma som att skriva:

<TD width="10%">
<TD width="60%">
<TD width="30%">

align, valign

Attributet "align" betyder ungefär "justera i sidled" och har värdena left, center och right. "valign" kan översättas med "justera i höjdled" och har värdena top, middle och bottom.

Skriver man attributen inne i <TABLE> justeras hela tabellen. Skriver man dem inne i <TD> justeras innehållet i tabellcellen.

<TABLE align="left" valign="top">

Dessa värden är default i min webbläsare och justerar tabellen så att den ligger till vänster och i mitten.

<TD align="left" valign="middle">

Detta är grundinställningen för data inuti tabellcellerna, som alltså hamnar till vänster och i mitten. Eftersom andra kan ha andra inställningar bör man använda dessa båda attribut för att styra placeringen, i synnerhet om man lägger in bilder i cellerna och definitivt om man använder en tabell för hela sitt dokument.

Här är ett exempel:

<TABLE>
<TR>
<TD align="left" valign="top"></TD>
<TD align="center" valign="middle"></TD>
<TD align="right" valign="bottom"></TD>
</TR>
</TABLE>

som blir:

Om det inte fungerar så som jag sagt så betyder det att webbläsaren inte förstår kommandona. Då får man skriva på något annat sätt, tills resultatet blir som man tänkt.

colspan, rowspan

Attributet "colspan" använder man när man vill att en rad skall sträcka sig över flera kolumner. Antalet kolumner skriver du så här:

<TD colspan="3">, som betyder att kolumnen skall sträcka sig över tre kolumner på bredden. <TR colspan="3"> betyder att raden sträcker sig över tre kolumner.

"rowspan" fungerar på motsvarande sätt och skrivs: <TD rowspan="3">, vilket betyder att kolumnen sträcker sig över tre rader. <TR rowspan="3"> betyder att raden sträcker sig över tre rader.

Default är "1" för både colspan och rowspan. Värdet "0" betyder att kolumnen (och motsvarande för raden) skall sträcka sig över alla efterföljande rader, räknat från den där det skrivs:

<TABLE>
<TR>
<TD colspan="3" align="center">Välkända filosofer</TD>
</TR>
<TR>
<TD>Aristoteles</TD>
<TD>Sokrates</TD>
<TD>Cicero</TD>
</TR>
</TABLE>

som blir:

3. <TH> och <CAPTION>

<TH> kan fritt översättas med "tabellcellsrubrik" och <CAPTION> blir då "tabellrubrik". <TH> och <CAPTION> kan ha samma attribut som <TD>. <CAPTION> fungerar dessutom som en cell som sträcker sig längs hela tabellens bredd, men elementet måste skrivas direkt efter <TABLE> och får dessutom bara förekomma en gång i varje tabell.

<CAPTION align="top"> placerar rubriken överst och <CAPTION align="bottom"> placerar den underst i tabellen. Rubriken går också att justera i sidled med samma attribut. Elementet kan även kompletteras med attributet "summary".

Om du använder en lång rubrik bör du inte använda "nowrap" utan låta rubriken följa tabellen i stället. Men det blir oftast ganska snyggt om rubriken centreras. Här är ett litet exempel:

<TABLE>
<CAPTION align="center">Antal kaffekoppar per dag</CAPTION>
<TR>
<TH>Namn</TH>
<TH>Antal</TH>
<TH>Mjölk/socker?</TH>
</TR>
<TR>
<TD>Kalle</TD>
<TD>2</TD>
<TD>Mjölk, inget socker</TD>
</TR>
<TR>
<TD>Lisa</TD>
<TD>8</TD>
<TD>Nej</TD>
</TR>
<TR>
<TD>Lars</TD>
<TD colspan="2" align="center">Uppgift saknas</TD>
</TR>
</TABLE>

som ser ut så här:

Obs!
Innehållet i <CAPTION> i vissa webbläsare centreras i mitten av webbläsarfönstret, medan tabeller placeras normalt. Därför måste man alltid titta på resultatet i minst ett par webbläsare för att se att det ser ut som man tänkt.

nowrap

Använd attributet "nowrap" med försiktighet. Attributet förhindrar nämligen radbrytning inne i en cell. Du kan lätt skapa orimligt breda tabeller av misstag. Kan ibland vara användbart i rubriker:

<TH nowrap>Rubriktext</TH>

4. Några kommandon för layout

"Layout" är ett väldigt omfattande begrepp, som i websammanhang har kommit att betyda flera olika saker. Du kan läsa mer om det på mina sidor om webbdesign. Gå dit >

Jag har även skrivit om layout på mina sidor om Text, layout och tryck. Läs mer >

Med stylesheets - stilmallar - har man möjlighet att påverka layouten in i minsta detalj. Läs mer >

Här är några generella tips för att skapa en snygg layout med Html:

Avsluta alla element, t.ex </TD> efter <TD>. I den nya Html-standarden, som heter Xhtml, är detta ett måste. Utan avslutningarna kan tabellen se väldigt konstig ut.

En tom tabellcell kan fyllas med ett översatt mellanslag " &nbsp;" eller "&#160;" eller ett streck "-", annars kan tabellen få skev form eller krascha helt. Läs mer om hur man översätter tecken på min sida Konstiga tecken. Gå dit >

Använd inte tabeller för att skapa två spalter, åtminstone inte för längre textstycken. Den som sparar din fil som en textfil och har en omodern eller felaktigt inställd webbläsare, riskerar nämligen att tabellkolumnernas textrader vävs in i varandra, i stället för att visas separat.

Använd alltid <TABLE width="100%"> om du vill att tabellen skall sträcka sig över hela skärmbredden.

bgcolor

Detta attribut bestämmer bakgrundsfärgen i hela tabellen eller i en tabellcell. Skrivs:

<TABLE bgcolor="#färgkoden">

men fungerar även i <TR>, <TD> och <TH>.

Tips!
Om du använder färg i cellerna måste du tänka på att den skall harmonisera med textens färg. Använd därför bakgrundsfärg och textfärg som kontrasterar tydligt mot varandra, som här:

<TABLE>
<TR>
<TD bgcolor="#FFFF00">Aristoteles</TD>
<TD bgcolor="#00FFFF">Sokrates</TD>
<TD bgcolor="#00FF00">Cicero</TD>
</TR>
</TABLE>

som blir:

cellspacing, cellpadding

Både "cellspacing" och "cellpadding" skrivs inne i <TABLE>, t.ex så här:

<TABLE cellspacing="10" cellpadding="5" >
<TR>
<TD>Aristoteles</TD>
<TD>Sokrates</TD>
<TD>Cicero</TD>
</TR>
<TR>
<TD>Platon</TD>
<TD>Epikuros</TD>
<TD>Protagoras</TD>
</TR>
</TABLE>

som blir:

"cellspacing" anger hur tjock kanten skall vara runt cellerna och "cellpadding" anger hur långt avståndet skall vara mellan texten inne i tabellcellen och innerkanten på cellen. Man kan alltså skapa en hel del variation med dessa båda attribut.

Man kan också använda procentvärden. Värdet räknas då i procent av det tillgängliga utrymmet, d.v.s cellpadding="10%" ger en vänsterkant som är 5% av cellens utrymme och en högerkant som också är 5% av cellutrymmet. Samma sak för värden i toppen och botten av cellen. Det totala värdet delas alltså i två lika stora delar.

border

Border-attributet bestämmer både kanten på tabellen och kanterna runt varje tabellcell. Det skrivs inne i <TABLE>. Jag har använt border="1" i de flesta exemplen ovan för att förtydliga tabellernas gränser. Border="0" skall du använda om du inte vill ha kanter eller ramar runt tabellen. Den här tabellen har border="5":

Den här har border="50":

Med hjälp av border-attributet kan man alltså skapa en hel del fräcka effekter, eftersom kanten runt tabellen gör att den ser ut att ligga ovanför resten av dokumentet.

margin

Attributet margin används inte så mycket i Html-koden, men är desto vanligare då man använder stilmallar (formatmallar). Margin styr då marginalerna på en "box". Du kan läsa mer om detta på sidan om stilmallar. Läs mer >

Den som vill lägga en tabell längst upp på sin sida och inte vill ha en glipa mellan tabellkanten och fönsterkanten, måste söka sig lite utanför de gängse HTML-kommandona. Följande fyra attribut förflyttar tabellen så att den ligger tätt intill fönsterkanten. De går även att använda i andra sammanhang, när man vill mellanrummet mellan tabellen eller dess celler och någonting annat. Används med fördel ihop med border:

<TABLE border="0" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">

bordercolor

Det finns några olika sätt att färga kanterna på tabeller och celler. Kommandot fungerar i Html men inte i Xhtml:

<TABLE border="4">
<TR>
<TD bordercolor="#FF0000">Aristoteles</TD>
<TD bordercolor="#0000FF">Sokrates</TD>
<TD bordercolor="#00FF00">Cicero</TD>
</TR>
</TABLE>

Ger följande tabell:

5. Gruppering av rader

THEAD, TFOOT och TBODY är tre element som gör att man kan gruppera raderna i en tabell i olika sektioner. Detta är användbart om man har långa tabeller och vill att besökaren skall kunna orientera sig i tabellens innehåll.

THEAD skapar ett tabellhuvud med så många rader man vill. Tanken är att tabellhuvudet skall kunna skrivas ut först på skärmen medan webbläsaren tolkar den övriga datan. Tabellhuvudet skall också skrivas ut överst på varje sida när man printar ut tabellen på papper.

TFOOT måste komma efter THEAD för att tabellens fot skall hamna rätt. Sedan kommer tabellens innehåll som anges med TBODY. Det måste också finnas lika många kolumner i de tre avdelningarna i tabellen.

Det är också meningen att webbläsaren på något sätt skall markera gränserna mellan fot, kropp och huvud, t.ex med hjälp av tjockare linjer. Detta kan också styras med olika attribut (se nedan). Här är ett exempel på hur de olika elementen kan användas:

<TABLE>
<THEAD>
<TR><TD>Tabellens huvud</TD></TR>
</THEAD>

<TFOOT>
<TR><TD>Tabellens fot</TD></TR>
</TFOOT>

<TBODY>
<TR><TD>Första blockets första rad</TD></TR>
<TR><TD>Första blockets andra rad/TD></TR>
</TBODY>

<TBODY>
<TR><TD>Andra blockets första rad</TD></TR>
<TR><TD>Andra blockets andra rad</TD></TR>
</TR>
</TBODY>
</TABLE>

Så här ser tabellen ut:

Det skall sägas att webbläsarna inte alltid tolkar detta så som det är tänkt. I Xhtml-standarden har man också delvis gjort om styrningen av tabeller. Därför bör man kanske använda dessa funktioner med sparsamhet.

6. Gruppering av kolumner

På motsvarande sätt kan man gruppera kolumner. Man använder sig då av elementen COLGROUP och COL. COLGROUP bestämmer vilka kolumner som skall grupperas och COL definierar utseendet på varje sådan kolumn i gruppen. Här är ett exempel:

<TABLE>
<COLGROUP>
<COL width="20%">
<COL width="80%">
</COLGROUP>
<TR>
<TD>Första kolumngruppen, första kolumnen</TD>
<TD>Första kolumngruppen, andra kolumnen</TD>
</TR>

<TR>
<TD>Andra kolumngruppen, första kolumnen</TD>
<TD>Andra kolumngruppen, andra kolumnen</TD>
</TR>

<TR>
<TD>Ingen kolumngrupp, första kolumnen</TD>
<TD>Ingen kolumngrupp, andra kolumnen</TD>
</TR>
</TABLE>

Här har jag definierat två kolumngrupper, med 20 respektive 80 procents bredd. I webbläsaren blir det så här:

Vad gör du då om tabellen innehåller 40 kolumner, som skall vara lika breda och se likadana ut? Då finns det en genväg med attributet "span":

<TABLE>
<COLGROUP span="40" width="20"></COLGROUP>
<TR><TD>...
</TABLE>

Vill du veta mer om hur dessa kommandon fungerar bör du sätta dig in i den text som finns i Html- och Xhtml-standarderna. Där hittar du dessutom en hel del specialkommandon som kan användas för att styra innehållet i tabeller.

Du hittar standarderna på W3Cs hemsida: www.w3.org.