HTML © Eva von Pepel

* [ HTML-referensbok ] * [ Referensböcker ] *

Tabeller

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

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

Markeras: <TH></TH> - starttagg obligatorisk, sluttagg valfri
<TD></TD> - starttagg obligatorisk, sluttagg valfri

Får innehålla: blockelement, inlineelement

Får finnas i: TR

TH (table heading) skapar rubrikceller medan TD (table data) skapar "vanliga" dataceller. Du skriver alla data mellan start- och sluttaggarna för de två elementen. Det spelar ingen roll <TR> följs av <TH> eller <TD> om på en specifik rad men en och bara en elementtyp måste följa. Du kan inte ha både <TH> och <TD> på samma rad. Antingen det ena eller det andra.

Du kan ha ett obegränsat antal element TH (eller TD) på en rad men tänk på att ju fler kolumner/celler som används desto längre blir raden. Om en rad är för lång måste man skrolla efter den och det gör inte någon användare speciellt glad.

<TH> använder du när du vill rubricera kolumner. Rubriker kan förekomma på en valfri rad och inte bara den första.Texten som skrivs här visas normalt i fet stil och centrerad.

<TD> använder du för vanliga data. Reglerna är desamma som för <TH> men texten är vänsterställd och visas i normal stil. Förutom vanlig text kan både TH och TD innehålla andra element, t ex stycken, listor, bilder och även andra tabeller. Sådana tabeller kallas för nästlagda tabeller.

Tomma celler

En tom cell, dvs en cell utan något innehåll, ramas inte in och kan dessutom kollapsa. HTML 3.2 tillåter inga tomma celler. HTML 4.0 däremot gör det. Om du av någon anledning inte vill ha data i en av cellerna måste du (HTML 3.2) eller bör (HTML 4.0) fylla den med något som skapar någon form av innehåll men ändå är osynligt, t ex

<TD>&nbsp;</TD> (non breaking space)
<TD>&#160;</TD> (samma som ovan)

Många använder en tom kolumn för att skapa en vänstermarginal, t ex:

<TABLE>
<TR><TD WIDTH=100> </TD><TD>cellens/tabellens innehåll</TD></TR>
</TABLE>

Då fasta mått bör undvikas och HTML 3.2 inte tillåter procentsatsen samtidigt som www-klienter kan "fuska" med cellernas bredd använd följande konstruktion istället:

<TABLE WIDTH="90%" ALIGN=RIGHT>
...
</TABLE>

Fonter i cellerna

Om du vill ändra fonter i cellerna måste du ändra fonter i varje cell. Det är otillåtet att ha en tabell inuti elementet FONT (T), STRONG eller andra inlineelement. HTML är ett logiskt språk och oftast är det lätt att intuitivt gissa om ett element får innehålla ett annat. Det är uppenbart att en tabell innehåller fonter (bokstäver) däremot är det omöjligt för en font (bokstav/tecken) att innehålla en tabell.

Fel:Rätt:
<STRONG>
<TABLE>
<TR><TD>data</TD></TR>
<TR><TD>data</TD></TR>
</TABLE>
</STRONG>
<TABLE>
<TR><TD><STRONG>data</STRONG></TD></TR>
<TR><TD><STRONG>data</STRONG></TD></TR>
</TABLE>

Du kan även använda elementet BASEFONT (T) om du vill ändra dokumentets fonter. BASEFONT tar tre attribut: SIZE, COLOR och FACE. OBS! HTML 3.2 ger endast stöd för SIZE. Elementet saknar sluttag och skrivs direkt efter BODY om det ska gäller i hela dokumentet, t ex:

<BODY><BASEFONT SIZE="-1">
...
</BODY>

Elementet BASEFONT ska ändra fonter i hela dokumentet inklusive tabeller. Tyvärr gör inte alla www-klienter det. De ändrar fonterna i hela dokumentet förutom just i tabellerna. Om du vill ändra fonter i cellerna ska du därför använda elementet FONT som beskrivs ovan eller använda stilmallar som gör hela proceduren mycket enklare. Observera att elementen FONT och BASEFONT endast är tillåtet i HTML 3.2 och 4.0 Transitional. Vill du ändra fonter i HTML 4.0 skall du använda stilmallar.

Formatering med stilmallar

Att formatera varje tabellcell med s.k. stilistiska element som FONT eller STRONG kan vara tidskrävande. Därför är stilmallar den absolut bästa metoden att "stajla" tabellceller med.

Skapa en fil och namnge den, t ex stil.css. I filen skriver du:

TD {font-weight: bold}

om du vill visa cellernas innehåll i fetstil, eller t ex:

TD {font: bold 80% Arial; color: white; background: black}

om du vill visa cellernas innehåll enligt följande 1) fetstil, 2) fontstorlek lika med 80% av föräldraelements fontstorlek, 3) typsnitt Arial, 4) vita bokstäver på 5) svart bakgrund.

Nu kommer varje förekomst av elementet TD att visas enligt den deklarerade stilen.

P.g.a. buggar i Netscapes implementering av tabeller ärver inte cellerna färälderelementet och därför bör du deklarera den önskade stilen det berörda elementet och inte TABLE.

Länka filen med dina HTML-dokument - filen kan länkas med ett obegränsat antal dokument med hjälp av elementet LINK.

<HEAD>
<TITLE>Dokumentets titel</TITLE>
<LINK REL=STYLESHEET HREF="stil.css" TYPE="text/css">
</HEAD>

Stilmallen kan även bäddas in i själva dokumentet. I sådana fall gäller stilen bara det dokument i vilket den bäddas.

<HEAD>
<TITLE>Dokumentets titel</TITLE>
<STYLE>
<!--
TD {font: bold 80% Arial; color: white; background: black}
-->
</STYLE>
</HEAD>

OBS! Stilinformationen skrivs som en kommentar för att dölja den i de www-klienter som inte stödjer stilmallar.

Stilinformationen kan även skrivas direkt i taggen:

<TABLE STYLE="font: bold 80% Arial; color: white; background: black">

Attribut

HTML 4.0HTML 4.0 TransitionalHTML 3.2
%attrs; 
ABBR=%Text
AXIS=Cdata 
ALIGN=left|center|
  right|justify|char 
CHAR=tecken 
CHAROFF=%Length 
VALIGN=top|middle|
  bottom|baseline
HEADERS=IDREFS 
SCOPE=row|col|
  rowgroup|colgroup 
ROWSPAN=Number 
COLSPAN=number 
 
Samma som i 
HTML 4.0   plus 

NOWRAP=nowrap 
BGCOLOR=%Color 
WIDTH=%Pixels 
HEIGHT=%Pixels 
ALIGN=left|
 center|right 
VALIGN=top|
 middle|bottom 
WIDTH=pixlar 
HEIGHT=pixlar 
ROWSPAN=Number 
COLSPAN=Number 
NOWRAP=nowrap

%attrs;

Beskrivs i HTML 4.0 - Attribut

ALIGN

Horisontell placering av cellens innehåll

Med detta attribut kan du placera individuella cellers innehåll horisontellt. Vill du ha samma placering i varje cell som finns på den aktuella raden använder du detta attribut tillsammans med TR. Om du har redan tilldelat TR attributet ALIGN kan du överskrida dess värde med det värde som du anger i TD/TH. Tillåtna värden är:

Tillåtna värden är:

HTML 3.2 - LEFT | CENTER | RIGHT
HTML 4.0 - LEFT | CENTER | RIGHT | JUSTIFY | CHAR

Om attributet inte specificeras gäller standardvärden som är CENTER för TH och LEFT (vänster) för TD. Om attributet tilldelas både TR och TH/TD kommer det som specificeras i TH/TD att överskrida det som är specificerat i TR. Om TR men inte TH specificeras kommer TRs attribut att överskrida THs standardvärde.

CHAR och CHAROFF

Placeringens offset

CHAR används om celler innehåller data som ska placeras enligt ett visst schema, till exempel om cellerna innehåller decimaler. Tecknet som uppges som attributets värde fungerar som axel för placeringen. Det kan vara en punkt som används i engelska språket eller ett komma som används i det svenska språket. Standard-värdet beror på det språk som specificerades genom attributet LANG. Om LANG är specificerat och standardvärde ska användas behöver du inte tilldela attributet CHAR något värde.

><TH align="char" char=".">

CHAROFF specificerar offset av det första placeringstecknet. "OFF" i CHAROFF står för offset och inte "av". Riktning kan specificeras genom attributet DIR. Om DIR saknas gäller textens nuvarande riktning. Standardvärdet är från vänster till höger (DIR=ltr), dvs offset beräknas från den vänstra marginalen. CHAROFF="20%" (kan även uppges i pixlar) placerar tecknet 20% från cellens början.

VALIGN

Vertikal placering av cellens innehåll

Med detta attribut kan du placera hela cellens innehåll vertikalt. Vill du ha samma placering i alla celler som finns på den aktuella raden använder du detta attribut tillsammans med TR. Om du har redan tilldelat TR attributet VALIGN kan du överskrida dess värde med det värde som du anger i TD/TH.

Tillåtna värden är:

HTML 3.2 - TOP | MIDDLE | BOTTOM
HTML 4.0 - TOP | MIDDLE | BOTTOM | BASELINE

Om attributet är frånvarande kommer cellens innehåll att placeras i mitten av cellerna, dvs enligt standarden MIDDLE.

<TH VALIGN=baseline> eller <TH VALIGN=baseline> placerar cellens innehåll på den gemensamma baslinjen.

ROWSPAN

Vertikal spännvidd av celler

Med detta attribut kan du spänna celler vertikalt. Den berörda cellen spänns x antal efterföljande celler (rader). Till exempel:

<TD ROWSPAN=4> kommer att uppta 4 rader
<TD ROWSPAN=0> ger en spännvidd som börjar från den aktuella raden och slutar vid tabellens sista rad

Om attributet är frånvarande kommer raden att uppta en cell då standardvärdet är 1. ROWSPAN tar även relativa värden - integer.

COLSPAN

Horisontell spännvidd av celler

Med detta attribut kan du spänna celler horisontellt. Den berörda cellen spänns x antal efterföljande celler (kolumner). Till exempel:

<TD COLSPAN=2> kommer att uppta 2 kolumner.
<TD COLSPAN=0> ger en spänvidd som börjar från den aktuella kolumnen och slutar vid tabellens sista kolumn.

Om attributet är frånvarande kommer kolumnen att uppta en cell då standardvärdet är 1. COLSPAN tar även relativa värden - integer.

HEADERS

Den specifika cellens rubrikinformation

Detta attribut tillåter icke visuella www-klienter att presentera rubrikinformation som tillhör en viss datacell. Attributet specificerar en lista på rubrikceller (TH) som tillhör en befintlig datacell (TD). Värdet är en lista som innehåller cellernas namn. Cellerna namnges med hjälp av attributet ID. Namnen i listan åtskiljs av ett mellanslag. Kan användas tillsammans med attributet SCOPE (se exempel nedan)

SCOPE

Specificerar cellen som tillhör en viss rubrikinformation (HEADERS)

Bör användas endast om rubrikinformationen är tillgänglig (HEADERS). Attributet specificerar cellen för vilken rubrikinformation (HEADERS) är tillgänglig och tillåter på så sätt icke visuella www-klienter presentera rubrikinformationen som tillhör en viss grupp av dataceller. Tillåtna värden är:

ABBR

Förkortning (abbreviation)

Bör användas endast om rubrikinformationen är tillgänglig (attributet HEADERS). Attributet ger en förkortad version av cellens innehåll. Denna korta version kan användas av visuella www-klienter om det inte finns tillräckligt med utrymme. Icke visuella www-klienter kan däremot förse cellen med förkortad rubrikinformationen innan cellerna tolkas.

<TH abbr="NAMN">Deltagarnas namn</TH>

AXIS

Axel

Bör användas endast om rubrikinformationen är tillgänglig (attributet HEADERS). Attributet tillåter en uppdelning av cellers innehåll i olika kategorier och på så sätt ge dels en mer detaljerad förklaring dels låta användaren extrahera endast den information han/hon vill. Det är upp till författaren hur informationen kategoriseras. En och samma cell kan tillhöra olika kategorier då attributets värde är en lista med namn på kategorier. Namn separeras med ett komma.

<TD axis="land, Norden, Europa">Sverige</TD>

BGCOLOR (T)

Cellens bakgrundsfärg. Nedskrivet attribut.

Om attributet saknas är cellens bakgrundsfärg transparent, dvs den bakgrundsfärg (eller bakgrundsbild) som tilldelades dokumentet kommer att skina igenom. Attributet är nedskrivet till förmån för CSS. Färgen i TH/TD överskrider den uppgivna i TR och/eller TABLE.

WIDTH (T)

Cellens bredd. Nedskrivet attribut

Cellernas bredd i likhet med tabellens bredd anpassar sig till innehållet. Om en tabell till exempel har tre kolumner kan var och en ha annorlunda bredd beroende på innehållet. Med attributet WITDH kan du specificera cellernas bredd exklusive fyllnad.

Värdet uppges i pixlar som är ett fast mått. Därför bör du undvika detta attribut om du vill behålla tabellens portabilitet, dvs dess förmåga att anpassa sig till plattformen, t ex skärmstorleken och upplösningen.

Några www-klienter accepterar även procentsatsen (OBS! Ogiltigt värde.) Procentsatsen relaterar då till tabellen och inte till skärmen. <TD WIDTH="20%"> kommer att uppta 20 % av tabellens bredd.

Du kan alltid vara säker på att cellen kommer att ha den specificerade bredden. Några www-klienter ger support åt pixlar, andra åt procentsatsen och vissa ger ingen support alls. Om bredden av någon anledning är "livsviktig" måste du använda dig av olika tricks, t ex ha en bild i en av cellerna med den önskade bredden eller "mäta avståndet" med elementet PRE. Normalt infogar <PRE> </PRE> vertikalt avstånd, men om elementet finns i en tabellcell kommer det mellanrum som elementet innehåller renderas horisontellt. OBS! Den möjlighet finns inte längre i Internet Explorer 4.0 då den tolkar PRE vertikalt även om elementet förekommer i en tabellcell. Elementet PRE eller IMG garanterar minimal bredd. Maximal bredd anpassas till tabellens innehåll.

<TABLE>
<TR>
<TD><PRE>   </PRE></TD> <TD>data</TD></TR>
<TR>
<TD>data</TD><TD>data</TD></TR>
</TABLE>

HEIGHT (T)

Cellens höjd. Nedskrivet attribut.

Med detta attribut kan du specificera cellens höjd exklusive fyllnad. Värdet uppges i pixlar men några www-klienter accepterar även procentsatsen. En höjd på 80% (HEIGHT="80%") kommer att uppta 80% av skärmen och inte 80% av tabellen.

NOWRAP (T)

Boole-, nedskrivet attribut.

Då cellernas bredd anpassar sig till innehållet kan en textrad automatisk brytas var som helst. Attributet används om en radbrytning ska undvikas.

Exempel

VALIGN, ROWSPAN

Markering:

<TABLE BORDER>
<TR><TH>Länder</TH><TH>Städer</TH></TR>
<TR><TD ROWSPAN=2 VALIGN=TOP>Sverige</TD>
<TD>Stockholm</TD></TR>
<TR><TD>Göteborg</TD></TR>
</TABLE>

Tolkning:

LänderStäder
Sverige Stockholm
Göteborg

Markering:

<TABLE BORDER>
<TR><TH>Länder</TH><TH>Städer</TH></TR>
<TR><TD ROWSPAN=3>Sverige</TD> <TD>Stockholm</TD></TR>
<TR><TD>Göteborg</TD></TR>
<TR><TD>Malmö</TD></TR>
</TABLE>

Tolkning:

LänderStäder
SverigeStockholm
Göteborg
Malmö

Markering:

<TABLE BORDER>
<TR><TH>Städer</TH><TH>Länder</TH></TR>
<TR><TD>Stockholm</TD><TD ROWSPAN=3>Sverige</TD></TR>
<TR><TD>Göteborg</TD></TR>
<TR><TD>Malmö</TD></TR>
<TR><TD>London</TD><TD ROWSPAN=3>England</TD></TR>
<TR><TD>Liverpool</TD></TR>
<TR><TD>Bristol</TD></TR>
</TABLE>

Tolkning:

StäderLänder
StockholmSverige
Göteborg
Malmö
LondonEngland
Liverpool
Bristol

COLSPAN

Markering:

<TABLE BORDER>
<TR><TH>Länder</TH><TH>Städer</TH></TR>
<TR><TD>Sverige</TD><TD>Stockholm</TD></TR>
<TR><TD COLSPAN=2 ALIGN=CENTER>Brasil</TD></TR>
</TABLE>

Tolkning:

LänderStäder
SverigeStockholm
Brasil

HEADERS and SCOPE

Dessa två attribut tillåter en bättre tolkning av cellernas innehåll i icke visuella www-klienter, dvs kopplar ihop dataceller med tillhörande rubriker. Om du vill sammankoppla en datacell med en viss rubrik namnger du rubriken med hjälp av attributet ID och kopplar senare det ID-namnet med cellens attribut HEADER:

<TABLE SUMMARY=" Denna tabell listar världens länder
 och deras huvudstäder sorterade i bokstavsordning">
<CAPTION>Länder och deras huvudstäder</CAPTION>
<TR>
<TH ID=namn1>Länder</TH>
<TH ID=namn2>Städer</TH>
<TR>
<TD HEADERS=namn1>Sverige</TD>
<TD HEADERS=namn2>Stockholm</TD>
<TR>
<TD HEADERS=namn1>England</TD>
<TD HEADERS=namn2>London</TD>
</TABLE>

Sverige och England (HEADERS=namn1) är sammankopplade med Länder (ID=namn1) medan Stockholm och London (HEADERS=namn2) är sammankopplade med Städer (ID=namn2).

Samma resultat kan åstadkommas med attributet SCOPE. Värdet COL sammankopplar alla celler i den aktuella kolumnen med dess rubrik:

<TABLE SUMMARY=" Denna tabell listar världens länder
 och deras huvudstäder sorterade i bokstavsordning">
<CAPTION>Länder och deras huvudstäder</CAPTION>
<TR>
<TH SCOPE=col>Länder</TH>
<TH SCOPE=col>Städer</TH>
</TR>
<TR><TD>Sverige</TD><TD>Stockholm</TD></TR>
<TR><TD>England</TD><TD>London</TD></TR>
</TABLE>

NOWRAP

Markering:Tolkning:..och inte:eller:
<TD NOWRAP>Hej alla barnHej alla barnHej
alla
barn
Hej alla  bar
n

Nästlagda tabeller

Varje TH och TD kan innehålla en annan tabell. Den nästlagda tabellen kommer då att ha samma bredd som cellen den befinner sig i. Den nästlagda tabellen kan innehålla en annan tabell osv. I exemplet nedan står T för tabell, R för rad och C för cell.

Markering:

<TABLE BORDER><TR><TD>T1-R1-C1</TD>
<TD><TABLE BORDER>
<TR><TD>ABC</TD><TD>DEF</TD></TR>
<TR><TD>GHI</TD><TD>JKL</TD></TR>
</TABLE>
</TD> <TD>T1-R1-C3</TD></TR>
</TABLE>

Tolkning:

Den nästade tabellen befinner sig i T1-R1-C2
T1-R1-C1
ABCDEF
GHIJKL
T1-R1-C3
Markering som ovan men den nästade tabellen är utan ram
T1-R1-C1
ABCDEF
GHIJKL
T1-R1-C3
Markering som ovan Båda tabellerna utan ram
T1-R1-C1
ABCDEF
GHIJKL
T1-R1-C3

Markering:

<TABLE BORDER>
<TR><TD><TABLE BORDER>
<TR><TD>A</TD><TD>B</TD></TR>
<TR><TD>C</TD><TD>D</TD></TR>
</TABLE>
</TD>
<TD>T1-R1-C2</TD></TR>
<TR><TD>T1-R2-C1</TD><TD>T1-R2-C2</TD></TR>
</TABLE>

Tolkning:

Den nästade tabellen befinner sig i T1-R1-C1
AB
CD
T1-R1-C2
T1-R2-C1T1-R2-C2

Markering:

<TABLE BORDER>
<TR><TD ALIGN=center COLSPAN=2><TABLE BORDER>
<TR><TD>A</TD><TD>B</TD></TR>
<TR><TD>C</TD><TD>D</TD></TR>
</TABLE>
</TD></TR>
<TR><TD>T1-R2-C1</TD><TD>T1-R2-C2</TD></TR>
</TABLE>

Tolkning:

Tabellen befinner sig i T1-R1-C1 är centrerad och sträcker sig över två kolumner
AB
CD
T1-R2-C1T1-R2-C2

Tabeller och stilmallar (CSS)

De flesta CSS-egenskaperna kan sammankopplas med varje element som förekommer i tabellerna. Med dessa egenskaper kan du formatera varje tabellcell för sig och ge den en unik stil. Det må vara bakgrundsfärg eller -bild, marginaler, höjd och bredd, radhöjd, typsnitt, positionering eller ramar i olika färger och stilar. I CSS2-rekommendationen (http://www.w3.org/TR/WD-CSS2/) har man även inkluderat rad egenskaper som bara kan tilldelas tabellerna.

CSS-formatering bygger på box-formatering. En box är det område som ett enstaka element upptar. En HTML 4.0-tabell är uppbyggd av 6 olika boxar - lager. Varje lager kan formateras för sig själv. Lagren är uppbyggda enligt följande:

  1. Elementet TABLE ligger i botten som det första lagret och följs av
  2. Kolumngrupper som följs av
  3. Kolumner som följs av
  4. Grupprader som följs av
  5. Rader som följs av
  6. Celler

I cellerna kan andra boxar/lager finnas, till exempel stycken eller andra tabeller. Varje element kan ha sin egen stil. Stilmöjligheterna är oändliga och begränsas bara av din egen fantasi.

Några enkla stilexempel:

TD {background: red; color: white; border: double white}

Varje tabellcell kommer att visas mot röd bakgrund och med vitt typsnitt samt ramas in av en dubbel vit ram

.namn1 {background: red; color: white; border: double white}

samma som ovan men stilen är tilldelad en klass och inte alla TD-element. Det betyder att du kan tilldela valfritt element denna stil - vid behov. Om du vill tilldela denna stil enstaka TD-element skriver du det i elementets starttag:

<TD CLASS=namn1> detta TD-element kommer att tilldelas den specificerade stilen medan andra TD-element kan tilldelas en annan stil

.namn2 {border-left: double white; border-right: solid red}

element med denna klass kommer att ha en dubbel vit vänsterram och en enkel röd högerram

TABLE {background: navy}
TD {background: red; border: solid white}

i denna tabell kommer mellanrummet mellan cellerna (CELLSPACING) att vara mörkblått, cellerna vita och ramen vit

TD {height: 100px; width: 100px}

alla celler i denna tabell kommer att vara 100 pixlar bred och 100 pixlar höga

TH {font: bold italic 12pt Arial}

alla rubriker i denna tabell kommer att visas med typsnitt: Arial, fet, kursiv, 12 punkter

TD {background: black}
TD, P {background: red}

varje tabellcell visas mot svart bakgrund. Om cellerna innehåller stycken kommer att dessa visas mot röd bakgrund

COL och COLGROUP - kolumner och kolumngrupper Nästa

Upp | HTML-referensbok | Referensböcker

Valid HTML 4.0 dok. http://vonpepel.com/ref/ - Senaste uppdatering 10 september 1998