Tabeller

Introduktion, TABLE, CAPTION, TR, TH/TD, COL, COLGROUP, THEAD, TFOOT, TBODY, Exempel

Varje tabell börjas med markordet <TABLE> och avslutas med </TABLE>, båda är obligato-riska. Dessa två markord talar om för www-klienten att innehållet mellan dem är tabulära data, dvs ska tolkas som tabell. Elementet TABLE skapar inte någon tabell i sig själv utan fungerar som en behållare åt de element som skapar rader och kolumner, dvs celler.

Genom olika attribut kan du specificera tabellens layout. Observera att attributen påverkar inte själva innehållet.

Attribut

%attrs; 
SUMMARY=Text 
WIDTH=%Length 
BORDER=%Pixels 
FRAME=void|above|
  below|hsides|
  hs|rhs|vsides|
  box|border
RULES=none|groups|
   rows|cols|all 
CELLSPACING=%Length 
CELLPADDING=%Length 

samma som i 
HTML 4.0 plus 

ALIGN=left|center|
  right 
BGCOLOR=%Color 

ALIGN=left|right|
  center 
WIDTH=pixlar|
  procent 
BORDER=pixlar 
CELLSPACING=pixlar 
CELLPADDING=pixlar

%attrs;

Beskrivs i HTML 4.0 - Attribut

ALIGN (T)

Tabellens horisontella placering. Nedskrivet attribut.

Med detta attribut kan du specificera tabellens placering i förhållande till nuvarande marginaler. Om tabellen inte är nästlagd är "nuvarande marginaler" lika med skärmens marginaler - kanvas. (OBS! Attributet kommer inte att placera själva innehållet på det specificerade sättet utan enbart själva tabellen.) Tillåtna värden är LEFT, RIGHT, CENTER. Om inget attribut uppges vänsterplaceras tabellen då värdet LEFT är standardvärde. Om du vill centrera en tabell skriver du i elementets starttag:

<TABLE ALIGN=center>

Tyvärr har detta attribut mycket dålig support i lite äldre (och även nyare) versio-ner av populära www-klienter. Därför bör du använda elementet DIV, dvs omge tabellen med <DIV></DIV>, för att centrera den. DIV står för division och kan användas i just placeringssyfte. Med detta element kan du centrera en tabell, ett antal tabeller eller ett helt dokument. Om du vill centrera tabeller kan du även använda elementet CENTER (T) som är en förkortning av <DIV ALIGN=CENTER>.

Om du vill högerställa en tabell skriver du i startaggen:

<TABLE ALIGN=right>

WIDTH

Tabellens bredd

Tabellens bredd justeras automatiskt så att den passar innehållet. Med attributet WIDTH kan du själv bestämma tabellens bredd. Bredden kan uppges i pixlar som är ett fast mått eller i procent som är ett relativt mått.

Det är alltid bättre att uppge relativa mått då de bibehåller dokumentens porta-bilitet. Relativa mått anpassar sig till plattformen medan fasta är plattforms-beroende. 70%, är till exempel, alltid "70%", dvs tabellen upptar "70%" av varje skärm i varje upplösning - på varje plattform. OBS! Procentsatsen måste citeras. 500 pixlar är däremot alltid 500 pixlar. Om en tabell med fasta mått inte får plats på en viss plattform (t ex för liten upplösning) måste användaren skrolla efter den.

<TABLE WIDTH="70%"> - 70% av varje skärm, stor som liten
<TABLE WIDTH=500> - alltid 500 pixlar

BORDER

Ram runt cellerna

Normalt visas tabeller utan några ramar, vare sig de är tabellens yttre ramar eller ramar runt de individuella cellerna. Med attributet BORDER kan du rita ramar runt tabellens och cellernas yttre kanter. Ramarna ritas bara runt de celler som har något innehåll - mellanslag räknas inte. Om du vill ha en "tom" cell skriver du &nbsp; (no breaking space) i den. Se avsnittet "Tomma celler" för mer information.

BORDER är lika med BORDER=1, där 1 står för en pixel.

FRAME

Synliga ramar

Med detta attribut kan du föreslå vilka celler eller cellgrupper som ska ramas in. Om attributet BORDER=n uppges tillsammans med FRAME ritar attributet BORDER bara de yttre ramarna. Tillåtna värden, som ritas i pixlar, är:

1. void - tar bort alla yttre ramar - standardvärde
2. above - ritar en ram på toppen (ovanför)
3. below - ritar en ram på botten (nedanför)
4. hsides - ritar en ram på toppen och en ram på botten (horisontella sidor)
5. vsides - ritar en ram på höger och en på vänster sida (vertikala sidor)
6. lhs - ritar en ram på vänster sida (left hand side)
7. rhs - ritar en ram på höger sida (right hand side)
8. box - ritar en ram på alla fyra sidorna
9. border - ritar en ram på alla fyra sidorna

RULES

Regler för attributet FRAME

Med detta attribut kan du i detalj specificera inramningsreglerna. Tilllåtna värden är:

• none - inga regler - standardvärde
• groups - regler gäller mellan radgrupper (THEAD, TFOOT, TBODY) och kolumngrupper (COLGROUP, COL)
• rows - regler gäller enbart mellan rader
• cols - regler gäller enbart mellan kolumner
• all - regler gäller mellan rader och kolumner

Regler för BORDER, FRAME och RULES

För att behålla tabellens bakåtkompabilitet gäller följande regler:

• BORDER=0 är lika med FRAME=void och om inget annat specificeras RULES=NONE
• Andra värden än "0" som har tilldelats attributet BORDER är lika med FRAME=border och om inget annat specificeras RULES=ALL
• Värdet BORDER, t ex FRAME=border, i tabellens starttag <TABLE> ska tolkas som värdet som har tilldelats attributet FRAME och även vara lika med RULES=all

CELLPADDING och CELLSPACING

Cellfyllnader och avstånd mellan cellerna

CELLPADDING specificerar avståndet mellan varje cells innehåll och ramen medan CELLSPACING anger avståndet mellan individuella celler. Värdena kan uppges i pixlar och procent (ej HTML 3.2). Om attributen är frånvarande kommer "luften" runt cellerna att vara 3 pixlar då standardvärdet för CELLPADDING är 1 pixel och för CELLSPACING 2 pixlar.

Om du vill bli av med fyllnaden, t ex när du "ramar in" bilder, eller om några bilder ska "sammansättas" ger du attributet värdet 0 (noll). Om du vill förstora fyllnaden ger du det ett högre värde.

<TABLE>               - 1 pixels fyllnad - standardvärde
<TABLE CELLPADDING=0> - ingen fyllnad
<TABLE CELLPADDING=5> - 5 pixlars fyllnad

<TABLE>               - 2 pixlars avstånd - standardvärde
<TABLE CELLSPACING=0> - inget mellanrum
<TABLE CELLSPACING=5> - 5 pixlars mellanrum

<TABLE>               - standardvärden (1 och 2 pixlar)
<TABLE CELLPADDING=0 CELLSPACING=0> -
        ingen fyllnad och inget mellanrum
<TABLE CELLPADDING=5 CELLSPACING=5> - 
               fyllnad 5 pixlar och mellanrum 5
                 pixlar Tillsammans 10 pixlar

I HTML 4.0 kan fyllnader även uppges i procent, t ex:

<TABLE CELLPADDING="20%">

kommer att ge en 10-procentig fyllnad åt båda horisontella sidorna och en 10-procentig fyllnad åt båda vertikala sidorna.

Exempel:

<TABLE>
<TR>
<TD>CELL1</TD><
TD>CELL2</TD>
</TR>
<TABLE>

är lika med:

SUMMARY

Detta nya attribut används om man vill specificera en summering av tabellens syfte och struktur. Attributet används av icke visuella www-klienter, t ex taldatorer. Här kan tilläggsinformation skrivas vilket är särskilt viktigt i tabeller utan CAPTION.

En tabell som innehåller information om länder och deras huvudstäder kan summeras på följande sätt:

<TABLE SUMMARY="Denna tabell listar världens länder och deras huvudstäder sorterade i bokstavsordning">

BGCOLOR (T)

Tabellens bakgrundsfärg. Nedskrivet attribut.

Med detta attribut kan du specificera en bakgrundsfärg. Om attributet saknas är tabellens bakgrundsfärg transparent, dvs den bakgrundsfärg (eller bakgrundsbild) som tilldelades dokumentet kommer att skina igenom. Attributet är nedskrivet till förmån för CSS.

<TABLE BGCOLOR="#FFFFFF">

nedskrivet till förmån för:

<TABLE STYLE="background: #FFFFFF">
<TABLE STYLE="background: url(bakgrundsbild.gif)">

du kan även tilldela både bakgrundsfärg och bild samtidigt

<TABLE STYLE="background: #FFF url(bakgrundsbild.gif)">

Exempel

BORDER, FRAME, RULES

Om tabellen innehåller bara en bild kan du med attributet BORDER även rama in bilden. Är bilden en länk kan du skapa en "tryckknapp".

OBS! n är en valfri siffra och representerar antal bildpunkter - bredden på ramen kommer att vara n bildpunkter (pixlar), t ex:

<TABLE BORDER=n>  
<TR><TD>
<IMG SRC="bild.gif" WIDTH=60 HEIGHT=40 ALT="alternativ text"> 
</TD></TR>
</TABLE>

Så tolkas de olika n-värdena:

<TABLE BORDER> eller <TABLE BORDER=1>

<TABLE BORDER=10>

<TABLE BORDER=0>

Med attributet FRAME kan du specificera vilka ramar ska vara synliga:

<TABLE FRAME=VOID>	<TABLE FRAME=HSIDES>	<TABLE FRAME=VSIDES>

<TABLE FRAME=BORDER>	<TABLE BORDER=5 FRAME=BOX>	<TABLE BORDER=5 FRAME=VSIDES>

Med attributet RULES kan du specificera inramningsregler:

<TABLE BORDER=5 FRAME=vsides RULES=cols>	<TABLE BORDER=5 FRAME=vsides RULES=rows>

CELLPADDING, CELLSPACING

<TABLE BORDER CELLPADDING=0 CELLSPACING=0>

<TABLE BORDER CELLPADDING=5 CELLSPACING=0>

<TABLE BORDER CELLPADDING=5 CELLSPACING=5>

Markering:

<TABLE BORDER>
<TR><TD><IMG></TD><TD><IMG></TD></TR>
<TR><TD><IMG></TD><TD><IMG></TD></TR>
</TABLE>

Tolkning:

Markering:

<TABLE CELLPADDING=0 CELLSPACING=0>
<TR><TD><IMG></TD><TD><IMG></TD></TR>
<TR><TD><IMG></TD><TD><IMG></TD></TR>
</TABLE>

Tolkning:

Ett par råd

P.g.a. olika buggar i populära www-klienter tolkas inte tabeller på ett korrekt sätt och därför bör du skriva alla valfria sluttaggar och för att verkligen försäkra dig om att det inte finns någon "luft" mellan bilderna skriver du markorden i en följd, dvs utan några mellanslag. Det kan även vara en god idé att inkludera en <BR> före radens alla sluttaggar:

<TABLE>
<TR><TD><IMG></TD><TD><IMG><BR></TD></TR>
</TABLE>

Inte heller får du glömma att de flesta www-klienter renderar tabellceller på basis av deras innehåll och inte på bais av den uppgivna bredden.

Dessutom skapar inte Internet Explorer radbryttningen efter tabeller. Om du vill ha lite "luft" mellan tabeller kan du använda PRE-elementet.

CAPTION - tabellens etikett Nästa

Upp | HTML-referensbok | Referensböcker