Listor och tabeller i HTML

Innehåll

På denna hemsida beskrivs punktlistor och tabeller. Här beskrivs också hur man kan använda tabeller för att skapa ett rutnät för design, s.k. platshållare.

• Numrerade och onumrerade listor
• Tabeller med data
• Tabeller som platshållare

Punktlistor kan fås antingen som numrerade eller onumrerade listor. Exempel på en onumrerad punktlista är t.ex. innehållsförteckningen ovan för denna hemsida.

Taggen för de onumrerade listorna är <ul> (eng. unordered list) och varje punkt får då standard en ifylld cirkel först på raden (precis som i innehållsförteckningen ovan). ul-taggen används för att avgränsa listan, d.v.s. tala om var den börjar och slutar, och varje punkt i listan markeras med taggen <li> (eng. list item).

Exempel på lista med 2 listelement.

• Punkt 1 i listan
• Punkt 2 i listan

<ul>
  <li>Punkt 1 i listan</li>
  <li>Punkt 2 i listan</li>
</ul>

Listor är tillåtna inom andra listor, s.k. nästlade listor, och webbläsaren visar då oftast den inre listans punkter med ett annat utseende.

Exempel med nästlad lista.

• Punkt 1 i yttre lista
  • Punkt 1 i inre lista
  • Punkt 2 i inre lista
• Punkt 2 i yttre lista

Exempel visar på att den inre listan en annan typ av utseende på punkterna.

<ul>
  <li>Punkt 1 i yttre lista
    <ul>
      <li>Punkt 1 i inre lista</li>
      <li>Punkt 2 i inre lista</li>
    </ul>
  </li>
  <li>Punkt 2 i yttre lista</li>
</ul>

Det går att ändra punktens utseende genom att använda attributet type. Giltiga värden för attributet är "circle" och "square".

<ul type="square">
 <li>Punkt nummer ett</li>
</ul>

Numrerade listor fungera som de onumrerade med skillnaden att man använder taggen <ol> (eng. ordered list) istället för <UL> och att punkterna ersätts med siffror.

Genom att skriva om exemplet med nästlade onumrerade listor ovan och ersätta <ul> med <ol> ger följande kod

ger följande resultat

1. Punkt 1 i yttre lista
   1. Punkt 1 i inre lista
   2. Punkt 2 i inre lista
2. Punkt 2 i yttre lista

Till skillnad från onumrerade listor så ges inte den inre listan en annan typ av numrering.

<ol>
  <li>Punkt 1 i yttre lista
    <ol>
      <li>Punkt 1 i inre lista</li>
      <li>Punkt 2 i inre lista</li>
    </ol>
  </li>
  <li>Punkt 2 i yttre lista</li>
</ol>

Som standard visas de numrerade listorna med (arabiska) siffror. Vill vi använda en annan typ av numrering så kan vi använda attributet type i ul-taggen för att ändra formatet på numreringen. Nedanstående tabell visar vilket värde type ska ha för att ge respektive typ av numrering.

<ol type="i">
  <li>Punkt 1 i en lista
    med romerska siffror</li>
</ol>

1. Punkt 1 i en lista med romerska siffror
2. Punkt 2 i en lista med romerska siffror
3. Punkt 3 i en lista med romerska siffror
4. Punkt 4 i en lista med romerska siffror
5. Punkt 5 i en lista med romerska siffror

Problemet med numrerade listor är att punkterna måste ingå i samma lista för att kontinuerlig numrering ska fungera. Om vi t.ex. vill ha en tabell mitt i en lista så måste listan delas i två delar. För att fortsätta numreringen från en annan lista kan vi använda attributet start i ol-taggen för att ange startvärde i lista två. Värdet för attributet start måste vara ett positivt tal. Koden för en lista som börjar numrera från 6 blir följande:

<ol start="6">
  <li>Punkt 6</li>
</ol>

6. Punkt 6
7. Punkt 7
8. Punkt 8

Tabeller är användbart till mycket, bl.a. för att strukturera data men även, som visas i nästa avsnitt, för att skapa s.k. platshållare för design. I detta avsnitt behandlas hur man skapar tabeller för att presentera data i någon form.

Tabeller i HTML består främst av tre taggar

<table>

- markerar start och slut på tabell.

<tr>

(eng. table row) - motsvarar en rad i tabellen.

<td>

(eng. table data) - motsvarar en cell (kolumn) i en rad i tabellen.

För att skapa en tabell så börjar vi med att ange start och slut på tabellen med <table>. Därefter märker vi upp raderna (med <tr>) inom tabellen och sist cellerna (med <td>) i raderna. När vi skapar en tabell måste (bör) antalet celler  vara desamma i varje rad för att tabellen ska visas på ett riktigt sätt. (Sist i detta avsnitt ska vi se hur vi kan sammanfoga celler för att få olika antal celler i raderna.)

Antalet rader i en tabell motsvaras alltså av antalet tr-taggar och antalet kolumner motsvaras av antalet td-taggar.

Enkel tabell med två rader och två kolumner. (Ordet kolumn har förkortats till "kol." i två celler för att visa hur webbläsare presenterar celler med olika längd. Utseende på exempel nedan har, eller kan ha, påverkats av CSS-ramverk som används för sida.)

<table>
  <tr>
    <td>[Rad 1 - kol. 1]</td>
    <td>[Rad 1 - kolumn 2</td>
  </tr>
  <tr>
    <td>[Rad 2 - kolumn 1]</td>
    <td>[Rad 2 - kol. 2]</td>
  </tr>
</table>

Tabellens bredd (och höjd) anpassas, som standard, automatiskt till den cell med bl.a. längst (resp. flest rader) text i en kolumn (rad). Även de kolumnernas bredd anpassas individuellt till den text som är längst i cellerna. Bredden på de olika kolumnerna anpassa alltså till innehållet i respektive kolumns celler. Längre ner ska vi se hur man kan styra bredden (och höjden) på tabeller och celler (rader).

Som exemplet ovan (antagligen) visar, så tenderar webbläsare (idag) till att visa tabeller utan någon kantlinje kring cellerna. Kantlinjens existens/bredd styrs av attributet border i table-taggen och är (idag) som standard 0. Om vi skriver om exemplet ovan med fyra celler och ändra till en punkts bred på kantlinjerna, d.v.s. ändrar till <table border="1">, så blir resultatet följande:

<table border="0">
  ...
</table>

Om vi anger ett värde på attributet border som är större än 0 så kommer (tredimensionella) linjer ritas kring cellerna. Är värdet större än 1 så kommer linjerna mellan cellerna att vara detsamma (som då värdet är 0) men linjerna kring hela tabellen kommer bli grövre (se exempel 4.2.1 nedan).

Två attribut till i table-taggen är cellpadding och cellspacing. Dessa används för att ändra avståndet från elementen i cellerna och cellens innerkant respektive avståndet mellan cellerna. Standardvärdena brukar vara 1 för cellpadding och 2 för cellspacing. I exempel 4.2.2 visas skillnaden mellan de två attributen. Om vi t.ex. vill ta bort dessa mellanrum (för t.ex. designskäl) så skriver vi följande:

<table cellpadding="0" cellspacing="0">
  ...
</table>

Att ändra avståndet mellan cellerna är främst användbart när vi färglägger bakgrunden på tabeller och dess celler. Om vi inte använder kantlinjer och inte vill att bakgrundsfärgen ska lysa igenom mellan tabellerna så måste vi ta bort avståndet mellan cellerna. Se de två tabellerna längst ner i exempel 4.2.2.

Webbläsare brukar anpassa tabellers bredd efter bredden på webbläsaren och innehållet i tabellerna. Även cellernas innehåll styr bredden på tabeller och bredden på respektive kolumn. Tabellerna i exemplen på denna webbsida är inte så breda då de innehåller ganska lite text. Nedan visas samma tabell som ovan fast med flera rader med text i cell 1 i första raden.

Bredden på tabellen i exemplet nedan styrs även av den tabell som jag har placerat all text i på denna webbsida. Denna tabell är 425 bildpunkter bred för att skapa lagom långa rader med text och förhoppningsvis göra texten mer lättläst. (Se exempel 4.2.3. för bättre exempel. Mer om tabeller som platshållare finns nedan.)

Ibland kan det vara trevligt att vet lite mer exakt hur en tabell eller cell kommer ta sig ut. Bredden och höjden på tabeller och celler kan styras med attributen width respektive height. Attributen kan anges för både table- och td-taggen (även om inte attributet är standard i den senare) och värdena kan ges i procent eller bildpunkter.

Genom att använda bildpunkter som mått så kan vi styra hur bred en tabell och dess celler kommer att vara. Oberoende av besökarens upplösning (antal punkter horisontellt och vertikalt på skärmen) så kommer tabellerna och cellerna att ha denna bred. Besökarens upplösning kommer dock att avgöra hur mycket av besökarens skärm som kommer upptas av tabellerna. Vanliga upplösningar på datorer med Windows är 1024x600 (s.k. Netbooks), 1024x768, 1280x800 och 1366x768. Vi bör alltså försöka att anpassa våra hemsidor till max 900-1000 bildpunkters bredd för att passa på de flesta besökares skärmar (några bildpunkter går bort för ramar och rullningslister i webbläsarens fönster!).

Upplösning brukar anges som antal punkter horisontellt x vertikalt. Desto högre värden, desto högre är upplösning, och desto mer får plats på skärmen. Men det som visas på skärmen, bl.a. text, blir också mindre ju högre upplösning.

Vi skulle kunna göra en tabell med bredden 300 punkter och sen fördela bredden på kolumnerna till 75, 100 respektive 125 punkter. Koden blir då följande:

<table border="1" width="300">
<tr>
  <td style="width: 75px">Kolumn 1</td>
  <td style="width: 100px">Kolumn 2</td>
  <td style="width: 125px">Kolumn 3</td>
</tr>
<tr>
  <td style="width: 75px">75</td>
  <td style="width: 100px">100</td>
  <td style="width: 125px">125</td>
</tr>
</table>

Observera att man bör ange bredden för varje cell (d.v.s. varje td-tagg) som ingår i kolumnen. Ibland räcker det dock att ange det för celler i första raden då celler i resterande rader (eventuellt) kommer att anpassas efter den första.

Om vi istället använder procent för att ange bredden på en tabell så anges bredden relativt till webbläsarens bredd på besökarens skärm. En tabell med attributet width satt till "100%" kommer att spänna från vänster till höger i besökarens webbläsare. Bredden på kolumner för celler är relativt bredden på hela tabellen.

I exemplet nedan är tabellens bredd fortfarande 300 bildpunkter men respektive kolumn har fått en procentsats som värde på bredden istället (värdena ska motsvara de bredder vi fick i exemplet med bildpunkter ovan - t.ex. 75 är 25% av 300).

<table border="1" width="300">
<tr>
  <td style="width: 25%">Kolumn 1</td>
  <td style="width: 33%">Kolumn 2</td>
  <td style="width: 42%">Kolumn 3</td>
</tr>
<tr>
  <td style="width: 25%">25%</td>
  <td style="width: 33%">33&</td>
  <td style="width: 42%">42%</td>
</tr>
</table>

Attributet height bör inte användas - låt webbläsaren anpassa höjden på tabell och rader i tabell! Olika webbläsare tenderar nämligen att använda olika typsnitt och lite olika storlek på (samma) typsnitt. Även besökare med försämrad syn kan ha anpassat typsnitt och storlek på typsnitt i sin webbläsare för att se bättre. Om man anger höjden på en rad eller tabell så kan det tänkas att texten inte får plats i cellen och då visar webbläsaren endast den text som får plats i cellerna. (Det finns dock undantag, t.ex. för design, då höjd kan vara lämpligt att ange. Detta behandlas dock inte på dessa hemsidor.)

För att ändra justeringen av cellers innehåll används attributen align och valign som justerar i horisontellt respektive vertikalt led. Attributen finns i både tr- och td-taggen. Giltiga värden för attributet align är de samma som för andra taggar med attributet, d.v.s. "left", "center" och "right". Giltiga värden för attributet valign visas, och förklaras, i tabellen nedan

top

Innehållet positioneras mot över kanten på cellen

middle

Innehållet centreras vertikalt i cellen

bottom

Innehållet i cellen positioneras mot nederkanten på cellen

Om vi använder attributen i tr-taggen så påverkas alla celler (d.v.s. td-taggar) i raden. Vi kan t.ex., som i första raden i exemplet nedan, centrera alla cellers innehåll i en

<table width="100%" border="1">
  <tr align="center>
    <td>Centrerad cell 1</td>
    <td>Centrerad cell 2</td>
  </tr>
  <tr>
    <td align="center">Centrerad cell 3</td>
    <td align="right">Högerjusterad
       cell</td>
  </tr>
</table>

I exemplet ovan har tabellens bredd angivits som 100% och kantlinjen satts till 1 för att effekten av justeringen ska bli synlig. Skälet till att tabellens bredd inte motsvarar hela (den vita) hemsidans bredd är att jag använder en tabell (om 425 punkter) för att styra bredden på texten på hemsidan. Mer om detta i nästa avsnitt.

Tabeller kan ges en rubrik genom att använda taggen caption och som placeras mellan öppnande och avslutande table-tagg. Rubriken placeras som standard centrerat ovanför tabellen men kan även placeras nedanför m.h.a. värdet "bottom" i attributet align i caption-taggen.

<table>
  <caption align="bottom">Rubrik för 
    tabell</caption
  ...
</table>

Även kolumner kan få rubriker, vilka oftast visas med fet stil. Rubrikerna markeras med taggen th (eng. table header) och används istället för td-taggen i den rad man vill ha rubrikerna. I exemplet nedan har tabellen fått en rubrik, som visas under tabellen, och första raden är rubriker för kolumnerna

<table border="1">
  <caption align="bottom">Rubrik för 
    tabell</caption>
  <tr>
    <th>Rubrik kolumn 1</th>
    <th>Rubrik kolumn 2</th>
  </tr>
  <tr>
    <td>Rad 1 - kolumn 1</td>
    <td>Rad 1 - kolumn 2</td>
  </tr>
  ...
</table>

Som nämnt ovan så bör alla rader i en tabell ha lika många kolumner (celler). Men vi har möjligheten att låta en cell spänna över två kolumner eller rader.

För att låta en cell spänna över två kolumner använder vi attributet colspan i td-taggen. Om vi sammanfogar två celler så ska td-taggen förekomma en gång mindre mindre på denna rad!

I exemplet nedan så består tabellen av två kolumner och två rader. I den första raden har cellerna sammanfogats för att spänna över bägge kolumner. Observera att det endast finns en td-tagg i första raden då cellerna i denna rad har sammanfogats! (har markerats med en kommentar där taggen skulle varit).

<table>
  <tr>
    <td colspan="2">Sammanfogad cell</td>
    <!-- td-tagg 2 utelämnad -->
  </tr>
  <tr>
    <td>Cell 1 rad 2</td>
    <td>Cell 2 rad 2</td>
  </tr>
</table>

Den kan vara praktiskt att visa att en td-tagg utelämnats med en kommentar som i exemplet ovan (speciellt om man skriver koden för hand). Och givetvis kan en cell spänna över fler kolumner än 2 - antalet begränsas av antalet kolumner i tabellen. :-)

På motsvarande sätt, som för celler som spänner över kolumner, fungerar celler som spänner över två rader istället . Skillnaden är att vi använder attributet rowspan i td-taggen istället. I exemplet nedan har cellerna i kolumn ett sammanfogats. Observera att vi utelämnar en td-tagg i rad två! (har markerats med en kommentar där taggen skulle varit).

<table>
  <tr>
    <td rowspan="2">Sammanfogad cell</td>
    <td>Cell 2 rad 1</td>
  </tr>
  <tr>
    <!-- td-tagg 1 utelämnad -->
    <td>Cell 2 rad 2</td>
  </tr>
</table>

Även här kan celler spänna över fler rader än 2.

Tabeller användes tidigare (innan CSS utvecklats till vad det är idag) för att skapa design. Eftersom detta sätt att använda tabeller inte är det ästa så har jag valt att ta bort detta avsnitt.