5 Tabeller

5.	Indhold
		5.1	Tabeller i HTML
		5.2	Tabellens Overskrift
		5.3	Rækker
		5.4	Celler og Overskrifter
		5.5	Gruppering af Rækker
		5.6	Gruppering af Kolonner
		5.7	Tabelbehandling i Ikke-Visuelle Browsere
			5.7.1	Kategorisering af Celler

5.1 Tabeller i HTML

Tabeller blev introduceret i HTML for at give forfattere mulighed for at præsentere data så som tekst, billeder eller links i rækker og kolonner, såkaldte celler, sådan som man kender det fra tekstbehandlingsprogrammer og regneark. Erfaringer har siden vist, at man kan lave utroligt meget spræl på sine sider ved hjælp af tabeller. Tabellen er også mit absolutte favoritelement til opbygning af sider.

Faktisk er det sammenklappelige menusystem, du finder på disse sider, hvis du anvender Internet Explorer, faktisk lavet ved hjælp af tabeller og en smule JavaScript.

En tabel indledes med <TABLE> og afsluttes med </TABLE>. Imellem disse tags står tabellens indhold af overskrifter, rækker, celler og grupper.

Tabeller bør ikke anvendes udelukkende til formatering af dokumentets indhold, da det kan give problemer for ikke visuelle brugerprogrammer. På den anden side har man uhyggeligt stor kontrol over sidens indhold med tabeller. Så til syvende og sidst blive spørgsmålet om intensiv brug af tabeller ofte en afvejning af, om siden skal kunne "ses" med ikke-visuelle browsere eller ej.

Der er en række attributter og hændelser, der knytter sig til TABLE-elementet.

5.2 Tabellens Overskrift

Man bør give tabellen en overskrift, der fortæller, hvad den handler om. Overskriften står i CAPTION-elementet og vises centreret over selve tabellen. Dette element må kun stå umiddelbart efter <TABLE>-tag'et, og hver tabel må kun indeholde én overskrift.

Der er knyttet en række attributter og hændelser til tabeloverskrifter.

5.3 Rækker

Hver række i en tabel indledes med tag'et <TR>, hvis sluttag </TR> kan udelades. Dette har ofte været årsagen til mange ophidsede diskussioner mellem browserfans, fordi Internet Explorer accepterer dette uden problemer, hvorimod Netscape Navigator ofte løber ind i problemer, hvis sluttag'et mangler. Så lad det være sagt én gang for alle:

Og så må jeg vist hellere skynde mig at skifte adresse, inden jeg bliver overfaldet af vrede Navigator-fans. Det samme gør sig forøvrigt gældende for flere andre elementer, herunder de to celle-elementer, jeg gennemgår herunder.

På den anden side er der ingen, der forbyder en at anvende sluttag'et. Og så er man sikret under alle omstændigheder.

Der er knyttet følgende attributter og hændelser til tabelrækker.

5.4 Celler og Overskrifter

Der er to typer celler i en tabel:

• overskriftsceller: der angives med TH-elementet
• dataceller: der angives med TD-elementet

hvor begge elementers sluttags er valgfrie. De to typer celler adskiller sig kun ved den måde, de vises på i en browser, idet overskriftsceller som regel vises centreret og med en fed skrift. Vi ser på et lille eksempel (og jo, jeg elsker amerikanske blockbuster film):

<TABLE summary="Denne tabel viser en oversigt over populære film,
                med deres instruktør, produktionsår, billedformat og
                lydsystem" cellspacing=10%>
<CAPTION>Oversigt over Populære Film</CAPTION>
<TR>
    <TH>Titel</TH>
    <TH>Instruktør</TH>
    <TH>Produktionsår</TH>
    <TH>Billedformat</TH>
    <TH>Lydsystem</TH>
</TR>
<TR>
    <TD>Titanic</TD>
    <TD>James Cameron</TD>
    <TD>1997</TD>
    <TD>Wide Screen</TD>
    <TD>DTS</TD>
</TR>
<TR>
    <TD>Stjernekrigen</TD>
    <TD>George Lucas</TD>
    <TD>1977</TD>
    <TD>Wide Screen</TD>
    <TD>Dolby Digital</TD>
</TR>
<TR>
    <TD>Jurassic Park</TD>
    <TD>Steven Spielberg</TD>
    <TD>1993</TD>
    <TD>Wide Screen</TD>
    <TD>DTS</TD>
</TR>
</TABLE>

Denne simple tabel viser tydeligt, hvordan tabeller opbygges i HTML. Læg mærke til, at vi anvender attributten cellspacing til at give luft mellem cellerne. Det er specielt vigtigt her, hvor der ikke er linier til at adskille de enkelte celler.

Indholdet af en tabelcelle må gerne være en anden tabel. Nogle af de flotteste sider, jeg har set, er opbygget på den måde.

Det kan vist ikke undre, at der er en række attributter og hændelser, der er knyttet til celler og overskrifter.

5.5 Gruppering af Rækker

Rækkerne i en tabel kan grupperes i et tabelhoved, en tabelfod og en eller flere tabelkroppe. Denne opdeling gør det muligt for browsere at håndtere hver gruppe individuelt, når tabellen vises på skærmen eller udskrives. Hver gruppe skal indeholde mindst én række defineret med et TR-element.

Tabelhovedet og tabelfoden står i henholdsvis THEAD- og TFOOT-elementet, hvis sluttags er valgfrie (se desuden nedenfor). Hovedet og foden anvendes typisk til information om tabellens kolonner som f.eks. overskrifter og sammetællinger.

En tabelkrop indledes med <TBODY> og afsluttes med </TBODY>. Begge disse tags er valgfrie (se dog nedenfor). Hver kropsdel indeholder rækker med tabeldata. Her er et eksempel med resultaterne af den vanvittigt spændende Skovly Open minigolfturnering i år 2000 (Jeg husker stadig, hvordan jeg sad klinet til TV-skærmen under den direkte transmission):

<TABLE summary="Denne tabel viser resultaterne af 
                Campingpladsen Skovlys årlige minigolfturnering
                den 01-08-2000" cellspacing=10%>
<CAPTION>Resultaterne af minigolfturneringen Skovly Open</CAPTION>
<THEAD>
<TR>
    <TH>Bane</TH>
    <TH>Tanja Hansen</TH>
    <TH>Peter Petersen</TH>
    <TH>Karen Jensen</TH>
    <TH>Pia Olesen</TH>
</THEAD>
<TFOOT>
<TR>
    <TH>Samlet antal slag</TH>
    <TD>14</TD>
    <TD>13</TD>
    <TD>15</TD>
    <TD>12</TD>
</TFOOT>
<TBODY>
<TR>
    <TD>Spøgelsestoget</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>3</TD>
</TR>
    . . .
    . . .
</TBODY>
</TABLE>

Denne resultattabel viser, hvordan rækkegrupper anvendes i en tabel. Jeg ved godt, det virker hamrende ulogisk, men TFOOT-elementet skal står før det første TBODY-element. Det er for, at browseren kan fortolke tabelfoden, inden den modtager de muligvis mange rækker med data, der skal vises. Der er følgende regler for anvendelsen af disse elementer:

• <TBODY> er altid påkrævet, med mindre der hverken er et tabelhoved eller en tabelfod. Sluttag'et </TBODY> er derimod valgfrit.
• <THEAD> og <TFOOT>er altid påkrævet, når deres respektive gruppe anvendes. Til gengæld kan deres sluttags altid udelades.

Husk, at hver gruppe skal indeholde det samme antal kolonner.

Der er knyttet en række attributter og hændelser til rækkegruppe-elementerne.

5.6 Gruppering af Kolonner

Man kan også gruppere kolonner for at få en strukturel opdeling af tabellen. En tabel kan således indeholde enten en enkelt, underforstået, kolonnegruppe eller en vilkårligt antal kolonnegrupper, der står i hver sit COLGROUP-element, hvis sluttag </COLGROUP> er valgfrit.

COLGROUP-elementet har et hjælpeelement COL, der repræsenterer en eller flere kolonner i gruppen dog uden selv at medføre nogen strukturel opdeling. I stedet fastsætter COL-elementet en række attributter, der er fælles for den eller de kolonner, det omfatter. COL har ikke noget sluttag.

Vi vil nu bruge kolonnegrupper til at få et lidt pænere udseende på tabellen i eksemplet med minigolfresultaterne ovenfor, for de stod ikke specielt pænt:

<TABLE summary="Denne tabel viser resultaterne af 
                Campingpladsen Skovlys årlige minigolfturnering
                den 01-08-2000" cellspacing=10%>
<CAPTION>Resultaterne af minigolfturneringen Skovly Open</CAPTION>

<COLGROUP width=150>
    <COL align="left">
    <COL span=4 align="center">

<THEAD>
<TR>
    <TH>Bane</TH>
    <TH>Tanja Hansen</TH>
    <TH>Peter Petersen</TH>
    <TH>Karen Jensen</TH>
    <TH>Pia Olesen</TH>
</THEAD>
<TFOOT>
<TR>
    <TH>Samlet antal slag</TH>
    <TD>14</TD>
    <TD>13</TD>
    <TD>15</TD>
    <TD>12</TD>
</TFOOT>
<TBODY>
<TR>
    <TD>Spøgelsestoget</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>3</TD>
</TR>
    . . .
    . . .
</TBODY>
</TABLE>

Selv om der kun er én kolonnegruppe i dette eksempel giver det et godt billede af, hvordan kolonnegrupper anvendes. Det første der sker er, at kolonnebredden ændres til 150 pixels for alle kolonner i COLGROUP-elementet. Det første COL-element repræsenterer den første kolonne og anvendes her desuden til at venstrestille indholdet i cellerne. Det sker her for at tvinge overskrifterne i tabelhovedet og -foden på plads ved venstre kant. Det sidste COL-element repræsenterer de sidste fire kolonner (angivet med span-attributten, som ikke må forveksles med tabelcellernes colspan attribut) med spillernes navne og score, hvor indholdet centreres. Læs desuden mere om attributterne og kolonnegruppernes hændelser.

Vi lægger specielt mærke til, at kolonnegrupper defineres før rækkegrupperne. Det skyldes naturligvis, at hver rækkegruppe også er omfattet af kolonnegrupperne.

Man kan naturligvis opnå samme resultat som ovenfor ved at anvende to kolonnegrupper. Herved kan man bl.a. spare de to COL-elementer:

<COLGROUP width=175 align="left">
<COLGROUP width=150 span=4 align="center">

hvor vi dog har gjort den første kolonne lidt bredere, end de andre. Det kan man dog også med kun én kolonnegruppe:

<COLGROUP>
    <COL align="left" width=175>
    <COL width=150 span=4 align="center">

Dette er dog kun to af en lang række muligheder, der giver det ønskede resultat.

5.7 Tabelbehandling i Ikke-Visuelle Browsere

Brugere, der anvender en almindelig browser, har som regel ingen problemer med at overskue en tabels indhold. Sagen stiller sig imidlertid anderledes for brugere, der anvender andre brugerprogrammer som f.eks. en talesynthesizer.

Til hjælp for sådanne programmer har cellerne-elementerne TD og TH nogle specielle attributter: headers, scope og abbr:

• for hver enkelt datacelle angiver headers-attributten hvilke overskriftsceller, der indeholder de relevante overskrifter. Det betyder, at de pågældende overskriftsceller skal være navngivet med id-attributten. Det er dog ikke altid muligt at lave en klar opdeling af celler i overskrifter og data. I disse tilfælde anbefales det at anvende TD-elementet sammen med id- eller scope-attributten efter behov.
• for hver enkelt overskriftscelle angiver scope-attributten hvilke dataceller, overskriften gælder for. Denne attribut kan anvendes i stedet for headers, hvis det er mere passende, da de to attributter udfører den samme funktion. headers anvendes som regel i tilfælde, hvor overskrifterne er placeret mere uregelmæssigt i forhold til de dataceller, de henviser til.
• abbr-attributten angiver en forkortet overskrift til overskriftsceller, så overskrifter kan behandles hurtigere.

For at vise fremgangsmåden, vil vi nu vise vores minigolfresultater i en udgave, der er mere behandlingsvenlig overfor ikke-visuelle browsere:

<TABLE summary="Denne tabel viser resultaterne af 
                Campingpladsen Skovlys årlige minigolfturnering
                den 01-08-2000" cellspacing=10%>
<CAPTION>Resultaterne af minigolfturneringen Skovly Open</CAPTION>

<COLGROUP width=150>
    <COL align="left">
    <COL span=4 align="center">

<THEAD>
<TR>
    <TH id="bane" scope="col">Bane</TH>
    <TH id="th" scope="col" abbr="T. Hansen">Tanja Hansen</TH>
    <TH id="pp" scope="col" abbr="P. Petersen">Peter Petersen</TH>
    <TH id="kj" scope="col" abbr="K. Jensen">Karen Jensen</TH>
    <TH id="po" scope="col" abbr="P. Olesen">Pia Olesen</TH>
</TR>
</THEAD>
<TFOOT>
<TR>
    <TH id="total" scope="row" abbr="total">Samlet antal slag</TH>
    <TD headers="total th">14</TD>
    <TD headers="total pp">13</TD>
    <TD headers="total kj">15</TD>
    <TD headers="total po">12</TD>
</TR>
</TFOOT>
<TBODY>
<TR>
    <TD id="toget" scope="row">Spøgelsestoget</TD>
    <TD>2</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>3</TD>
</TR>
    . . .
    . . .
</TBODY>
</TABLE>

Visuelt adskiller denne udgave sig ikke fra den forrige, men en ikke-visuel browser vil præsentere tabellen på en meget mere forståelig måde. Som det ses, er headers-attributten anvendt i sammentællingen i tabelfoden. Det er dog kun sket for at demonstrere brugen af attributten og er ikke strengt nødvendigt, da de pågældende celler allerede er dækket af scope-attributter i overskrifterne.

5.7.1 Kategorisering af Celler

Det kan dog ske, at brugere ønsker oplysninger om mere end én celle, og så er det ikke altid tilstrækkeligt med de attributter, der er beskrevet ovenfor for at få den rette sammenhæng.

Følgende eksempel er lånt i HTML 4.0 specifikationen [HTML40] og skrevet om til danske forhold:

I denne tabel kunne brugere finde på at søge oplysninger om f.eks.:

• "Hvad blev der brugt til måltider i alt?"
• "Hvad blev der brugt til måltider den 25. august?"
• "Hvad var de samlede udgifter i Odense?"

Hver af disse spørgsmål kræver beregninger af browseren, der involverer 0 eller flere celler. F.eks. vil beregningen af udgifter til måltider den 25. august kræve, at browseren ved, hvilke celler der henviser til måltider, og hvilke der henviser til datoer (specielt 25. august), samt at det kan finde skæringspunktet mellem disse.

For at imødekomme den type forespørgsler gør HTML 4.0 det muligt at inddele overskrifter og data i kategorier. Tabellen ovenfor kan således inddeles i tre kategorier for at besvare forespørgsler som de nævnte:

• en kategori, der holder styr på typerne af udgifter
• en kategori, der holder styr på de byer, der har været besøgt
• en kategori, der holder styr på datoerne

Man laver en kategori ved hjælp af axis-attributten i den celle, der indeholder den overskrift, man vil anvende som kategoritypens værdi. F.eks. vil følgende tag oprette en kategori, hvor sted=Esbjerg:

     <TH id="a10" axis="sted">Esbjerg</TH>

Celler, der skal placeres i denne kategori, skal så knyttes til denne overskrift enten ved scope- eller headers-attributten:

     <TD headers="a10 a11 a3">763,00</TD>

Ud over den nævnte kategori, knyttes cellen også til de kategorier, der er oprettet i overkriftescellerne med id="a3" og id="a11".

Ved at kategorisere cellerne på denne måde, opnår vi også, at brugeren ikke bliver forvirret af en del uønskede data, da den ikke-visuelle browser kan finde nøjagtigt den oplysning, brugeren ønsker.

For en god ordens skyld gør jeg opmærksom på, at HTML 4.0 specifikationen [HTML40] ikke kræver, at browsere understøtter information givet i axis-attributten, eller foreskriver nogen bestemt måde, denne information skal håndteres på.