Tabellar

Tabellar er mykje brukte for å forme utsjånaden på skjermsider. Også denne skjermsida bruker tabell. Det kan difor vere nyttig å sjå litt nærare på bruk av stilark i tabellar. For å få utbytte av dette kapitlet, bør du ha studert kapitlet om display, eller eventuelt slå opp der når du møter ukjende omgrep som har med display å gjere.

HTML

Først ei lita påminning om den generelle oppbygginga av ein tabell.

<tr> definerer rad, <th> definerer hovud og <td> definerer datacellene i tabellen.

(Eigentleg er slutt-taggane for <th> og <td> ikkje nødvendige her, men er tatt med for å gjere oppdelinga tydelegare. Linja med DOCTYPE osv. øvst i html-koden må vere med for at Internet Explorer skal «forstå» alle kodene i stilarket når vi tar det i bruk).

Dette vil gi utskrifta

Stilark

Så langt har alt vore rein html-kode. Nå er det på tide å formatere tabellen ved hjelp av stilarket.

Vi bruker i første omgang stilarket

som gir dette resultatet:

Elementa er tydeleg skilde. Kvart element har si eiga ramme (border). Dette fordi eigenskapen border-collapse har normalverdien separate som betyr at rammene skal visast kvar for seg.

Set vi inn table {border-collapse: collapse} i stilarket (det mellom /* og */  er bare ei påminning om den andre verdien eigenskapen kan ha)

blir rammene slått saman slik: 

Er du observant, vil du sjå at den blå ramma for <tr> ikkje er synleg i dei to eksempla. Under elles like vilkår blir denne overskrive av dei to andre rammene. Den høgre kanten av ramma rundt «Hovud» dominerer på ramma rundt cellene. Legg også merke til at hovudramma rundt tabellen overskriv alt som kjem i vegen.

Er ramma for <tr> breiare enn dei andre rammene, eller av ein annan type, t.d. solid, vil det vere denne ramma som blir teikna. I eksemplet nedanfor er stilarket forandra til

som gir resultatet

Nå er den delen av ramma rundt cellene som er samanfallande med ramma rundt rada blitt overskrive av rada. Bare dei loddrette cellerammene er synlege. Meir om handtering av samanfallande rammer seinare under rammekonfliktar, men først litt om collapse.

Kollapsing

Grunnen til at vi i det første eksemplet ovanfor fekk separate rammer er at normalverdien for border-collapse er separate medan border-collapse: collapse gir samanfallande rammer. Du kan altså styre rammevisinga ved å skifte mellom desse to verdiane.

I tillegg kan du bestemme avstanden mellom rammene med eigenskapen border-spacing. Du bruker her dei vanlege måleeiningane, dvs. i praksis px eller em. Dersom det er oppgitt ein verdi, er dette rammeavstanden rundt elementet. Er det oppgitt to verdiar, gjeld den første verdien den vassrette avstanden og den andre verdien den loddrette avstanden. Rammeavstandane kan ikkje vere negative.

Tomme celler kan anten bli viste slik andre celler blir viste, med rammer og det heile, eller dei kan «forsvinne» totalt utan å vise korkje rammer eller bakgrunn. Dette vil sjølvsagt påverke layouten. Kommandoane er

Rammekonfliktar

Når to element støyter mot kvarandre kan det vere eit problem kva ramme som skal visast. I CSS er det noen reglar for dette. Dersom eit av elementa er sett til border-style: hidden vil dette dominere over andre innstillingar slik at ramma blir usynleg. Normalverdien border-style: none har lågast prioritet slik at bare det elementet som er sett til denne verdien vil mangle ramme.

Dersom ingen av elementa er sett til  border-style: hidden og minst eitt av dei er ikkje er sett til  border-style: none, vil ein breiare border dominere over ein smalare. Er to rammer også like breie, vil verdiane bestemme kven som skal dominere. Rekkefølgja er frå den mest dominante double via solid, dashed, dotted, ridge, outset, groove med inset som den med lågast prioritet.

Er einaste skilnaden mellom rammene ulike fargar, vil det elementet som ligg øvst i lagstabelen (sjå nedanfor) dominere over det som ligg under. Dersom det blir rammekonflikt mellom to likeverdige element, vil det elementet som ligg lengst til venstre på skjermen dominere. Er også desse to like, vil det elementet som ligg over bestemme. (Føreset leseretning venstre mot høgre). 

Lagstabelen

Tabellane er tenkt bygde opp som lag i ein lagstabel. Du kan tenke deg ein stabel med plastfolier. Desse foliane kan vere gjennomsiktige eller farga eller innehalde eit bilde. Det som er synleg på skjermen er denne lagstabelen sett ovanfrå.

Nedst i stabelen ligg tabell-laget. Det er dette som blir definert med selektoren table. Ein eventuell farge eller anna innslag på dette laget er bare synleg dersom laga over er gjennomsiktige (transparent). Over dette ligg dei andre foliane med celler på toppen.

Det er dette som gjer at dersom du gir ei celle ein bestemt bakgrunn, tekst eller noe anna, vil dette bli vist i cella uavhengig av innhaldet i dei to andre laga.

Fast format

Når tabellane blir brukte til sidelayout, kan det vere ein fordel at breidda på tabellen er fast og ikkje styrt av innhaldet på sida. Dette kan du oppnå ved å setje eigenskapen table-layout til fixed i table-selektoren slik:

Vil du derimot ha ein tabell med varierande breidde i høve til innhaldet, set du verdien til table-layout: auto.

Litt matematikk

Utrekning av kor mykje plass ei rad treng (row-width) på skjermen følgjer denne formelen:

bw = border-width (rammebreidde), pl = padding-left, pr = padding-right.

der dei senka tala (_n) refererer til cellenummeret. Cellenummer n er den siste cella i rada.

Utgangspunktet for rammene er at senteret i ramma ligg på dei tenkte linjene som ligg rundt kvart av elementa i tabellen (dvs. celle, rad, radgruppe, kolonne og kolonnegruppe). Dersom utrekningane gir eit tal som ikkje kan brukast, vil talet bli avrunda av systemet, ikkje av stilarket. Difor kan resultatet bli litt ulikt frå operativsystem til operativsystem.

Oppbygginga av ei rad i tabellen. (For at du skal kjenne igjen kommandoane har eg brukt dei engelske termane). Også denne etter ein ide på http://www.w3.org/.

border-style

Oversyn over verdiane som kan brukast i border-style. Prioritet er kva prioritet verdien har under elles like tilhøve.

For eksempel på korleis dei ulike rammene ser ut, sjå rammer.

vertical-align

Innhaldet i datacellene kan flyttast opp og ned i cellene med eigenskapen (property) vertical-align. Legg merke til at denne eigenskapen verkar annleis i dataceller i ein tabell enn i andre samanhengar. Difor litt presisering.

Innhaldet i ei celle kan plasserast nedst, i midten eller øvst i cella. I tillegg også på basislinja (base line) som er det same som basislinja i linjeboksen eller tabellrada cella høyrer til. Dersom det ikkje finst noen slike boksar eller rader, er basislinja det same som den nedste linja i cella.

vertical-align kan i tabellar ha desse verdiane

For ordens skuld: Andre verdiar enn dei som er nemnde ovanfor vil setje verdien til baseline.

Ei teikning frå  www.w3.org er kanskje den beste måten å forklare dette på:

Teikninga viser ei rad med 5 celler der innhaldet er plassert ved hjelp av vertical-align.

Celle 1 er innretta (aligned) etter basislinja for rada og utvida til like under toppen av rada.

Celle 2 er også innretta etter basislinja for rada, men utvida til litt over toppen av rada.

Celle 3 er innretta etter toppen av rada og utvida til litt over midten av rada.

Celle 4 er innretta etter botnen av rada og utvida til litt over midten av rada.

Celle 5 er innretta etter midten av rada utan å røre toppen og botnen av rada.

For å hindre problem, blir cellene innretta etter dette mønsteret:

1. Celler innretta etter baseline. Dette definerer også basislinja for rada.
2. Celler innretta etter top. Dette definerer også toppen av rada.
3. Rada har altså nå topp, ei mogleg basislinje og ei førebels høgde frå toppen og ned til den lågaste cellebotnen.
4. Dersom noen av dei resterande cellene er høgare enn rada, blir høgda i rada utvida ved å senke botnen.
5. Resten av cellene blir plasserte.

Innhaldet i cellene blir justert vassrett ved hjelp av text-align.

ID

La du merke til at radene (<tr>) i html-koden øvst på sida også inneheld ein ID? Rad nr. 1 har ID="rad1" osv. Dette fordi vi i stilarket også skal kunne definere kvar rad for seg. Sjølvsagt kunne vi sett ID på andre element i tabellen, men eg valde å avgrense det til radene for ikkje å blande inn alt for mange nye argument.

Det som er forandra er merka med blått. Taggen i html-koden med ID blir i stilarket merka med «#» Selektoren «tr#rad1» i stilarket viser altså til ID="rad1" i html-koden. Alle eigenskapane definerte for denne selektoren gjeld altså den <tr>-taggen med id=rad1.

For perfeksjonisten

I utgangspunktet er tabellelementa i HTML 4 definert slik:

Med stilarket kan du omdefiner eller legge til eigenskapar for å lage den tabellen du ønskjer.

I prinsippet er cellene barnebarn av rader og barn av kolonner, men i html-kode er cellene bare barn av radene, utan å vere ætlingar av kolonnene. Noen av eigenskapane følgjer eigne reglar når dei gjeld for tabellar: