Litt historikk
(Om du ikkje er interessert i tabellanes historie på veven, kan du hoppa direkte til «Me startar …».)
Tabellar vart først introdusert i W3C-standarden i HTML 3.2, etter å allereie ha vore implementert i fleire nettlesarar.
Tabellfunksjonaliteten viste seg snart populær – dessverre ikkje berre med positive konsekvensar. Med HTML kunne ein nemlig ikkje definera avansert layout, med fleire kolonner eller nøyaktig plassering av tekst og grafikk. Dette var eigentlig ikkje so rart, sidan HTML tar sikte på definera struktur og semantikk – ikkje utsjånad og presentasjon.
Ulemper
Tabellar gav nye muligheitar. Ved å plassera innhaldet i forskjellige celler og spesifisera breidda på desse, kunne ein plassera ting der ein ville. Mange oppfatta sjølvsagt dette som ein enorm fordel, men ulempene var store. Alternative nettlesarar (f.eks. talenettlesarar) rekna naturlig nok med at tabellar vart brukt for å framstilla tabellbasert informasjon, men når det heller vart brukt til å få til ein spesiell visuell effekt, vart sidene rett og slett ubrukelige.
I tillegg til problem i ulike nettlesarar, var òg tabellar vanskelige å skriva – kjeldekoden vart eit virvar av taggar, som både var vanskelige å vedlikehalda og å forstå!
Løysinga
Løysinga på problemet med misbruk kom gjennom stilsettspesifikasjonen CSS 1, frå desember 1996. Dette var eit språk som gjorde det mulig å kontrollera presentasjon av nettsider på ein mykje enklare og nøyaktigare måte.
I tillegg til at markering ikkje vart misbrukt til å oppnå ein viss presentasjon, kunne eitt stilsett delast av fleire sider, noko ville føre til at sidene tok mindre plass (òg delvis på grunn av ein kunna bruka stilsett der ein før måtte bruka bilde) og dermed fungerte raskare – i teorien.
Det var ikkje noko gale med språket per se, det var implementasjonane det skorta på. Dei nyaste nettlesarane hadde delvis støtte for språket, noko som faktisk var verre enn ingen støtte. CSS var nemlig konstruert slik at sidene ville fungera heilt fint om nettlesaren ikkje støtta det. Dei første implementasjonane var so dårlige at ein ikkje kunne tenka på bruka CSS på sidene.
Produsentane skjerpa seg sjølvsagt, men òg dei neste versjonane av nettlesarane hadde for dårlig støtte; om ein var so heldig å få ei side til å fungera i ein nettlesar, vil same side nesten garanterte ikkje fungera i ein annan, eller endå verre: krasje nettlesaren! Dessverre heng noko av dette problemet framleis igjen, og det finst i skrivande stund (mars 2000) ingen nettlesarar som støttar denne fire år gamle standarden skikkelig, noko som ikkje har gjort livet lettare for dei som utvikler nettsider …
CSS 2
Nettsideutviklarane fortsatte derfor å misbruka tabellar til presentasjon, og gjer det enno. I 1998 kom CSS 2, ein oppdatert og sterkt forbetra stilsettspesifikasjon. Denne gjorde det mulig med svært avanserte grafiske effektar, (relativt) stor typografisk kontroll, og faktisk støtte for presentasjon av teksten i talebaserte nettlesarar! Det er vel unødvendig å seia at denne heller ikkje har blitt implementert i nettlesarar.
Notida
Ein del nettlesarprodusentar har vist ansvar, og har produsert nettlesarar som til ein stor grad følgjer standardane. Heldigvis! Situasjonen er ikkje lenger so mørk. Det finst altså teknologi som passar betre til å oppnå ein spesiell visuell effekt, enn misbruk av tabelllar. Tabellar skal berre brukast til tabellbasert informasjon. Til gjengjeld er tabellar i XHTML spesielt bra til markering av slik informasjon, og det er dette du vil læra meir om i denne gjennomgangen.
Me startar …
Du kan med XHTML laga tabellar med celler som går over fleire rader, over fleire kolonner, overskriftsceller og gruppering av celler. Men la oss begynna med noko enklare:
Ein enkel tabell
Ein heilt enkel tabell ser slik ut:
<table>
<tbody>
<tr>
<td>Første celle</td>
<td>Andre celle</td>
</tr>
</tbody>
</table>
I nettlesaren din blir han vist slik:
| Første celle | Andre celle |
Me startar alltid ein tabell med table-elementet. Inni dette plasserar me eitt eller fleire tbody-element, som representerar radgrupper med tabellinnhald (me har vanligvis berre ei slik radgruppe). For å oppretta ei rad,
brukar me tr-elementet. Du kan ha so mange rader du vil i ein tabell. Innanfor kvar rad kan du ei eller fleire celler, spesifisert med
td-elementet.
Tabellen over blir vist slik i din nettlesar:
Tabelltoppar og overskriftsceller
Mange tabellar har kolonne- eller radoverskrifter. I XHTML kan du definera overskriftsceller med th-elementet. Du brukar altså th i staden for td på overskriftsceller. Om cellene er kolonneoverskrifter, må du i tillegg spesifisera eit overskriftsområde, ein tabelltopp.
Du bruker thead-elementet til dette.
Merk at om cellene er både overskriftsceller og inneheld informasjon (f.eks. årstal eller medlemsnummer), skal du bruka td.
Her er eit eksempel på ein tabell med overskriftsceller, og to rader – kvar med fem celler:
<table>
<thead>
<tr>
<th>Tittel</th>
<th>Forlag</th>
<th>Siste utgjevingsår</th>
<th>Fyrste utgjevingsår</th>
<th>Sider</th>
</tr>
</thead>
<tbody>
<tr>
<td>Constance Ring</td>
<td>Pax</td>
<td>1989</td>
<td>1885</td>
<td>278</td>
</tr>
<tr>
<td>Forraadt</td>
<td>Gyldendal</td>
<td>1990</td>
<td>1892</td>
<td>160</td>
</tr>
</tbody>
</table>
Tabellen blir vist slik i din nettlesar:
| Tittel | Forlag | Siste utgjevingsår | Fyrste utgjevingsår | Sider |
|---|---|---|---|---|
| Constance Ring | Pax | 1989 | 1885 | 278 |
| Forraadt | Gyldendal | 1990 | 1892 | 160 |
Ofte vil overskriftsceller (th-element) bli vist som halvfeit, sentrert tekst (dette kan du sjølvsagt endra ved bruk av stilsett). Ved utskrift av store
tabellar blir innhaldet i thead vanligvis gjentatt øvst på kvar side. Nettlesarar kan òg la kolonneoverskriftene stå i ro og la brukaren rulla gjennom hovedradene,
sjølv om ingen har implementert dette til no (me ventar i spenning …). Spesifisering av overskriftsområde er òg veldig nyttig
for nettlesarar som baserar seg på talesyntese eller blindeskrift.
Tabellbotn og tabelltitlar
På same måte som tabellar kan ha tabelltopp (overskriftsområde), kan dei òg ha ein tabellbotn. Etter thead og tbody, var det naturlig at dette området fekk namnet tfoot …
Overraskande nok definerar me ikkje dette området ved slutten av tabellen, men faktisk rett etter tabelltoppen (thead). Dette er for at nettlesarar skal kunna visa tabelltoppen og tabellbotnen mens tabellen blir lasta ned (slik at desse alltid er synlige, sjølv om ikkje alle radene er henta ned).
Her er eit eksempel på ein tabell med både topp- og og botnområde (caption vil bli forklart):
<table>
<caption>
Faste kostnader
</caption>
<thead>
<tr>
<th>Kostnadstype</th>
<th>Kostnadsverdi</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>kr 300 000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Husleige</td>
<td>kr 100 000</td>
</tr>
<tr>
<td>Fast lønn</td>
<td>kr 100 000</td>
</tr>
<tr>
<td>Avskrivingar</td>
<td>kr 50 000</td>
</tr>
<tr>
<td>Rente</td>
<td>kr 35 000</td>
</tr>
<tr>
<td>Forsikringar</td>
<td>kr 15 000</td>
</tr>
</tbody>
</table>
Tabelltitlar (caption)
I eksempel ovanfor finn du òg eit nytt element, caption-elementet. Dette brukar du for å gje tabellen ein tittel, ei overskrift, og i grafiske nettlesarar blir denne vanligvis vist
over tabellen, midtstilt og med same breidd som tabellen sjølv. Dette kan du sjølvsagt endra so mykje du vil med bruk av stilsett.
Ver merksam på caption må komma rett etter table-taggen!
Tabellen i eksemplet ovanfor ser slik ut i din nettlesar:
| Kostnadstype | Kostnadsverdi |
|---|---|
| Sum | kr 300 000 |
| Husleige | kr 100 000 |
| Fast lønn | kr 100 000 |
| Avskrivingar | kr 50 000 |
| Rente | kr 35 000 |
| Forsikringar | kr 15 000 |
Her ser du at oppsummeringsområdet blir vist i slutten av tabellen, sjølv om det vart spesifisert rett etter thead.
Samandrag/tabellinformasjon
Ved bruk av alternative nettlesarar «ser» ein ikkje heile tabellen på ein gong. I nettlesarar basert på talesyntese eller
blindeskrift får du servert ei celle og eitt ord om gongen. Då blir det lett vanskelig å få oversikt over tabellane, og du må kanskje lesa gjennom store delar av ein
tabell før du finn ut at han ikkje inneheldt informasjon du var ute etter. For å bøta på dette problemet, tar me med eit samandrag
av tabellen, ved å bruka summary-attributtet.
Dette attributtet skal du bruka for å gje meir omfattande informasjon om ein tabell, kva han gjev informasjon om og korleis han er strukturert.
Du bruker attributtet på table-elementet; slik:
<table summary="Tabellen viser alle romanane til Amalie Skram,
med tittel, forlag, når dei først og sist
vart utgjevne, samt sidetalet.">
<caption>Amalie Skrams romaner</caption>
…
</table>
For å korta litt ned på tabellen, har eg her utelatt hovudinnhaldet.
Attributta cellspacing og cellpadding
Cellene i tabellane ovanfor (f.eks. denne) ser kanskje ut til å stå litt for nærmt kvarandre. For å endra dette kan du bruka cellspacing- og cellpadding-attributta. Dette er eit unntak frå regelen om at XHTML ikkje skal brukast for å kontrollera presentasjon. Grunnen til at desse attributta har overlevd overgangen til XHTML 1.0 var visstnok at det ikkje eksisterte tilsvarande eigenskapar i CSS 1. I CSS 2 er dette derimot fiksa, og sjølv om denne stilsettstandarden ikkje er støtta serlig i noverande nettlesarar, tilrår eg
deg til å unngå cellspacing- og cellpadding-attributta. Støtte blir betre og betre, og det er mykje lettare å ha all informasjon om utsjånad samla i ei stilsettfil, enn spreidd ut over mange dokument.
Me brukar cellspacing for å bestemma storleiken på margen mellom to celler og mellom ei celle og tabellkanten. Verdien kan enten vera eit reint
tal (som tilsvarar ein piksel) eller i prosent. Attributtet skal brukast direkte på table-elementet, slik:
<table cellspacing="10">
…
</table>
Boktabellen vil då sjå slik ut:
| Tittel | Forlag | Siste utgjevingsår | Fyrste utgjevingsår | Sider |
|---|---|---|---|---|
| Constance Ring | Pax | 1989 | 1885 | 278 |
| Forraadt | Gyldendal | 1990 | 1892 | 160 |
Me brukar cellpadding til å spesifisera ekstra «luft» rundt cellene. Dette i motsetning til cellspacing som spesifiserar luft mellom cellene. Verdien kan òg her vera i pikslar (eit reint tal) eller i prosent. 
Viss du brukar prosentverdiar bør du vera merksam på at topp- og bunnmargen er basert på den tilgjengelige vertikale plassen, mens venstre- og høgremargen er basert på den tilgjengelige horisontale plassen. Desse kan altså vera forskjellige. Venstremargen og høgremargen vil kvar ha halvparten av den spesifiserte prosentverdien.
Viss du har <table cellspacing="30%"> vil altså venstremargen til cellene ta opp 15 % av den tilgjengelige horisontale plassen. Det same vil høgremargen. Tilsvarande
for topp- og bunnmarg og vertikal plass.
Dette kan vera litt vanskelig å forstå. Det lettaste er nok å eksperimentera for so å observera resultatet.
Elementet colgroup
Ein tabell har vanlegvis fleire kolonner. Ofte vil han òg bestå av fleire kolonnegrupper. For å dela kolonnene inn i grupper, brukar me colgroup-elementet. Dette markerar eit strukturelt skilje, som ein då eventuelt kan bruka stilsett for å framheva.
Ein fordel er at du kan hjelpa nettlesaren med informasjon om korleis han kan visa tabellen gradvis. Det tyder at han kan begynna å visa delar av tabellen sjølv om ikkje heile er lasta ned.
Attributta span og width
Det finst to attributt til colgroup-elementet. Det første, span, fortel kor mange kolonner gruppa gjeld for (dekker). Standardverdien er her 1; kolonnegruppa gjeld altså for ei kolonne. Det andre attributtet er width. Dette fortel om breidda til kvar kolonne i kolonnegruppa, men altså ikkje breidda til sjølve gruppa. Du kan òg bruka width på sjølve table-elementet for å spesifisera breidda til heile tabellen.
Verdiane som kan brukast på width er eit reint tal (pikselverdi) eller prosent. Prosentverdiar blir rekna av tilgjengeleg horisontal plass, og nettlesaren
er då altså ikkje avhengig av veta breidda til tabellen. Dette har den store fordelen at det gjer gradvis vising mulig.
I tillegg kan attributtet ta relative lengder. Desse har forma n* der n er eit reint tal. Dette viser kor stor del av tilgjengeleg plass kolonna må (minst) ta opp. Viss du har 200 pikslar ledig plass som skal fordelast på tre kolonner kan du spesifera 1* for første kolonne, 5* for andre kolonne og 4* for tredje kolonne. Då blir fordelinga 20, 100 og 80 pisklar. Viss du har problem med å forstå dette kan du leggja saman
dei tre verdiane 1,5 og 4, som blir 10. Du kan so gjera dette om til prosent ved å dela kvar verdi på summen (10) og gonga
prosenttalet med tilgjengelig plass.
Ver obs. på at viss du spesifiserar relative lengder og tabellen ikkje har ei fast breidd (spesifisert i pikslar eller prosent med
width-attributtet på table-elementet), kan ikkje nettlesaren visa tabellen gradvis.
Det finst òg ein spesiell attributtverdi, 0*. Denne seier at kvar kolonne i kolonnegruppa skal ha minimumsbreidden som trengs for å visa heile innhaldet i kolonna. Denne
bør – etter mi meining – helst ikkje brukast, då den fører til at heile tabellen alltid må vera lasta ned før nettlesaren kan begynna å visa han.
Du kan bruka forskjellige einingar (pisklar, prosent og relative lengder) på forskjellige kolonner. Då blir det først gjort rom til kolonnene som er spesifisert med piksel- og prosentverdiar og so blir dei relative lengdene rekna ut etter den resterande ledige plassen.
Eg rår deg til alltid å bruka prosentverdiar eller relative lengder (då med spesifisert tabellbreidd) – aldri pikselverdiar. Dette gjer at tabellane kan fungera skikkelig i alle skjermoppløysingar, og før dei er lasta heilt ned. Her
er eit eksempel på korleis du kan bruka colgroup (for å spara plass er nokre element og attributt, f.eks. caption og summary, ikkje tatt med):
<table width="75%" cellspacing="5">
<colgroup width="50%" />
<colgroup width="3*" />
<colgroup width="1*" />
<thead>
<tr>
<th>Teater</th>
<th>Hovudsete</th>
<th>Opna</th>
</tr>
</thead>
<tbody>
<tr>
<td>Den Nationale Scene</td>
<td>Bergen</td>
<td>1876</td>
</tr>
<tr>
<td>Nationaltheatret</td>
<td>Oslo</td>
<td>1899</td>
</tr>
<tr>
<td>Den Norske Teater</td>
<td>Oslo</td>
<td>1913</td>
</tr>
<tr>
<td>Oslo Nye Teater</td>
<td>Oslo</td>
<td>1959</td>
</tr>
<tr>
<td>Rogaland Teater</td>
<td>Stavanger</td>
<td>1947</td>
</tr>
<tr>
<td>Trøndelag teater</td>
<td>Trondheim</td>
<td>1937</td>
</tr>
</tbody>
</table>
Denne tabellen blir vist slik (merk at ikkje alle nettlesarar har støtte for colgroup):
| Teater | Hovudsete | Opna |
|---|---|---|
| Den Nationale Scene | Bergen | 1876 |
| Nationaltheatret | Oslo | 1899 |
| Den Norske Teater | Oslo | 1913 |
| Oslo Nye Teater | Oslo | 1959 |
| Rogaland Teater | Stavanger | 1947 |
| Trøndelag teater | Trondheim | 1937 |
Element col
Elementet colgroup markerar som sagt eit strukturelt skilje. Av og til kan ein ha behov for å skilja ut enkelte kolonner utan å merkera noko slikt skilje. Til dette bruker du col-elementet. Dette er ganske likt col då du kan bruka både width- og span-attributta på det.
Du kan enten plassera col inne i eller utanfor eit colgroup-element. Viss eit colgroup-element inneheld eitt eller fleire col-element blir span-attributtet ignoret for colgroup-elementet. Her er eit lite eksempel på korleis du kan bruka col-elementet:
<colgroup width="10%">
<col span="8" />
<col width="20%" id="sluttkolonne" />
</colgroup>
Her er det spesifisert ei kolonnegruppe der kvar kolonne i gruppa tar opp 10 % av den tilgjengeleg plassen. So kjem åtte kolonner,
som derfor kvar tar opp breidda 10 %. Til slutt er det ei kolonne der width-attributtet er sett til 20 %. Dette overstyrer verdien på 10 % som det elles ville ha arva frå kolonnegruppa. Denne siste
kolonna har fått eit id-attributt med verdi sluttkolonne som gjer at ho – ved hjelp av stilsett – kan formaterast på ein spesiell måte.
Attributta align, valign, char og charoff
Elementa colgroup, col, tbody, thead, tfoot, tr, th og td tar i tillegg til dei attributta allereie nemnt, fire ekstra attributt. Desse er align, valign, char og charoff.
Attributtet align
Me begynner med det første, align. Dette bestemmer den horisontale justeringa til teksten i dei cellene som kjem under ei viss cellegruppe. Det vil for eksempel
seia at viss det er spesifisert på colgroup, gjeld det på alle cellene i kolonnegruppa. Viss det er spesifisert på tr, gjeld det på alle cellene i den rada. Dette attributtet kan ta ein av fem verdiar: left, center, right, justify og char. Desse har følgande funksjonar:
left- Gjer at teksten (eller annan data) blir venstrejustert i cellene (standard).
center- Midtstiller innhaldet i cellene.
right- Høgrejustert celleinnhald.
justify- Blokkjustert tekst (jamn venstre- og høgremarg).
char- Justerer teksten rundt eit spesielt teikn (meir om dette seinare).
Attributtet valign
Det andre attributtet, valign, justerer teksten i cellene vertikalt. Dette attributtet kan ha ein av fire verdiar: top, middle, bottom og baseline. Desse har følgande funksjonar:
top- Celleinnhaldet blir plassert øvst i cellene.
middle- Celleinnhaldet blir midstilt i cellene (standard).
bottom- Cellinnhaldet blir plassert nedst i cellene.
baseline- Innhaldet i cellene som har denne verdien skal plassert slik at første tekstlinje står i samme høgde som første tekstlinje i andre celler i samme rad.
Attributtet char
Attributtet char har òg med justering av tekst å gjera. Verdien til dette attributtet skal vera eit teikn (bokstav, tal eller symbol). Teksten
i cellene skal vera justert rundt dette, slik at teiknet har samme horisontale plassering i alle celler i ei kolonne. Bruksområde
for dette kan f.eks. vera å ved visning av valuta under kvarandre i ei kolonne, justert etter desimalteiknet. For at dette
attributtet skal ha nokon effekt, må align-attributtet vera sett til "char".
Attributtet charoff
Det siste attributtet er charoff. Dette spesifiserar avstanden frå venstre kant av cella (viss tekstretningen er venstre til høgre!) til justeringsteiknet,
spesifisert med char. Viss teiknet ikkje eksisterar på ei linje, skal linja justerast slik at ho sluttar ved der avstanden frå cellekanten er
lik den spesifiserte avstanden. Verdien til attributtet kan enten vera eit reint tal (pikselverdi) eller ein prosentverdi.
Merk at ifølgje HTML-spesifiksjonen er ikkje nettlesarar nøydt til å støtta dei to siste attributta, og få, om nokon, gjer det.
Attributta rowspan og colspan
No går me over til litt meir «avansert» tabelldesign. Dei to attributta rowspan og colspan kan du bruka på tabellceller (td- og th-elementa) for å få desse til å strekka seg over fleire rader eller kolonner.
Attributtet colspan skal du bruka viss du vil ha ei celle til å gjelda over fleire kolonner. Verdien er eit reint tal som avgjer kor mange kolonner
cella skal gå over. Viss verdien er sett til 0 skal cella dekka alle celler, f.o.m. der cella begynner, t.o.m. slutten av kolonnegruppa (altså ikkje til slutten av tabellen). Attributtet rowspan tilsvarer colspan, men gjeld for rader. Verdien 0 kan òg brukast her, og gjeld då til slutten av radgruppa (f.eks. tbody).
Her er eit eksempel på bruk av colspan og rowspan (igjen er caption og summary utelatt):
<table width="100%" cellspacing="4" cellpadding="2" border="1" frame="border" rules="all">
<colgroup width="15%" />
<colgroup>
<col width="30%" />
<col width="15%" />
</colgroup>
<colgroup width="40%" />
<thead>
<tr>
<th rowspan="2">Storleik</th>
<th colspan="2">Ikkje SI-eining</th>
<th rowspan="2">SI-eining</th>
</tr>
<tr>
<th>Namn</th>
<th>Symbol</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volum</td><td>liter</td><td>L</td><td>1 dm³</td></tr>
…
</tr>
</tbody>
</table>
Denne tabellen blir vist slik (men ikkje nødvendigvis korrekt) på din nettlesar:
| Storleik | Ikkje SI-eining | SI-eining | |
|---|---|---|---|
| Namn | Symbol | ||
| Volum | liter | L | 1 dm³ |
| Masse | atommasseeining | u | 1,66 × 10−27 kg |
| Effekt | hestekraft | hk | 101,325 kPa |
I tabellen vist ovanfor har eg brukt nokre ekstra attributt for å framheva cellegrensene. Meir om desse seinare.
Attributta border, frame og rules
Desse attributta blir brukt til å oppnå ein spesiell utsjånad. Dette er eit av unntaka om at HTML berre skal brukast til å beskriva korleis noko er strukturelt. Grunnen til at desse attributta finst i XHTML er at CSS 1-spesifikasjonen ikkje hadde eigenskapar for å kontrollera alt dette. Dette er imidlertid rette opp i CSS 2. Eg vil anbefala deg å bruka stilsett til å kontrollera presentasjonen, men har likevel tatt med informasjon om desse attributta. Delvis på grunn av at ingen nettlesarar har serlig støtte for CSS 2 enno.
Attributtet border
Dei tre attributta blir brukt til å laga kantlinjer. Dei skal spesifiserast direkte på table-elementet. Det første attributtet er border. Du bruker dette til å spesifisera pikselbreidda på ramma (kantlinja) rundt tabellen.
<table border="5">
…
</table>
Tabellen får no ei ramme på fem pikslar.
Attributtet frame
Det andre attributtet er frame. Dette har faktisk ni forskjellige mulige verdiar (du bruker ein om gongen!). Attributtet spesifiserar kva side av ramma
rundt ein tabell som skal vera synleg. Her følgjer ei liste med mulige verdiar. Eg har òg eit eksempel på ein tabell for kvar
verdi, men ver merksam på at det er godt mulig frame-attributtet ikkje er støtta i din nettlesar.
void- Standardverdi. Ingen kantlinje rundt tabellen.
-
A1 A2 A3 B1 B2 B3 C1 C2 C3 above- Kantlinje øvst på tabellen.
-
A1 A2 A3 B1 B2 B3 C1 C2 C3 below- Kantlinje nedst på tabellen.
-
A1 A2 A3 B1 B2 B3 C1 C2 C3 hsides- Kantlinje langs dei horisontale (vannrette) sidene, altså øvst og nedst.
-
A1 A2 A3 B1 B2 B3 C1 C2 C3 vsides- Kantlinje langs dei vertikale (loddrette) sidene, altså til venstre og høgre.
-
A1 A2 A3 B1 B2 B3 C1 C2 C3 lhs- Kantlinje langs venstre side.
-
A1 A2 A3 B1 B2 B3 C1 C2 C3 rhs- Kantlinje langs høgre side.
-
A1 A2 A3 B1 B2 B3 C1 C2 C3 box- Kantlinje rundt heile tabellen.
-
A1 A2 A3 B1 B2 B3 C1 C2 C3 border- Kantlinje rundt heile tabellen (same som
box). -
A1 A2 A3 B1 B2 B3 C1 C2 C3
Eg er ikkje sikker, men eg trur box- og border er like på grunn av kompatibilitetshensyn.
Attributtet rules
Det tredje attributtet som har med kantlinjer å gjera er rules-attributtet. Det spesifiserar kantlinjer mellom celler eller cellegrupper. Attributtet kan ta ein av fem forskjellige verdiar (godt mulig at nettlesaren din ikkje har støtte
for dette heller):
none- Standardverdi. Ingen kantlinje mellom celler eller cellegrupper.
-
A1 A2 A3 B1 B2 B3 C1 C2 C3 groups- Kantlinje mellom rad- og kolonnegrupper. Radgrupper lagar du ved å bruka
thead-,tbody- ogtfoot-elementa. Kolonnegrupper lagar du ved å brukacolgroup- ogcol-elementa. Her er eit eksempel. Alle kantlinjene blir automatisk generert ved hjelp avrules-attributtet. -
Bruttolønn Skattetrekk Nettolønn Sum 24 349 5 577 18 722 15.1.99 Kjellaug Såtendal 5 934 1 347 4 587 Oline Tjong 6 300 1 479 4 821 1.2.99 Kjellaug Såtendal 5 863 1 331 4 532 Oline Tjong 6 252 1 420 4 832 rows- Kantlinje mellom rader.
-
Tittel Forlag Siste utgjevingsår Fyrste utgjevingsår Sider Constance Ring Pax 1989 1885 278 Forraadt Gyldendal 1990 1892 160 Fru Inés Gyldendal 1990 1892 160 cols- Kantlinje mellom kolonner.
-
Januar Februar Mars 9 200 kr 9 008 kr 7 552 kr 4 561 kr 4 506 kr 4 064 kr 2 571 kr 2 503 kr 1 834 kr 2 068 kr 1 999 kr 1 654 kr
Attributta headers, scope, abbr og axis
Desse attributta blir helst brukt til gje informasjon til brukarar av ikkje-visuelle nettlesarar. Dette inkluderar nettlesarar basert på talesyntese (og -gjenkjenning) eller braille. Slike nettlesarar blir mest brukt av blinde, men det er ikkje utenkeleg at òg sjåande kan ha nytte og glede av dei, ettersom teknologien blir utvikla og forbetra. Uansett er det di oppgåve å sørga for at sidene dine er tilgjengelege for alle brukergrupper.
Attributtet header
Me begynner med headers-attributtet. Dette attributtet bruker du til å spesifisera ei liste over overskriftsceller som gjeld for ei datacelle. Du
gjer namn til desse overskriftscellene med id-attributtet. Eit ufullstendig (frittståande) eksempel kan vera dette:
<thead>
<tr>
<th id="kundenummer">Kundenummer</th>
<th id="fornamn">Fornamn</th>
<th id="etternamn">Etternamn</th>
</tr>
</thead>
<tbody>
<tr>
<td id="k1" headers="kundenummer">001</td>
<td headers="k1 fornamn">Karl Ove</td>
<td headers="k1 etternamn">Hufthammer</td>
</tr>
</tbody>
Talebaserte nettlesarar kan då eventuelt lesa overskriftsinformasjonen for kvar celle. Det gjer det òg lettare å navigera i tabeller.
Attributtet scope
Men som du sikkert skjøner vil dette bli ganske tungvint og plasskrevande for store tabellar med mange rader og celler. Ofte
kan du då derfor heller bruka scope-attributtet. Dette spesifiserar eit sett med celler som ei overskriftscelle skal gjelda for. Det kan ta fire verdiar:
row- Cella gjev overskriftsinformasjon om alle cellene i samme rad.
col- Informasjon om cellene i same kolonne.
colgroup- Informasjon om cellene i samme kolonnegruppe (kolonnegruppa er definert ved
col- ellercolgroup-element). rowgroup- Informasjon om cellene i samme av «radgruppe». Ei radgruppe er enten eit
thead-,tbody- ellertfoot-element.
Eksemplet ovanfor kan altså òg skrivast slik:
<thead>
<tr>
<th scope="col">Kundenummer</th>
<th scope="col">Fornamn</th>
<th scope="col">Etternamn</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">001</td>
<td>Karl Ove</td>
<td>Hufthammer</td>
</tr>
</tbody>
Når ein berre har ei rad – som i dette eksemplet – vil ein ikkje spara noko serleg plass eller tid, men når ein har ein tabell med fleire rader vil dette fort lønna seg.
Attributtet abbr
Attributtet abbr skal du bruka for å gje ei forkorting av innhaldet i ei overskriftscelle. Dette er for at f.eks. talebaserte nettlesarar ikkje skal måtte gjenta heile innhaldet før kvar datacelle. Eit lite eksempel:
<th abbr="Nr.">Kundenummer</th>
Dette er òg nyttig for grafiske nettlesarar. Viss det ikkje er plass til heile overskriftscella, kan forkortinga visast i staden for.
Attributtet axis
Det finst òg eit ekstra attributt for å hjelpa brukarar med spesielle behov. Dette er axis-attributtet. Det er litt meir komplisert enn dei andre, men det kan vera nyttig å nemna det. Likevel er det etter mi meining
ikkje nødvendig.
Det skal brukast for å plassera ei celle i konseptuelle kategoriar som kan sjåast på som aksar i eit n-dimensjonalt rom! (Eg sa det var litt komplisert.)
I tillegg til å gje informasjon om kvar celle, skal dette attributtet hjelpa å gjera det mulig finna informasjon i ein tabell. Her ser du eit eksempel:
<table>
<thead>
<tr>
<th></th>
<th id="brutto" axis="pengar" abbr="Brutto">Bruttolønn</th>
<th id="trekk" axis="pengar" abbr="Trekk">Skattetrekk</th>
<th id="netto" axis="pengar" abbr="Netto">Nettolønn</th>
</tr>
</thead>
<tfoot>
<tr>
<th axis="sum">Sum</th>
<td headers="brutto">24 349</td>
<td headers="trekk">5 577</td>
<td headers="netto">18 722</td>
</tr>
</tfoot>
<tbody>
<tr>
<th id="d1" axis="dato" scope="rowgroup">15.1.99</th>
<th></th>
<th></th>
<th></th>
<tr>
<td id="p1" abbr="Såtendal">Kjellaug Såtendal</td>
<td headers="brutto p1 d1">5 934</td>
<td headers="trekk p1 d1">1 347</td>
<td headers="netto p1 d1">4 587</td>
</tr>
<tr>
<td id="p2" abbr="Tjong">Oline Tjong</td>
<td headers="brutto p2 d1">6 300</td>
<td headers="trekk p2 d1">1 479</td>
<td headers="netto p2 d1">4 821</td>
</tr>
<tr>
<td axis="sum" abbr="Delsum">Sum per 14. dag</td>
<td headers="brutto d1">12 234</td>
<td headers="trekk d1">2 826</td>
<td headers="netto d1">9 408</td>
</tr>
</tbody>
<tbody>
<tr>
<th id="d2" axis="dato" scope="rowgroup">1.2.99</th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td id="p3" abbr="Såtendal">Kjellaug Såtendal</td>
<td headers="brutto p3 d2">5 863</td>
<td headers="trekk p3 d2">1 331</td>
<td headers="netto p3 d2">4 532</td>
</tr>
<tr>
<td id="p4" abbr="Tjong">Oline Tjong</td>
<td headers="brutto p4 d2">6 252</td>
<td headers="trekk p4 d2">1 420</td>
<td headers="netto p4 d2">4 832</td>
</tr>
<tr>
<td axis="sum" abbr="Delsum">Sum per 14. dag</td>
<td headers="brutto d2">12 115</td>
<td headers="trekk d2">2 751</td>
<td headers="netto d2">9 364</td>
</tr>
</tbody>
</table>
Tabellen blir vist slik på din nettlesar (eg har brukt litt ekstra CSS her):
| Bruttolønn | Skattetrekk | Nettolønn | |
|---|---|---|---|
| Sum | 24 349 | 5 577 | 18 722 |
| 15.1.99 | |||
| Kjellaug Såtendal | 5 934 | 1 347 | 4 587 |
| Oline Tjong | 6 300 | 1 479 | 4 821 |
| Sum per 14. dag | 12 234 | 2 826 | 9 408 |
| 1.2.99 | |||
| Kjellaug Såtendal | 5 863 | 1 331 | 4 532 |
| Oline Tjong | 6 252 | 1 420 | 4 832 |
| Sum per 14. dag | 12 115 | 2 751 | 9 364 |
Dette eksemplet er kanskje ikkje det beste. Du kan sjå eit betre eksempel i HTML 4.01-spesifikasjonen.
Vel, eg trur det var alt du kan ønskja å veta om tabellar i XHTML. Lykke til med forfattinga!
