NinetNet    HTML    Tabeller   skriv ut  

Grunden

Tabeller skrivs in i HTML-koden mellan starttaggen <table> sluttaggen </table>. Tabellen är sedan uppbyggd av rader mellan <tr> och <tr> som i sin tur delas in i celler mellan <td> och <td>. Har du flera rader bildar cellerna under varandra en kolumn.

Du kan också ange rubrikceller med taggen <th>. Texten i en rubrikcell blir automatiskt centrerad och kommer att visas i fetstil.

Nedan ett exempel på kod till en enkel tabell som har tre rader och två kolumner. Överst i varje kolumn en rubrikcell:

 Till Toppen 

Border

Det är en vanlig missuppfattning att man inte kan använda attributet border om man kodar enligt strict standard. Men det stämmer inte alls! Faktum är att tabeller från början automatiskt visades med en kant.

Tabeller är ju till för att strukturera data och många gånger blir det mer överskådligt med en kantlinje runt om!

MEN!
En kantlinje går också bra att skapa med CSS och om du själv vill bestämma utseendet på kantlinjen är det CSS som gäller. Det är nämligen inte korrekt att använda attribut som anger kant-färg direkt i HTML-koden om man kodar strict!

Tabellens kant infogas med attributet "border" i tabellens start-tagg. Värdet blir kantens tjocklek i pixlar och visas i grått.

Så här:

Så här skulle det se ut:

 Till Toppen 

Cellpadding & Cellspacing

För att få lite "luft" runt innehållet i en tabell använder man attributet cellpadding. Här bestämmer man tomrummet mellan cellernas innehåll och cellkanten.

Med cellspacing bestäms mellanrummet mellan de olika cellerna i själva tabellen. De här attributen anges i tabellens start-tagg och mäts i pixlar.

Så här med värdet 5 pixlar:

Så här skulle det se ut - kantlinje 1 pixel:

OBS!
Standardvärdet för cellpadding och cellspacing är 1 respektive 2 pixlar - i de flesta webläsare. Alltså måste du ange värdet "0" för att slippa padding och spacing helt!

Observera också att dessa attribut inte behöver anges direkt i HTML-koden! Det går precis lika bra och är smidigare att ange padding i cellerna med CSS. Vill man ange eller ta bort cellspacing med CSS använder man egenskapen: border-spacing.

Tyvärr fungerar inte border-spacing i Internet Explorer 6. Och inte i version 7 heller! Så tills vidare får man nog hålla sig till HTML för att styra sina tabellers cellspacing...

Exempel 1

Så här skulle det se ut - kantlinje 1 pixel:

Exempel 2

Så här skulle det se ut - kantlinje 1 pixel:

Exempel 3

Så här skulle det se ut - kantlinje 1 pixel:

 Till Toppen 

Tabellens Bredd

Bredden på en tabell anges med attributet width. Om man inte anger bredden i en tabell kommer den att anpassas efter innehållets storlek.

Tabellens bredd kan anges med ett "fast" mått t.ex. pixlar eller i procent av skärmens storlek.

Så här skrivs bredden på tabellen i koden med bredden 70% eller 600 pixlar:

Observera att det inte är korrekt ange höjd på en tabell i HTML-koden - och inte att ange varken höjd eller bredd på tabell-celler heller!

•  Samtliga celler i en kolumn får automatiskt samma bredd.
•  Samtliga celler i en rad får automatiskt samma höjd.

Vill man styra höjden på en tabell eller höjd och bredd i tabell-celler ska man använda CSS.

 Till Toppen 

Kolumner & Rader

En cell kan sträcka sig över flera kolumner eller rader. Då använder man attributen colspan för kolumner och rowspan för rader.

Värdet anger man hur många rader respektive kolumner i tabell-cellen ska spänna över. Attributet skrivs in i cellens start-tagg: <td>

På sidan ser det ut så här:

 Till Toppen 

Justera innehållet i Cellerna

Man kan justera innehållet i en cell till höger och vänster genom att använda attributet align. Men du kan också justera innehållet vertikalt med attributet valign. Attributen anges i tabellcellens startagg: <td>.

Man FÅR använda attributet align och valign för just tabell-celler även om man kodar enligt strict standard.

MEN!
Samma sak går också att åstadkomma med CSS - vilket är mycket smidigare och i de flesta fall att föredra särskilt om man använder XHTML. Då används egenskaperna text-align och vertical-align.

Följande värden gäller i alla fall. Standard - default - är left och middle.

Exempel

Den här koden:

Blir så här - med höjd och bredd i cellerna för tydlighetens skull:

 Till Toppen 

Användarvänlig Tabell

För att en tabell som innehåller data ska bli så tillgänglig som möjligt för dem som inte kan se den måste man skriva till lite koder som gör att informationen i tabellen uppfattas på rätt sätt av olika skärmläsare.

En tabell tolkas alltid av en webbläsare: Från vänster till höger - rad för rad - cell efter cell. Så skulle också tabellen läsas av en skärmläsare med talsyntes - vilket kanske inte är optimalt...

Man ska vara noga med vilka celler som är att betrakta som rubriker. De ska helst skrivas mellan: <th> och </th> - även om <td> också fungerar.

Genom att märka upp den första rubrik-cellen i varje kolumn med: scope="col" och den första rubrik-cellen i varje rad med: scope="row" kan man få tabellen att uppfattas mer logiskt!

Med taggen <caption> ger man hela tabellen en rubrik och med attributet summary i tabellens start-tagg beskriver man själva innehållet!

Så här skulle koden kunna se ut:

<table summary="Tid och plats för vårens kurser">
<caption>Kurser vårterminen 2007</caption>
<tr>
<td>&nbsp;</td>
<th scope="col">Dag</th>
<th scope="col">Tid</th>
<th scope="col">Plats</th>
<th scope="col">Lärare</th>
</tr>
<tr>
<th scope="row">Matematik</th>
<td>Måndag</td>
<td>10.00 - 12.00</td>
<td>Sal 2</td>
<td>Kasper</td>
</tr>
<tr>
<th scope="row">Svenska</th>
<td>Tisdag</td>
<td>12.00 - 14.00</td>
<td>Sal 4</td>
<td>Jesper</td>
</tr>
<tr>
<th scope="row">Geografi</th>
<td>Torsdag</td>
<td>14.00 - 16.00</td>
<td>Sal 8</td>
<td>Jonatan</td>
</tr>
</table>

Blir så här - med teckensnittet Courier New och lite padding i cellerna:

Av en skärmläsare med talsyntes ska nu koden förhoppningsvis läsas ungefär så här:
Kurser vårterminen 2007, Tid och plats för vårens kurser, Matematik, Dag, Måndag, Tid, 10.00 - 12.00, Plats, Sal 2, Lärare, Kasper, Svenska, Dag, Tisdag, Tid, 12.00 - 14.00 o.s.v

Det är ju förstås mycket bättre än bara rakt av från vänster till höger!

Om en rubrikcell spänner över fler än en kolumn eller rad används: scope="colgroup" och scope="rowgroup" i stället.

Du känner kanke också igen taggarna: <thead> <tfoot> och <tbody>. De används inte så ofta eftersom de har dåligt stöd i alltför många webbläsare. Men med kommande versioner av XHTML kan det komma att förändras.

Dessa tre element är alltså helt valfria och det finns heller ingen riktig dokumentation över hur de underlättar för funktionshindrade.

Tanken med elementen är att innehållet i <tbody> ska kunna scrollas mellan innehållet i <thead> och <tfoot> vilket kan vara smidigt om tabellen är lång och innehåller mycket information. De flesta webläsare har alltså dåligt stöd för detta - men att ha attributen med gör heller ingen skada...

Så här skulle koden kunna se ut:

<table summary="Beskrivning av innehållet">
<caption>Rubrik</caption>
<thead>
<tr>
<th>Rubrik 1 i THEAD</th>
<th>Rubrik 2 i THEAD</th>
<th>Rubrik 3 i THEAD</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Cell 1 i TFOOT</td>
<td>Cell 2 i TFOOT</td>
<td>Cell 3 i TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1 i TBODY</td>
<td>Cell 2 i TBODY</td>
<td>Cell 3 i TBODY</td>
</tr>
</tbody>
</table>

Blir så här - med teckensnittet Courier New och lite padding i cellerna:

Läs mer om hur man gör sina sidor användarvänliga under rubriken:
LAYOUT & DESIGN / Användarvänlig Layout.

 Till Toppen 

Tabeller för Layout

Tabeller i HTML är ju till för att strukturera data/information. Men sedan kantlinjer gick att ta bort med attributet border="0" kunde man bygga sidans hela layout med tabeller.

Numer visas tabeller enligt standard utan kantlinjer i de flesta webbläsare - så border="0" är alltså ingenting man behöver ange!

Tabell-layouter är fortfarande det som är det vanligaste på webben - men vill man göra sin sida användarvänlig ska man skapa sin layout med CSS i en Extern Stilmall!

Att använda tabeller för att skapa sin sidas layout är inte bara en teknik som anses ålderdomlig - nu när alla webläsare kan tolka placering med CSS på ett bra sätt - det gör dessutom din sida mindre tillgänglig för sökmotor-robotar och besökare med funktionshinder. Samtidigt som sidan också blir segare och trögare att ladda för alla...

Undvik därför tabell-layouter så långt som det bara är möjligt. Om du ändå väljer att ta till en eller annan tabell för att strukturera din sidas innehåll ska strukturen vara så enkel som det bara är möjligt. Endast: <table>, <tr> och <td> - och försök undvika nästlade varianter!

Dessutom bör man ange att tabellen finns där endast för designens skull med attributet summary där värdet anges till design: summary="design" i tabellens start-tagg.

En tabell med endast en cell uppfattas i de flesta fall inte som någon tabell - vilket den ju på sätt och vis inte heller är... Av skärmläsare tolkas en sådan tabell oftast precis som om det vore en "box".

Så här kan koden till en enkel tabell-layout med Sidhuvud, Två kolumner och sidfot se ut:

<body>
<table summary="design" cellspacing="0">
<tr>
<td colspan="2">SIDHUVUD</td>
</tr>
<tr>
<td>KOLUMN 1</td><td>KOLUMN 2</td>
</tr>
<tr>
<td colspan="2">SIDFOT</td>
</tr>
</table>
</body>

Så här blir det - med en kantlinje på 1 pixel:

• Eeeh, va? Det där ser ju inte ut som nån sidlayout, direkt!
• Precis! Resten av layoutens egenskaper bör nämligen styras med CSS!

Obs!
Om du använder tabeller för layout ska du fortfarande strukturera sidan med HTML's korrekta taggar inuti cellerna för att bygga sidans innehåll. Som till exempel: <h1> - <h6>, <p>, <ul>, <ol>, <li> och <div>.

Layouten bör också vara logiskt uppbyggd. Av föregående avsnitt - som behandlar användarvänliga tabeller - framgår att en tabell alltid tolkas av en webbläsare:
Från vänster till höger - rad för rad - cell efter cell.

Därför bör en layout-tabell vara uppbyggd så att innehållet får ett logiskt sammanhang när tabellen läses på det sättet. Använd sunt förnuft och tänk dig in i hur innehållet kommer att tolkas av en textläsare eller skärmläsare med talsyntes.

Nämnas bör att det underlättar för text och skärmläsare om huvudinnehållet placeras så tidigt som möjligt på sidan. Bygger man sin sida med tabeller kan det alltså vara en bra idé att placera menyn i höger-kolumnen. Eller...

...infoga en tom cell före kolumnerna med innehållet och menyn. Sedan låter man kolumnen med innehållet sträcka sig över både den tomma cellen och meny-kolumnen - vilket placerar innehållet före menyn...

Så här:

<body>
<table summary="design" cellspacing="0">
<tr>
<td colspan="2">SIDHUVUD</td>
</tr>
<tr>
<td>&nbsp;</td><td rowspan="2">INNEHÅLL</td>
</tr>
<tr>
<td>MENY</td>
</tr>
<tr>
<td colspan="2">SIDFOT</td>
</tr>
</table>
</body>

Så här blir det - med en kantlinje på 1 pixel:

Att se till att innehållet hamnar tidigt på sidan är också bra när det gäller att optimera sidan för sökmotorer... Här slår du alltså två flugor i en smäll!

Nästlade tabeller

Man kan även använda sig av s.k. nästlade tabeller. Nästlade tabeller består av: Tabeller i tabeller. En helt ny tabell placeras då inuti en tabell-cell, alltså mellan <td> och </td> i den första tabellen.

På så sätt kan man dela in celler i ytterligare rader och kolumner och ange helt olika egenskaper för de olika tabellerna.

Obs!
Nästlade tabeller ställer förstås till det ännu mer för personer med funktionshinder! Om du är van att konstruera avancerade tabell-layouter ska du veta att det mesta du tidigare gjort med nästlade tabeller går att åstadkomma lika bra med boxar mellan <div> och </div> i cellerna i stället för nya tabeller.

 Till Toppen 

Vad är tillåtet och inte enligt standard?

När man validerar sin sida med programmet CSE HTML Validator Pro kan man få följande information om tabeller!

FELAKTIGHET: Följande attribut får inte användas med "table" elementet i ett strict HTML 4.0/4.01 dokument: "align", "bgcolor", "bordercolor", "bordercolorlight", "bordercolordark", "height", "hspace", and "vspace". I stället för "bgcolor" attributet, överväg att använda CSS egenskapen "background-color".

FELAKTIGHET: Följande attribut får inte användas med "td" elementet i ett strict HTML 4.0/4.01 dokument: "background", "bgcolor", "bordercolor", "bordercolorlight", "bordercolordark", "height", "nowrap", and "width".

FELAKTIGHET: Följande attribut får inte användas med "th" elementet i ett strict HTML 4.0/4.01 dokument: "background", "bgcolor", "bordercolor", "bordercolorlight", "bordercolordark", "height", "nowrap", and "width".

MEDDELANDE: Överväg att använda "width" attributet med "table" elementet. Det betraktas som god kodning och kan göra att tabellen och sidan laddas fortare. Notera att det inte är ett nedvärderat attribut i HTML 4.01 eller XHTML 1.0. Det är även ett giltigt XHTML 1.1 attribut.

OBS!
Även om de felaktiga attributen ovan faktiskt är tillåtna när man kodar enligt standarden transitional så avråder jag bestämt från att använda dem!

Dessa element är "nedvärderade" (deprecated) i HTML 4 och är bara tillåtna som övergång (transition) till HTML 4.01 Strict. De representerar alltså inte god kodning.

Läs mer om validering här: Doctype & Validering

 Till Toppen 

Avslutningsvis...

KOLUMNER OCH RADER

Alltså: Alla celler i en kolumn är lika breda! Alla celler i en rad är lika höga! Annars skulle det ju inte bli någon tabell utan bara en massa rutor hullerombuller.

BREDDEN på en kolumn bestäms av den bredaste cellen i kolumnen. På samma sätt som HÖJDEN på en rad bestäms av den högsta cellen i raden....

Enda sättet att ändra på detta är att SLÅ IHOP celler med "colspan" och "rowspan". Se Kolumner & Rader ovan!

TOMMA TABELL-CELLER

Om du lämnar en tabellcell tom finns risken att den brakar ihop. Infoga därför alltid ett osynligt mellanslag: &nbsp; eller en tom kommentar: <!-- --> om du inte vill ha något synligt innehåll.

SLUT-TAGGAR

Det är bra att placera sluttaggen </td> på samma rad som det sista innehållet i cellen. Annars kan radbrytningen visas som ett tomrum på sidan i en del webläsare.

Du får inte heller slarva med slut-taggarna, till exempel: </td> </tr> och </table>. De flesta webläsare är mycket noggrannare med koden än Internet Explorer och en glömd sluttagg kan resultera i att tabellen inte visas.

STILMALL

Med den här "stilmallen" kan du styra textens utseende för alla tabeller på en sida... Stilmallen skrivs in mellan <head> och </head>. Ändra teckensnitt, storlek och färg efter eget tycke och smak, men akta mellanslagen och semi-kolona...

Här kan du läsa mer om CSS - Stilmallar på NinetNet.