Tabeller med HTML

Tabeller består af tre tags for at fungere. For at holde styr på sin tabel, især når man laver de første, er det praktisk at tænke på det som lag.

Den yderste tag er <TABLE>, som fortæller at her kommer en tabel. Koden er:



Det næste man fortæller er rækkerne. Der er ikke en tag for søjler, så man arbejder i rækker, som man derefter underinddeler i celler. Tag'en for rækker hedder <TR> (table row), så hvis vi i vores tabel laver tre rækker bliver det



Cellerne i tabellen får man ved at dele rækkerne ned med tag'en <TD> (table data). En række med tre celler vil se således ud:



Hvis man lægger det op på en linje og anbringer i tabellen fra før, får man en tabel med 3x3 celler:



Tabellen som den ser ud nu, er ikke til at se, med mindre man giver cellerne et indhold. Hvis vi prøver at lægge tallene 1 til 9 ind i de ni celler, ser det således ud:



Der er ingen cellelinjer, og cellernes størrelse er tilpasset indholdet. Almindeligvis skal der noget styling på, før tabellen reelt blive anvendelig, så vi prøver at style den lidt.

Ved at style sin tabel en lille smule, kan man opnå mange gode effekter, der gør siden mere læselig.

Cellelinjer
Det første der er rart at gøre med en tabel, er at få nogle linjer på. Dette gøres ved at style de enkelte felter, dvs. <TD>. Man skal som minimum fortælle, hvordan kanten skal være, f.eks. en fuldt optrukken linje eller en stiplet linje eller hvad man nu gerne vil have. Man skal også som minimum definere bredden på linjen. En fuldt optrukken linje i bredden 1 pixel ser således ud:



Den resulterende tabel ved ændringen ser således ud:



Som det ses, sidder cellerne i tabellen ikke sammen. Dette er af uransagelige grunde standard for de fleste nyere browsere. Hvis man vil have cellerne til at sidde sammen, hvilket er det mest almindelige, gøres dette med STYLE="border-collapse:collapse". Før HTML 5 har man også kunnet anvende CELLSPACING. I praksis fungerer CELLSPACING indtil videre også med HTML 5, men det anbefales ikke at bruge den. Skal man have en tabel med afstand mellem cellerne, skal det gøre med border-collapse:separate og en afstand sat med border-spacing.

Bemærk: Fordi der ikke er 100% konsensus om default-værdien for border-collapse, og man ikke kan forvente at der bliver det, skal man altid specificere denne for tabellerne.

Et levn fra gamle dage er attributten BORDER til TABLE-tag'en. Med denne kan man sætte alle linjer i tabellen til den samme tykkelse. Den skal man holde sig langt fra. De forskellige browsere fortolker den forskelligt, og hver gang man laver en justering et sted for at kompensere for forskellighederne, saboterer det noget andet i en anden del af koden.

For en tabel som den vi lige har lavet, hvor cellerne sidder sammen med border-collapse, laves TABLE-tag'en således:



Den resulterende tabel ser således ud:



Omvendt vil TABLE-tag'en til en tabel med celleafstanden 5px se således ud:



Den resulterende tabel ser således ud:



Sort er default farven. Skal man have en anden farve, skal man også definere dette. Koden for vores tabel med alle styles, kan virke uoverskuelig, og under normale omstændigheder bruger man et kunstgreb med style sheets til at gøre koden mere overskuelig. Her beholder vi den fuldt udskrevne programmering, så det er til at se hvilken kode der giver hvad.


Tit når man laver en tabel, så bruger man den øverste række til overskrifter, og man vil gerne have en lidt tykkere linje, f.eks. 3px, mellem første og anden række. Stylen border-width er samlet for alle fire sider af cellen, og kan splittes op i border-top, border-bottom, border-left, og border-right. Der er to måder at løse problemet på. Man kan pinde det ud som border-top:1px, border-bottom:3px, border-left:1px og border-right:1px eller fortsætte med border-width, hvor man så skriver border-width:1px 1px 3px 1px. Det at pinde de fire sider ud, fungerer bedst, når du kun skal specificere en eller to sider. Alle sider, som vi gør her, så er border-width den bedste løsning. Ved border-width skal man huske alle fire sider, eller går det galt med at læse koden rigtigt.

Koden for cellerne i den øverste linje ser nu således ud:



De øvrige cellers kode ser ud som før. Den resulterende tabel, efter ændringen, ser således ud:



Cellebredde og -højde
Når man laver en tabel, vil den som standard tage størrelse efter den længste tekststreng i en celle. Hvis indholdet i cellerne imidlertid fylder mere, end skærmens bredde vil cellerne tage bredde og højde efter indholdet af de forskellige celler. Dette er imidlertid sjældent det udseende man ønsker. For at få noget der er pænt og overskueligt at se på, giver man derfor cellerne en fast bredde. Der findes forskellige fremgangsmåder her, og ikke alle er lige vellykkede. Dette er en af dem der fungerer godt:

Det første man gør, er at definere hele tabellens bredde. Dette gør man i TABLE-tag'en. Hvis vil have en total bredde på 400 pixels kan man enten anvende attributten WIDTH, hvor syntaxen er WIDTH="400", eller man kan bruge attributten STYLE, hvor syntaxen er STYLE="width:400px". Der anbefales generelt at bruge STYLE til HTML 5, men indtil videre, er brugen af den ene eller anden attribut er en smagssag. Til eksemplet er der brugt STYLE, og resultatet bliver således.



Det næste man gør, er at definere størrelserne på cellerne. Her er tricket, at på en af søjlerne definerer man ikke en bredde. Hvis man har defineret bredden af hele tabellen og to af søjlerne, er den sidste søjles bredde defineret af det der er tilbage af hele tabellens bredde. Til simple tabeller betyder det ikke så meget, om man gør det på denne måde eller ved at definere en bredde på alle tre søjler. Det man skal være opmærksom på, er at bredderne der defineres, ikke konflikter med hinanden f.eks. at man definerer en tabelbredde som er bredere end de tre søjler til sammen. Hvis man skal til at lave noget mere avanceret som f.eks. at samle celler, som kommer i det næste afsnit, er det at en af søjlerne ikke har en udspecificeret bredde, et trick der kan spare en for mange bryderier.

Vi prøver nu at lægge STYLE="width:100px" på de sidste to søjler. Så kommer tabellen til at se således ud:



Højden på cellerne er, ligesom bredden defineret ud fra indholdet. Hvis man vil have en anden højde, følger fremgangsmåde de samme principper som vidde, det hedder bare HEIGHT i stedet for WIDTH. En højde på 30px kan således laves med attributten HEIGHT="30px" eller STYLE-attributten som STYLE="height:30px", og som med vidden, anbefales det generelt at bruge STYLE i stedet for attributten HEIGHT. Højden kan sættes på både TR-tag'en og TD-tag'en. Et godt trick er at lægge højden på TR-tag'en. Intuitivt er højden noget der hører til hele rækken, dvs. TR-tag'en, og så holder man TD-tag'en mere overskuelig. Resultatet, her lavet med STYLE="height:30px" på TR-tag'en, bliver således:




Sammenlægning af celler
I tabeller er der ofte brug for at lægge celler sammen, både vandret og lodret. I HTML skal man være opmærksom på, at her har mange browsere nogle begrænsninger, der kræver lidt kreativ snilde.

Vandret sammenlægning af celler sker ved at man fjerner de celler der skal lægges sammen, undtagen en. I den tilbageværende celle, specificerer man med attributten COLSPAN, det antal celler man lægger sammen, dvs. COLSPAN="2" ved 2 celler. Hvis vi prøver at fusionere de to celler med tallene 5 og 6, så ser den grundliggende tabelkode, uden al formateringen, således ud.



På vores tabel, som vi har udviklet på, kommer det til at se således ud:




Lodret sammenlægning af celler sker ved at man fjerner de celler der skal lægges sammen, undtagen den øverste, og i den tilbageværende celle, specificerer man med attributten ROWSPAN antallet af celler der fusioneres, dvs. ROWSPAN="2" ved 2 celler. Hvis vi prøver at fusionere de to celler med tallene 4 og 7, så ser den grundliggende tabelkode fra før, således ud.



I vores tabel, som vi har udviklet på, kommer det til at se således ud:




Placering af teksten i cellerne
En af de ting der kan gøre en tabel svær at læse, er når teksten er for tæt på cellernes linjer. Det virker forkrampet, og i store tabeller flyder linjerne sammen når man skal læse. Dette løses med padding. Der er to måder at gøre det på, attributten CELLPADDING og STYLE="padding: ". CELLPADDING er et levn fra gamle dage, og selv om den stadig fungerer under HTML 5, er det en af de attributter man kan forvente bliver afviklet, fordi effekten også kan laves med STYLE, og med STYLE kan man opnå en langt bedre styring af sin padding. En tabel med STYLE="padding:5px" på alle celler (alle TD-tags) ser således ud:




På den første linje, bliver cellens padding i top og bunde opslugt af den definerede højde på 30px, så her er resultatet, at de tre rækker ser lige høje ud. Her vil man normalt gå ind og sætte højden til f.eks. 45px for at genskabe højdeforskellen mellem den første linje og resten af tabellen.

Har man brug for mere specifik styling, skal man ned og definere på de enkelte celler. Her kan man, analogt med tykkelsen af cellelinjerne, sætte de fire sider STYLE="padding:5px 0px 5px 5px". Hvis man bedre kan lide at have det pindet ud, eller man f.eks. kun har brug for padding på venstre side af tallene, findes padding under STYLE også som padding-left, padding-right, padding-top, padding-bottom.


De tre tags til tabeller, fungerer som tags for tekstafsnit. Man kan derfor lave højrestillet, venstrestillet og centreret skrift ved at definere det under STYLE. Ligeledes kan man specificere vertikal placering. Under STYLE kan man sætte vertical-align til top, center og bottom. Default er center, som det kan ses af tabellen vi har lavet.

Til hjælp med styling af tabellerne har man tags til opdeling af tabellen. Det er table header, <THEAD>, table body, <TBODY>, og table footer, <TFOOT>.

Umiddelbart giver de ikke nogen fordel i forhold til at lave en klasse til sin <TR>, så under normale omstændigheder er det en smagssag om man vil styre stylingen med en klasse eller en tag. Ved meget store tabeller, hvor man vil holde header og footer fastlåst, og have scrolling på tabellens data, kan man med fordel bruge <TBODY STYLE="height:(ønskede højde); overflow:auto;"> til at opnå denne effekt.

Der er ét sted hvor de tre tag er essentielle: Hvis man skal danne en tabel med JavaScript og bruger createElement. Der er flere browsere der ikke kan finde ud af at sammensætte en tabel med JavaScript, hvis der ikke efter document.createElement('TABLE') er en document.createElement('TBODY') (eller THEAD/TFOOT efter behov), inden document.createElement('TR'). Der er ikke nogen god forklaring på dette fænomen, og det er tilsyneladende ikke alle browsere der har dette problem.