Tabeller

Tabeller är knepiga saker, bland annat pga att webbläsare har olika tolkningar. Men med tabeller kan du uppnå det bästa resultatet vad gäller utformning av dina hemsidor. Med lite övning kan du skapa snygga och snabbladdade webbsidor.

Introduktion
Nu för tiden är det vanligt att man använder tabeller på hemsidor, och om du har besökt något stort företags webbplats är det mer än troligt att du stött på tabeller. Tabeller består precis som i tryckt material av kolumner och rader. I skärningspunkten mellan en rad och en kolumn uppstår en cell. Kolumner går lodrätt och rader vågrätt.

Med hjälp av tabeller kan man skapa avancerade utformningar med text och bilder. Något som vore helt omöjligt om man bara har text- och bildmärken att tillgå. Innan de stora webbläsarna hanterade tabeller var enda möjligheten att spalta upp sin text att använda ett icke proportionellt teckensnitt, t.ex. Courier. Eftersom alla bokstäver och tecken då är lika breda kan man använda mellanslag för att fylla ut avståndet mellan spalterna. I Courier ser tabellen ut så här:

 Namn        Matcher    Poäng
 Max           12        15
 Per           12        13
 Johan         12         9
 Björn         11         8

Om den som öppnar och läser sidan i sin webbläsare mot förmodan inte skulle ha Courier utan ett proportionellt teckensnitt, t.ex. Garamond eller Times, kommer tabellen att kollapsa:

Namn        Matcher    Poäng
Max           12        15
Per           12        13
Johan         12         9
Björn         11         8

Ser inte så kul ut va? Nej, tänkte väl det. Förutom att indragen inte fungerar och att tecknen är olika breda så är 10 punkter i Times mindre än 10 punkter i Courier. Texten blir helt enkelt mindre. Och det är dessutom inte möjligt att lägga in bilder i tabellen. Den här metoden fungerar bra för den klassiska användningen av tabeller (sportresultat och annan information).

I takt med att det kommer mer sofistikerade sätt att hantera utformningen av sidans innehåll, till exempel CSS och dynamisk HTML, kommer tabellens betydelse antagligen att minska, men till dess att alla webbläsare hanterar nymodigheterna är tabellen nog den smidigaste lösningen. Så nu sätter vi igång.

Vår första tabell
Så hur tillverkar man en tabell då? Det är egentligen ganska enkelt. Koden nedanför skapar tabellen du ser i Bild 5.2.

Exempel 5-1 "En busenkel tabell"

<FONT FACE="Tempus Sans ITC" COLOR="purple" SIZE="4">
<BR>
En busenkel tabell.<BR><BR>

<TABLE BORDER="1">
 <TR>
  <TD>
   Cell 1
  </TD>
  <TD>
   Cell 2
  </TD>
 </TR>
 <TR>
  <TD>
   Cell 3
  </TD>
  <TD>
   Cell 4
  </TD>
 </TR>
</TABLE>
<BR>
Slut på den busenkla tabellen.

Teckensnitt och tabeller
Som du ser i bild 5.2 används inte samma teckensnitt för tabellen och resten av sidan. Det är webbläsarens standardteckensnitt som används. Det är en egenhet för bland annat Netscape, i Internet Explorer används senast angivna teckensnittsattribut även i tabeller. Eftersom många av oss använder andra webbläsare än IE förutsätter går jag igenom den "krångligare" metoden att ange teckensnitt för tabeller.

Teckensnitt anges på cellnivå, i direkt anslutning till aktuell text, men är inte en del av tabellens definition:

Exempel 5-2 "Tabeller och teckensnitt"

..
<TD>
 <FONT FACE="Helvetica" COLOR="red">Leksands IF
</TD>
<TD>
 Malmö IF
</TD>
..

Leksands IF kommer att vara rött och visas med teckensnittet Helvetica. Malmö IF kommer däremot att visas med standardteckensnittet (gäller Netscape), se nedan.

En teknik som jag använder för att göra det enklare att använda teckensnitt i tabeller är att göra kolumner som består av stora celler. Istället för tre kolumner med 10 celler i varje (där teckensnittet måste anges för varje cell), gör jag tre stora celler där jag delar raderna med det vanliga <BR>-märket. Den här metoden fungerar bra så länge varje informationsenhet är en rad lång och du inte vill visa cellramar.

Tabellens beståndsdelar

Border
Det här attributet avgör om tabellen ska omges av en synlig ram eller ej. Jag tycker att de ramar som sätts runt en tabell är gräsligt fula så jag sätter ofta värdet till noll:

BORDER="0"

Width
Om du inte anger en bredd på tabellen anpassas den efter innehållet, eller efter bredden på dina celler. I händelse av konflikt (om du anger bredden på en tabell till 400 men har celler som är 500 breda tillsammans) så "vinner" <TABLE>-märkets breddangivelse.

Du kan ställa in WIDTH i bildpunkter eller som en procentsats.

WIDTH="400"
WIDTH="50%"

Bildpunkter anges alltid som ett absolut värde. Om du anger att tabellen ska vara 400 punkter bred så blir den 400 punkter bred. Procent anges i förhållande till webbläsarfönstrets bredd. Detta ger först och främst olika resultat på skärmar med olika storlek, tabellen blir avsevärt mycket smalare på en 14- än på en 21-tumsskärm. Det kan vara en nackdel eftersom du inte kan styra hur bred tabellen ska vara. Å andra sidan kan du alltid vara säker på att hela tabellen syns på skärmen oavsett hur stor den är om du anger tabellens bredd till 100%. En tabell där bredden anges som bildpunkter riskerar att bli för bred på de allra minsta skärmarna.

Jag utformar mina sidor så att tabellerna fungerar på en 14- till 15-tums skärm (ca 640 x 480 punkter) just av ovan nämnda anledning. Eftersom jag vill ha fullständig kontroll över bredden på mina tabeller anger jag alltid bredden i bildpunkter (488 närmare bestämt).

Height
Parat med WIDTH finns attributet HEIGHT. Du kan ange tabellhöjden som en procent av fönstrets höjd, eller en fast höjd som bildpunkter

<TABLE HEIGHT="200">
<TABLE HEIGHT="75%">

Cellspacing
Attributet Cellspacing bestämmer hur stort avståndet ska vara mellan celler och den omgivande ramen samt mellan celler (både lodrätt och vågrätt). Värdet på Cellspacing har betydelse även om du satt BORDER="0", se nedan. Cellspacing anges alltid i bildpunkter.

Cellpadding
Cellpadding används för att öka eller minska avståndet mellan innehållet i en cell (text till exempel) och cellens ramkant. Avståndet ökas symmetriskt i alla fyra riktningarna. Mycket användbart om du vill öka avståndet mellan den vänstra ramkanten och text i cellen. Observera att Cellpadding "stjäl" utrymme från cellens totala bredd. Om du angivit att cellen ska vara 100 bildpunkter bred och sätter Cellpadding till 10 har du bara 80 bildpunkter kvar för text.

Bgcolor
Om du läst tidigare avsnitt känner du igen det här attributet. Det används för att ange en bakgrundfärg, i det här fallet för tabellen. Ange antingen ett hexadecimalt värde eller namnet på en färg (på engelska).

BGCOLOR="#336633"
BGCOLOR="blue"

Det finns ett antal färgnamn som de vanligaste webbläsarna accepterar. Jag har sammanställt en lista som du kan studera eller skriva ut.

Background
Med attributet Background kan du ange en bakgrundsbild för tabellen, t.ex. en GIF eller JPEG. Men var försiktig med vad du väljer för bild eftersom ett alltför "vildvuxet" mönster gör det svårt att läsa tabellens text. Så här anropar du bilden star.gif (som inte är särskilt väl lämpad som bakgrundsbild måste jag tillägga):

<TABLE BACKGROUND="star.gif">

Align
Attributet Align anger var på sidan tabellen ska placeras. Du kan ange left, center eller right. Satsen:

<TABLE ALIGN="right">

placerar tabellen till höger på sidan.

<CAPTION>
Om du använder en tabell i dess klassiska bemärkelse, för att presentera en mängd data, är det mycket möjligt att du vill ge tabellen en rubrik (caption). Sån tur då att det finns ett märke som ordnar just detta. Sätt in märket efter <TABLE>, t.ex:

..
<TABLE WIDTH="75%">
<CAPTION>Tabellrubrik</CAPTION>
..

Du kan ange Caption var som helst innanför <TABLE>-definitionen men det är logiskt att placera rubrikdefinitionen så högt upp som möjligt. Då kan det se ut så här:

<TR>
OK, då ger vi oss på nästa nödvändiga märke, <TR>. Märket är en förkortning av Table Row vilket betyder tabellrad. En tabellrad kan innehålla en eller flera celler.

..
<TR>
 <TD>Cell 1
 <TD>Cell 2
</TR>
..

Du behöver inte ha lika många celler på alla rader. Tabellen blir så många celler bred som den tabellrad med flest celler, se Bild 5.12.

I bilden ovan har första raden 3 celler, andra raden 2 celler och tredje raden 1 cell. Om man bara anger en cell för en rad kommer den cellen att hamna i kolumnen längst till vänster i tabellen. Om du istället vill att cellen ska placeras i en annan kolumn anger du först en eller flera tomma celler, så här:

..
<TD>
</TD>
<TD>
 Cell x
</TD>
..

Liksom många andra märken kan du utrusta <TR> med attribut.

Align
Align syftar i det här fallet på innehållet i enskilda celler inom den aktuella tabellraden. Som vanligt kan du använda värdena "left", "center" eller "right". Om du i definitionen för en cell, <TD>, anger ett annat värde på Align åsidosätts Align-värdet som anges i <TR>-märket. Så här använder du attributet:

<TR ALIGN="center">

Valign
Attributet Valign (Vertical Alignment) kontrollerar cellers textjustering i höjdled. Det finns tre alternativ: "top", "middle" och "bottom" (överst, mitten, nederst). Det här attributet är användbart om celler på samma rad är olika höga. Om du vill att innehållet i celler på den aktuella raden ska justeras mot cellens övre kant skriver du:

<TR ALIGN="top">

Bgcolor
För Bgcolor gäller samma som för <TABLE>-märket, se ovan. Det kan se ut så här:

<TR BGCOLOR="yellow">

Background
För Background gäller samma som för <TABLE>-märket, se ovan. Det kan se ut så här:

<TR BACKGROUND="star.gif">

<TH>
<TH> är kort för Table Head vilket betyder tabellrubrik. Du kan använda märket överallt där du skulle använda <TD> men det vanliga är givetvis att använda <TH> till tabellen första rad. Märket har samma attribut som <TD> så jag går inte igenom dem här, se <TD> längre ner. När detta skrivs, hösten -99, har <TH> ingen annan funktion än att centrera texten i cellen och göra den fet. Här följer ett exempel:

<TABLE BORDER="0">
 <TR>
  <TH>Kolumn 1
  <TH>Kolumn 2
  <TH>Kolumn 3
 </TR>
 <TR>
  <TD>Cell 1
  <TD>Cell 2
  <TD>Cell 3
 </TR>
</TABLE>

<TD>
Då är vi framme vid märket som definierar en cell. <TD> är förkortningen för Table Data (tabelldata) och det märket kan innehålla text, bilder eller till och med andra tabeller.

I de fall då samma attribut angivits även i <TABLE> eller <TR> gäller inställningen som finns "närmast" cellinnehållet, d.v.s. inställningen i märket <TD>. I konstruktionen:

..
<TR ALIGN="left">
 <TD ALIGN="right">
  Leksands IF
 </TD>
</TR>
..

kommer Leksands IF att justeras åt höger eftersom den närmaste inställningen för ALIGN (i <TD>-märket) lyder "right".

Align
Attributet Align använder du för att justera cellinnehållet i sidled (vågrätt). Du kan ange värdena "left", "center" eller "right", se Bild 5.14:

<TD ALIGN="center">

Valign
Valign justerar cellinnehållet i höjdled (lodrätt) och du kan ange värdena "top", "middle" och "bottom" (se Bild 5.14):

<TD VALIGN="top">

Width
Attributet Width används för att kontrollera bredden på en cell. Du kan ange bredden som ett fast värde i form av bildpunkter, eller som en procent i relation till hela tabellens bredd.

Alla breddangivelser är beroende av innehållet i de celler som påverkas. Om du har en 200 bildpunkter bred bild i en cell, kan du inte ange att cellen ska vara 100 punkter bred. Jo, du kan ange det, men resultatet blir oförutsägbart. Samma sak gäller om du anger en total procentsumma som överstiger 100%. Tre celler satta till 50% av tabellbredden ger summan 150% och då blir webbläsaren förvirrad. Så här kan det se ut:

<TD WIDTH="100">
<TD WIDTH="50%">

Ställ bara in bredden för cellerna i en rad. Övriga rader anpassas nämligen efter dina inställningar. Faktiskt är det en bra metod eftersom du då inte riskerar att ge celler i samma kolumn olika bredd. Längre ner, under rubrikerna Colspan och Rowspan, går vi igenom hur man går tillväga för att göra celler i samma kolumn olika breda.

Height
Height för en cell anges i form av bildpunkter. Om du anger ett värde för Height som är lägre än innehållet i cellen medger händer ingenting. Då får cellen den höjd som krävs för att visa innehållet. Exempel:

<TD HEIGHT="100">

Nowrap
Attributet Nowrap betyder att innehållet i cellen ska visas på en och samma rad. Nowrap betyder ingen radbrytning. Ange Nowrap i <TD>-märket (attributet tilldelas inget värde), se nedan.

<TD NOWRAP>

Observera att NOWRAP inte fungerar i Netscape om du samtidigt anger cellbredd med attributet WIDTH.

Bgcolor
För Bgcolor gäller samma som för <TABLE>- och <TR>-märket, se ovan. Det kan se ut så här:

<TD BGCOLOR="yellow">

Background
För Background gäller samma som för <TABLE>- och <TR>-märket, se ovan. Det kan se ut så här:

<TD BACKGROUND="star.gif">

Colspan
Colspan är ett mycket kraftfullt attribut. Med hjälp av Colspan kan du ange att en cell ska sträcka sig över mer än en kolumn. Det är samtidigt ett "farligt" attribut eftersom du måste ha järnkoll på hur din tabell ser ut, hur många kolumner och rader den består av. Om du anger ett för stort kolumnintervall kommer tabellen att se helknasig ut.

..
<TABLE WIDTH="150">
 <TR>
  <TD COLSPAN="2" ALIGN="center">
   1999
  </TD>
 </TR>
  <TD WIDTH="75">
   Män
  </TD>
  <TD WIDTH="75">
   Kvinnor
  </TD>
 </TR>
</TABLE>
..

Ovanstående ger en tabell med två rader. Den första raden innehåller bara en cell, medan den andra raden består av två celler, se Bild 5.16 nedan.

Du kan varva celler som går över flera kolumner med vanliga kolumnbundna celler som du vill. En minnesregel är att summera värdena för attributet COLSPAN i varje <TD>-märke i en rad, där avsaknaden av COLSPAN i en cell är ett. Se till att alla tabellrader är lika långa, d.v.s. har samma antal kolumner.

<TR>
 <TD>Cell 1
 <TD COLSPAN="3">Cell 2
 <TD COLSPAN="2">Cell 3
 <TD>Cell 4
 <TD COLSPAN="2">Cell 5
</TR>

Ovanstående tabellrad (alla celler inom <TR> och </TR>) består av 9 kolumner. Nedan finns en bild som visar en något mer avancerad tabell, med många olika kombinationer.

Rowspan
Attributet ROWSPAN har samma funktion som COLSPAN fast i höjdled. Med ROWSPAN anger du hur många rader hög en cell ska vara. Standard är en rad, vilket är samma sak som ROWSPAN="1". Så här använder du attributet:

..
<TABLE>
 <TR>
  <TD ROWSPAN="3">Cell 1
  <TD ROWSPAN="2">Cell 2
  <TD>Cell 3
 </TR>
 <TR>
  <TD>Cell 4
 </TR>
 <TR>
  <TD>Cell 5
  <TD>Cell 6
 </TR>
</TABLE>
..

Ovanstående kod åstadkommer en cell som är tre rader hög, och en som två rader hög. Övriga celler är normala. Som du ser i bilden nedan sträcker sig cellintervall över hela kolumner. Det går till exempel inte att sätta COLSPAN="1,5".

Sammanfattning
Det här kapitlet har handlat hur man tillverkar tabeller. Tabeller är fantastiskt bra att använda för att ge sin webbsida ett proffsigare utseende. Med tabeller kan man bryta sig loss från den sekventiella webbsidan genom att man kan blanda bild och text. Vi har gått igenom de viktigaste märkena, såsom <TABLE>, <TR> och <TD>.

Märken
Här följer en lista över de märken och attribut vi gått igenom i den här lektionen.

Frågor

1. Vilka tre märken behövs minst för att skapa en tabell?
2. Varför bör man vara noggrann med att avsluta alla märken i tabeller?
3. Skapa en tabell med tabellrubriken Tabellnamn, som består av tre rader med fyra celler i varje.
4. Ange att tabellen ska ha bakgrundsfärgen "blue" men att en av cellerna i tabellen ska ha bakgrundsbilden "star.gif".
5. Ange att innehållet i en cell ska vara centrerad och justerad mot cellens övre kant.
6. Skapa en tabell som ser ut enligt nedan genom att använda märkena <COLSPAN> och <ROWSPAN>.
   
   

Svaren på frågorna finns i Bilaga A.

Senast uppdaterad 99-08-09