Tabeller

Introduktion, TABLE, CAPTION, TR, TH/TD, COL, COLGROUP, THEAD, TFOOT, TBODY, Exempel

Tabeller introducerades i HTML för att kunna presentera tabulära data. Innan dess strukturerades "tabeller" som preformaterad text, dvs som innehåll av elementet PRE, som skrivs mellan <PRE> och </PRE>.

Preformaterad text betyder att allt innehåll, inklusive mellanslag och tabbar, visas precis på samma sätt som det skrivs. På så sätt kan kolumner och rader presenteras på ett visuellt sätt, t ex:

   
Länder    Städer   
Sverige   Stockholm   
England   London

Från allra första början blev tabeller mycket populära -- man upptäckte deras layoutegenskaper. HTML koncentrerar sig på dokumentens struktur och inte på dess presentation och därför är möjlig-heterna till en specifik layout begränsade. Presentationen lämnade man åt Style Sheets (stilmallar). Tyvärr dröjde det tills nyligen innan våra populära www--klienter började ge stöd åt stilmallar. I brist på annat började man använda tabeller för att formatera sina dokument och inte, som det var tänkt, för att presentera tabulära data.

Om du använder tabeller för att ge dokumenten en viss layout (HTML 3.2) bör du inte inkludera hela innehållet i en enda tabell utan skapa ett antal mindre. De flesta www-klienter visar inte tabellens innehåll förrän den sista raden har laddats. Är tabellen stor kan det dröja en lång stund innan innehållet visas. Finns det även bilder kan laddningstiden vara mycket lång och under tiden ser besökaren bara en tom skärm.

HTML 4.0 (http://www.w3.org/TR/WD-html40/struct/tables.html) åtskiljer struktur från presenta-tion och därför är användningen av tabeller i layoutsyfte inte längre tillåtet då en sådan strukturering kan orsaka tolkningsproblem i icke visuella www-klienter, t ex sådana som används i taldatorer. Layouten av tabeller (såsom alla andra element) återlämnas helt och hållet åt stilmallar. Under den närmaste övergångsperioden kan du dock använda HTML 4.0 Transitional som fortfarande tillåter alla stilistiska element och attribut.

Då ett exempel alltid underlättar förståelse för något koncept börjar jag med ett sådant. Strax under exemplet förklarar jag vad vart och ett av dessa markord betyder.

<TABLE></TABLE>

Tabell
Markerar när en tabell börjar och när den slutar.

<CAPTION></CAPTION>

Tabellens namn - "etikett"
Tabellen ovan skulle man kunna namnge "Tabell 1" eller "Länder och deras huvudstäder". Om en tabell namnges skrivs denna information mellan <CAPTION> och </CAPTION>.

<TR></TR>

Table row - tabellrad
Markerar början och slut på tabellens rader. Det finns lika många rader i en tabell som det finns TR-element. Varje rad måste innehålla minst en cell (TH eller TD).

<TH></TH> och <TD></TD>

Table heading - tabellrubrik (kolumnrubrik)
Table data - tabelldata (datacell) Elementen används för att skapa tabellens celler. <TH> använder du för rubriker och <TD> för vanliga data.

I exemplet ovan har tabellen tre rader (tre TR-element) med två celler på varje rad. Dessa celler skapar även kolumner. Första raden (TR) innehåller två rubriker (TH) och andra samt tredje innehåller två dataceller (TD) på varje rad. OBS! Du får inte ha både TH och TD på samma rad.

Förutom vanlig text kan både TH och TD innehålla andra element, t ex stycken, listor, bilder och även andra tabeller. Att inkludera en tabell i en annan kallas för nästning. Man säger att man nästar en tabell i en annan.

Valfria sluttaggar

De flesta element avslutas med en sluttag, t ex </TR>, </TH> eller </TD>. Det finns dock ett antal element vars sluttaggar inte är obligatoriska då elementens slut kan underförstås när ett nytt element öppnas eller förälderelement, t ex TABLE, stängs.

Tre sådana element vars sluttaggar är valfria är just </TR>, </TH> och </TD>. Varje gång du börjar en ny rad, rubrik eller datacell (<TR>, <TH> eller <TD>) är det underförstått att den föregående är avslutad. </TABLE> avslutar hela tabellen.

Ur HTMLs perspektiv är ovanstående likvärdigt och bör tolkas på samma sätt. Tyvärr gör inte alla www-klienter det. Därför kan det vara praktiskt att använda dessa sluttaggar även om de är valfria. Några populära www-klienter har ibland problem (buggar) med att tolka tabeller när sluttaggarna utesluts och kan presentera innehållet med icke-önskvärda mellanrum eller tomma rader. Använder du stilmallar till att formatera dina dokument bör du alltid stänga varje element och på så sätt omöjliggöra att den stil som deklareras ett element inte ärvs av det efterkommande.

Tabeller i www-klienter utan tabellsupport

Då fortfarande äldre www--klienter används som inte stödjer tabeller kommer Tabell 1 i exemplet ovan att se ut så här i dem:

Tabell 1, Länder, Städer, Sverige, Stockholm, England, London

(Vissa webb-designers inkluderar en tabell i elementet PRE i förhoppning om att den visas som förformaterad text i www-klienter utan tabellsupport, dvs att texten behåller sin rad- och kolumn-position. Observera att en sådan konstruktion är syntaxfel. PRE kan inte innehålla elementet TABLE.)

Normalt ignoreras ett element om det inte får stöd av en viss www-klient. Eventuellt innehåll visas däremot på skärmen. För att få lite ordning på tabellens innehåll i sådana klienter avslutar man varje rad med en <BR> som står för break row (bryt rad / radens slut) och som gör att innehållet i varje TR visas på en egen rad och inte i en enda följd. OBS! <BR> skrivs före radens alla sluttaggar.

Elementet TABLE Nästa

Upp | HTML-referensbok | Referensböcker