HTML & CSS for nybegynnere (Del 08): Tabeller (02)

Først vil jeg vise dere hvordan celler i en rad kan kobles sammen kolonnevis. Dette gjør det mulig for en kolonne i den aktuelle raden å strekke seg over flere kolonner.

Et eksempel:

<table border="1">
   <tr>
      <th colspan="2">Tidspunkter</th>
   </tr>
   <tr>
      <td>11.4.2014</td>
      <td>12.4.2012</td>
   </tr>
   <tr>
      <td>13.4.2014</td>
      <td>14.4.2014</td>
   </tr>
   <tr>
      <td>15.4.2014</td>
      <td>16.4.2014</td>
   </tr>
</table>

Først et ord om det her brukte th-elementet. Ved hjelp av dette elementet markeres hodeseller. Nettlesere viser vanligvis disse cellene i fet og sentrert form. Og her er resultatet i nettleseren:

I det innledende th blir attributtet colspan satt. Verdien som forventes er antall kolonner cellen i øyeblikket skal strekke seg over. Pass på at antallet oppgitte kolonner stemmer, ellers kan det oppstå grimme resultater. I dette eksempelet skal hodesellen markert med th strekke seg over to kolonner. Innenfor de to andre radene er det igjen to rader hver.

Et annet tips i forbindelse med å koble sammen rader. Gi tabellene en ramme (border) under utviklingsfasen. Da ser dere alltid direkte om sammenkoblingen faktisk fungerer som ønsket.

Koble celler i en kolonne radvis

Ved hjelp av attributtet rowspan kan flere celler i en kolonne kobles sammen. Den aktuelle cellen strekker seg deretter over flere rader innenfor kolonnen. Også her et eksempel:

<table border="1">
   <tr>
      <th rowspan="2">Farge</th>
      <td>Blå</td>
   </tr>
   <tr>
      <td>Grønn</td>
   </tr>
   <tr>
      <th rowspan="2">Størrelse</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

I nettleseren ser det da slik ut:





Til attributtet rowspan tildeles en numerisk verdi. Denne bestemmer til slutt antallet rader innenfor en kolonne som en celle skal strekke seg over. Også her gjelder det selvfølgelig at antallet oppgitte rader bør stemme.

Koble celler samtidig rad- og kolonnevis

De to attributtene rowspan og colspan kan for øvrig kombineres. Dette gjør det mulig å definere celler som strekker seg samtidig over flere rader og kolonner. Dette vises også best ved hjelp av et eksempel.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Leilighet</th>
      <td>5 rom</td>
   </tr>
   <tr>
      <td>154 kvm</td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Parkering</td>
      <td>Gulvvarme</td>
   </tr>
</table>

Et blikk i nettleseren gir følgende resultat:





Ved kombinasjonen av de to attributtene er det selvfølgelig også viktig å være nøye, slik at antallet celler til slutt stemmer.

Gi tabeller en tittel

En veldig interessant måte å gjøre tabeller mer forståelige på, er ved hjelp av caption-elementet. For dette kan du legge til en overskrift eller en forklaring til en tabell. Innholdet i caption vises utenfor tabellen, selv om definisjonen skjer i tabellen.

Her er en typisk anvendelse for caption:





Over tabellen vises en tabelloverskrift. Standardinnstillingen er at overskriften er sentrert øverst i tabellen. Dette kan selvfølgelig endres individuelt via CSS.

caption-elementet defineres direkte bak den innledende <table>.

Her er den komplette syntaksen for det tidligere viste eksemplet:

<table border="1">
   <caption>Mediedata</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Tema</th>
         <th>Visninger</th>
         <th>Trend</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">Per juni 2014</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12.245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11.546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Designe tabellene

For å designe tabeller er det i tidligere HTML-versjoner mange attributter. Her er noen eksempler på ting som kunne styres ved hjelp av attributter. (Selvfølgelig støtter nettleserne disse attributtene fortsatt i dag. I HTML5 bør de imidlertid ikke lenger brukes).

• Ytre ramme

• Indre bordrammer

• Bredde- og høydeangivelser

• Rutenettlinjer

• Celletilholdets justering

• Farger

• Bakgrunnsbilder

Dere ser allerede at alt faktisk kan styres ved hjelp av de tilsvarende HTML-attributtene. Følgende eksempel viser en tabell der disse mulighetene er grundig brukt:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Eins</td>
      <td width="200" bgcolor="#00ffff">Zwei</td>
      <td width="200">Drei</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Vier<</td>
      <td bgcolor="#996666">Fünf</td>
      <td bgcolor="#003333">Sechs</td>
   </tr>
 </table>

En titt på resultatet gir det ønskede resultatet.

Men selv om det ser ut som det skal, er syntaksen bak alt annet enn effektiv. Det er bedre å kontrollere tabellegenskapene med CSS. Takk være nye CSS-egenskaper kan man ikke bare erstatte de gamle attributtene med moderne syntaks. Ekstra funksjonaliteter kan også implementeres. For eksempel kan en nå enkelt farge tabellrader vekselvis.

I tidligere HTML- og CSS-tider var det nødvendig å gjøre store kodemessige verdrehinger for et slikt resultat. Hvis man nå konsekvent benytter seg av de mulighetene CSS tilbyr, er noe slikt enkelt gjennomførbart.

tr:nth-child(even) {
   background-color: #fd9d5d;
}
 tr:nth-child(odd) {
   background-color: #c0f390;
}
 table {
   border-spacing: 0px;
}

Som allerede nevnt flere ganger, vil jeg gå grundig gjennom CSS som en del av denne serien.