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

Først vil jeg vise jer, hvordan celler i en række kan forbindes kolonnevis. Dette resulterer i, at en kolonne i den pågældende række strækker sig over flere kolonner.

Et eksempel:

<table border="1">
   <tr>
      <th colspan="2">Aftaler</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>

Inden vi fortsætter, et ord om det anvendte th-element. Ved dette element markeres overskriftsceller. Browserne viser normalt disse celler som fed og centreret. Og her er resultatet i browseren:

Inden i starten af th tildeles attributten colspan. Som værdi forventes antallet af kolonner, som cellen skal strække sig over. Vær i alle tilfælde opmærksom på, at antallet af angivne kolonner er korrekt, da det ellers kan resultere i uheldige resultater. I det foreliggende eksempel bør overskriftslinjen markeret med th strække sig over to kolonner. Inden for de to øvrige linjer er der igen to rækker i hver.

En kommentar i forbindelse med at forbinde rækker. Tildel tabellerne en ramme (border) under udviklingsfasen. Så kan I straks se, om forbindelsen rent faktisk fungerer som ønsket.

Celler i en kolonne forbinde rækkevis

Ved hjælp af attributten rowspan kan flere celler i en kolonne forbindes med hinanden. Den pågældende celle strækker sig derefter over flere rækker i kolonnen. Igen et eksempel herpå:

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

I browseren ser det sådan ud:





Til attributten rowspan tildeles en numerisk værdi. Denne værdi bestemmer til sidst antallet af rækker i en kolonne, som en celle skal strække sig over. Også her er det selvfølgelig vigtigt, at antallet af angivne rækker faktisk er korrekt.

Celler samtidig forbinde række- og kolonnesvis

De to attributter rowspan og colspan kan også kombineres. På den måde kan celler defineres, som strækker sig over flere rækker og kolonner på én gang. Dette kan også bedst vises ved hjælp af et eksempel.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Lejlighed</th>
      <td>5 værelser</td>
   </tr>
   <tr>
      <td>154 m²</td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Parkering</td>
      <td>Gulvvarme</td>
   </tr>
</table>

Et kig i browseren giver følgende resultat:





Ved kombinationen af de to attributter er omhu naturligvis også påkrævet, for at antallet af celler faktisk er korrekt til sidst.

Label tabeller

En meget interessant måde at gøre tabeller mere forståelige på, tilbyder caption-elementet. For hermed kan en overskrift eller en forklaring tilføjes til en tabel. Indholdet af caption vises så udenfor tabellen, selvom definitionen sker i tabellen.

Her er en typisk anvendelse af caption:





Over tabellen vises en tabeloverskrift. Standardvisningen af overskriften er normalt centreret over tabellen. Dette kan naturligvis ændres individuelt via CSS.

Caption-elementet defineres direkte bag <table> tagget.

Her er den fulde syntaks for det tidligere viste eksempel:

<table border="1">
   <caption>Mediedata</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Emne</th>
         <th>Visninger</th>
         <th>Tendens</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">Fra 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>

Design tabeller

Tidligere i HTML-versioner var der mange attributter til at designe tabeller. Her er nogle eksempler på ting, der kunne styres ved hjælp af attributter. (Selvfølgelig understøtter browsere stadig disse attributter i dag. Dog bør de ikke længere bruges i HTML5).

• Ydre ramme

• Indre tabelrammer

• Bredde- og højdeangivelser

• Gitterlinjer

• Celleindholdets justering

• Farver

• Baggrundsbilleder

I kan allerede se, at alt faktisk kan styres gennem de passende HTML-attributter. Det følgende eksempel viser en tabel, hvor disse muligheder er blevet udnyttet fuldt ud:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">En</td>
      <td width="200" bgcolor="#00ffff">To</td>
      <td width="200">Tre</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Fire<</td>
      <td bgcolor="#996666">Fem</td>
      <td bgcolor="#003333">Seks</td>
   </tr>
 </table>

At se på resultatet giver det ønskede resultat.

Men selvom det ser ud som det burde, er syntaxen bagved langt fra effektiv. Det er bedre at styre tabelattributterne med CSS. Takket være nye CSS-egenskaber kan man ikke kun erstatte de gamle attributter med moderne syntaks. Yderligere funktionaliteter kan også implementeres. For eksempel kan man nu enkelt farve skiftevis tabellerækker.

I tidligere HTML- og CSS-tider var man nødt til at jonglere med koden for at opnå et sådant resultat. Hvis man konsekvent udnytter de muligheder, CSS nu tilbyder, er noget sådant nemt at implementere.

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

Som allerede beskrevet vil jeg gå detaljeret ind i CSS inden for denne serie.