Tabeller

Obs!
Alla exempel öppnas i ett nytt fönster!

1. Inledning

Denna text är hämtad från kapitel 17 i specifikationen och handlar om olika sätt att styra boxarna TABLE, TD, CAPTION, m.fl.

Den som vill styra tabeller m.h.a stilmallar har förmodligen insett vilken tids- och platsvinst man kan göra. Med vanlig HTML måste man nämligen skriva inställningar för justering, teckensnitt, färger och liknande i varje tabellcell. Med en stilmall kan man både krympa tiden som går åt till detta, samt få ner koden till ett minimum.

Trots bekvämligheten finns det dock något jag inte tycker att man skall ändra med stilmallar och det är bakgrundsfärgen. Detta gäller särskilt då man använder en extern stilmall. Den som sparar ner sidan gör det ofta utan att få med stilmallen och tittar man sedan på den offline, kommer den inte att ha rätt färger. Även den som har en äldre webbläsare kommer att få en felaktig version på sin skärm.

Det finns tyvärr många fel man kan göra. Man bör därför noga kontrollera så att sidan ser ok ut även då stilmallen inte laddats. Särskilt viktigt är det naturligtvis att texten harmoniserar mot bakgrundsfärgen.

I den fortsatta texten räknar jag med att du är väl insatt i kodning av tabeller. Läs gärna mer om just detta på sidorna Tabeller i Html. Gå dit >

2. Ett exempel på grundinställning

I stort sett alla de kommandon du läst om på de tidigare sidorna fungerar också för tabeller. Därför tänkte jag först presentera en grundinställning, som jag själv ofta använder. Den kan man sedan bygga vidare på om man vill:

TABLE { font-family: Verdana, Arial, sans-serif }
TR, TD { text-align: left; border: none }
TH { font-family: Verdana, Arial, sans-serif; font-size: larger; font-weight: bold }

Kolla hur de ser ut i praktiken >>

Teckensnittet bör man försöka styra, eftersom många webbläsare gärna visar det med en annan font i just tabeller, än den som är angiven i resten av dokumentet. Det är t.ex inte ovanligt att texten i en tabell står med Times New Roman, trots att man ser Verdana eller liknande på resten av sidan.

Även justeringen kan vara lämplig att styra, men tyvärr gör en del webbläsare som de själva vill ändå. Då måste man gå in i HTML-koden och styra placeringen manuellt.

Man kan också styra border, margin och padding, men bara om man vill ändra i grundinställningen. Lägg också märke till att jag i exemplet inte försökt styra bakgrundsfärgen. Denna anger jag i stället i TABLE (om jag vill ha samma färg överallt) eller i TD (för varje cell), m.h.a bgcolor-attributet. Däremot kan man oftast styra textfärgen, om man tycker att det är lämpligt.

Märkligt nog fungerar det bättre att styra innehållet i enskilda tabellceller, dvs TD, snarare än att försöka göra det i tabellrader, TR. Detta trots att tabellmodellerna i såväl HTML 4.0 och CSS2 är radstyrda (row primary) snarare än kolumnstyrda.

I specifikationens kapitel 17.2 står det t.ex att "Kolumnerna anpassas först efter det att alla rader specificerats" och i kapitel 17.3 kan man läsa att "tabellceller härleds alltid ur rader, men aldrig ur kolumner".

I praktiken fungerar dock styrningen av kolumner och celler betydligt bättre än styrningen av rader.

3. Tabellboxen (TABLE)

Det finns några olika kommandon för att styra tabellens storlek och placering. Här är första exemplet:

table-layout: värde

Detta kommando har antingen värdet auto eller fixed. I första fallet anpassas tabellen efter innehållet. I andra fallet fixeras tabellens bredd och höjd.

Man bör vara ytterst försiktig med alla inställningar av den här typen. I princip skall man inte använda dem om inte sidan visas korrekt annars. Undvik alltså table-layout och utnyttja i stället de normala funktionerna i HTML.

display: värde

Som jag berättat tidigare kan man i teorin styra hur tabellen visas på sidan m.h.a display. Man kan antingen få tabellen att visas som ett block, vilket är default, eller som inbäddad (inline). Det sistnämnda fungerar dock inte i webbläsarna.

Här följer ett exempel på styrning av tabellens layout. Se det som ett test och inte som ett seriöst förslag:

TABLE {
display: inline;
table-layout: fixed;
width: 200;
height: 500;
float: left;
vertical-align: middle;
}

Kolla hur de ser ut i praktiken >>

Med detta kommando kan man styra boxar i block, t.ex tabeller i BODY eller textens placering i höjdled i en tabellcell. Värdena top, bottom eller middle är samma inställningar som tidigare.

För tabellceller finns även värdet baseline, som innebär att texten i en tabellcell i en kolumn placeras på samma höjd som texten i en annan cell i en kolumn bredvid. Justeringen sker efter baslinjen.

Tanken bakom det sistnämnda är att texten i två kolumner eller spalter skall lägga sig på samma höjd, vilket ger en mer lättläst text och snyggare layout.

4. Rubriker (CAPTION)

I HTML finns ett element som heter CAPTION. Det skapar en rubrik för tabellen och placeras alltid direkt efter TABLE-elementet. Jag använder sällan CAPTION, eftersom det skapar rubriker med olika utseenden och olika placering i olika webbläsare. I CSS2 finns emellertid vissa möjligheter att styra detta.

caption-side: värde

Detta kommando placerar rubriken på valfrit ställe inuti TABLE-boxen. Möjliga värden är:

top

Placerar rubriken direkt ovanför tabellen

bottom

Placerar rubriken direkt nedanför tabellen

left

Placerar rubriken till vänster i tabellboxen

right

Placerar rubriken till höger i tabellboxen

Kolla hur de ser ut i praktiken >>

Vad jag kan se går det inte att kombinera dessa värden så att man t.ex placerar rubriken längst nere till höger. I kapitel 17.4.1 står dock att man med fördel kan använda sig av width, text-align och vertical-align, för att styra rubrikens storlek och justering.

Här följer ett exempel på en inställning som går bra att använda som bildtext. Värdet för margin får rubriken att flyta in i tabellens vänstermarginal, när tabellen är centrerad, dvs har margin-left satt till auto och BODY margin satt till 8em:

CAPTION {
caption-side: left;
margin: -8em;
width: 8em;
text-align: right;
vertical-align: bottom;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: lighter;
}

Kolla hur de ser ut i praktiken >>

Dessvärre fungerar det så dåligt att jag nog ändå rekommenderar dig att använda vanlig HTML om du vill vara säker på att få texten på rätt ställe.

5. Border

Tabellens kanter (border) kan förändras på olika sätt, enligt följande:

border-collapse: separate

Här kan man använda antingen separate eller collapse. Det första används ihop med border-spacing och innebär att man ger de olika tabellcellerna (etc) var sin kant (border). Det andra, collapse, beskriver jag längre ner på den här sidan.

Det går också att ställa in hur breda kanterna på tabellen skall vara. Man kan också göra inställningar för olika typer av skuggor (outset och inset). I specifikationen finns följande exempel:

TABLE { border: outset 10 pt;
border-collapse: separate;
border-spacing: 15pt;
}

TD { border: inset 5 pt }

Här bestämmer vi att tabellen skall ha separata kanter. Dels skall yttre kanten skjuta ut 10 punkter. Dels skall de inre kanterna vara 15 punkter breda. Dels skall tabellcellernas inre kanter vara 5 punkter breda.

Kolla hur de ser ut i praktiken >>

border-collapse: collapse

Denna styrning ger större möjligheter än separate, eftersom man får kontroll över samtliga kanter på tabellens samtliga celler. Man styr som vanligt med border och dess varianter, alltså border-top, osv.

TABLE { border: 5px solid yellow;
border-collapse: collapse;
}

TD { border: 1px dashed red; padding: 1em; }

Kolla hur de ser ut i praktiken >>

Finessen med denna möjlighet kan man ju diskutera. Risken finns nämligen alltid att man överarbetar tabellens layout så att den blir mer svårläst. Dessutom fungerar bakgrundsfärger oftast bättre än att förändra kanterna på tabeller.

Ändå innehåller specifikationen fler möjligheter att styra kanterna på tabeller:

border-style: värde

Här kan värdet vara antingen none (ingen kant), dotted (punkter), dashed (linjerad), solid (heldragen), double (dubbel), groove (nersänkt i underlaget), ridge (upphöjd).

För alla tabellceller utan innehåll finns också ett specialkommando, som skrivs in i bestämningen av TD:

empty-cells: värde

Möjliga värden är show, som visar cellen som tom (nersänkt i tabellen), eller hide, som i stället ger en plan, ej nersänkt yta. Problemet med detta kommando är emellertid att vissa webbläsare tolkar det som display:none, vilket alltså innebär att tabellen inte visas alls...