HTML & CSS för nybörjare (Del 08): Tabeller (02)

Först vill jag visa er hur man kan ansluta celler kolumnvis inom en rad. På så sätt kan man få en kolumn inom den aktuella raden att sträcka sig över flera kolumner.

Ett exempel:

<table border="1">
   <tr>
      <th colspan="2">Tider</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 ord om det använda th-elementet. Genom detta element markeras rubrikceller. Webbplatser visar vanligtvis dessa celler feta och centrerade. Och här är resultatet i webbläsaren:

Inom den inledande th sätts attributet colspan. Som värde förväntas antalet kolumner som den aktuella cellen ska sträcka sig över. Se till att antalet angivna kolumner är korrekt, annars kan det leda till oönskade resultat. I det aktuella exemplet ska rubrikraden markerad av th sträcka sig över två kolumner. Inom de övriga två raderna innehåller varje två rader.

En anteckning relaterat till att ansluta rader. Tilldela tabellerna en ram (border) under utvecklingsfasen. Då kan du direkt se om anslutningen fungerar som önskat.

Celler i en kolumn ansluta radvis

Genom attributet rowspan kan flera celler i en kolumn anslutas. Den aktuella cellen sträcker sig sedan över flera rader i kolumnen. Här är ett exempel igen:

<table border="1">
   <tr>
      <th rowspan="2">Färg</th>
      <td>Blå</td>
   </tr>
   <tr>
      <td>Grön</td>
   </tr>
   <tr>
      <th rowspan="2">Storlek</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

I webbläsaren ser det ut så här:





Attributet rowspan tilldelas ett numeriskt värde. Detta bestämmer slutligen antalet rader i en kolumn som en cell ska sträcka sig över. Här gäller naturligtvis även att det angivna antalet rader faktiskt bör stämma.

Celler ansluta samtidigt rad- och kolumnvis

De två attributen rowspan och colspan kan också kombineras. På så sätt kan celler definieras som sträcker sig över flera rader och kolumner samtidigt. Även detta kan bäst illustreras med ett exempel.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Lägenhet</th>
      <td>5 rum</td>
   </tr>
   <tr>
      <td>154 kvm</td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Parkering</td>
      <td>Golvvärme</td>
   </tr>
</table>

I webbläsaren ger det följande resultat:





När du kombinerar de två attributen är det självklart också viktigt att se till att antalet celler matchar korrekt i slutändan.

Märka tabeller

Ett mycket intressant sätt att göra tabeller mer begripliga är genom caption-elementet. Genom detta kan en titel eller en beskrivning läggas till i en tabell. Innehållet i caption visas utanför tabellen även om dess definition sker i tabellen.

Här är en typisk användning för caption:





Ovanför tabellen visas en tabellrubrik. Rubriken är standardmässigt centrerad ovanför tabellen. Det kan förstås ändras individuellt med CSS.

caption-elementet definieras direkt efter öppnande <table>.

Här är den fullständiga syntaxen för det tidigare visas exemplet:

<table border="1">
   <caption>Mediedata</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Ämne</th>
         <th>Visningar</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>12 123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11 546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Skapa tabeller

För att skapa tabeller fanns det många attribut i tidigare versioner av HTML. Här är några exempel på saker som kunde styras med hjälp av attribut. (Självklart stöder webbläsarna fortfarande dessa attribut idag. I HTML5 bör de dock inte längre användas).

• Yttre ram

• Inre tabellramar

• Bredd och höjd

• Rutnätlinjer

• Justering av cellinnehåll

• Färger

• Bakgrundsbilder

Ni ser att faktiskt allt kan styras med hjälp av motsvarande HTML-attribut. Följande exempel visar en tabell där dessa möjligheter användes omfattande:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Ett</td>
      <td width="200" bgcolor="#00ffff">Två</td>
      <td width="200">Tre</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Fyra<</td>
      <td bgcolor="#996666">Fem</td>
      <td bgcolor="#003333">Sex</td>
   </tr>
 </table>

Genom att titta på resultatet erhålls det önskade resultatet.

Men även om det ser ut som det ska, är den underliggande syntaxen allt annat än effektiv. Det är bättre att styra tabellattributen med CSS. Tack vare nya CSS-egenskaper kan man inte bara ersätta de gamla attributen med modern syntax. Ytterligare funktionaliteter är också möjliga. Till exempel kan man numera enkelt färga tabellrader växelvis.

I de tidigare HTML- och CSS-tiderna var man tvungen att göra omfattande kodmanipulationer för ett sådant resultat. Om man nu konsekvent nyttjar de möjligheter som CSS numera erbjuder, är något sådant mycket enkelt att genomföra.

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

Som redan beskrivits tidigare kommer jag att gå in mer ingående på CSS inom ramen för denna serie.