Lektion 8, Tabeller

När du hör ordet tabeller tänker du väl mest på tråkiga uppställningar av fakta. På nätet kan man använda tabeller bl a för att förfina layouten men också givetvis för att presentera fakta på ett bra sätt. En tabell kan se ut så här:
Cell 1 Cell 2
Cell 3 Cell 4
I tabellen ovan bildar cell 1 och cell 2 en rad. Cell 1 och cell 3 bildar en kolumn.

De nödvändliga taggarna vid tabelltillverkning

Försök förstå nedanstående exempel med hjälp av ovanstående tagg-förklaringar.

<TABLE>
<TR>
<TH>Namn</TH>
<TH>Telefon</TH>
</TR>
<TR>
<TD>Bodil Månsson</TD>
<TD>0414-411352</TD>
</TR>
</TABLE>
Namn Telefon
Bodil Månsson 0414-411352

Attribut till <TABLE>

Attribut Möjliga värden Förklaring
BORDER 0..10 eller inget Med attributet border kan man bestämma om och hur stor kant man önskar runt sina celler.
Om attributet används utan värde (<TABLE BORDER>) kommer en ram med bredden 1 pixel att visas. Alltså innebär taggen <TABLE BORDER> och <TABLE BORDER="1"> samma sak.
Om du inte använder BORDER-attributet i TABLE-taggen visas ingen kant men den tar ändå en pixels utrymme. Om du vill ha bort detta utrymme skriver du BORDER="0".
ALIGN CENTER, LEFT eller RIGHT Bestämmer hur tabellen ska placeras i förhållande till texten. Om attributet inte används i taggen <TABLE> placeras tabellen till vänster utan text bredvid sig.
BGCOLOR RGB-kod eller standardvärden Om tabellens bakgrundsfärg ska vara en annan än sidans används detta attributet.
WIDTH Positivt heltal eller procentvärde Med WIDTH/HEIGHT kan du bestämma tabellens bredd resp. höjd. Höjden anges i pixlar eller i procent av fönstret.
HEIGHT
CELLSPACING Positivt heltal Anger avståndet mellan cellerna. Standardvärde=2
CELLPADDING Positivt heltal Anger hur stort utrymme som ska finnas mellan texten och cellkanten. Standardvärde=1
BORDERCOLOR RGB-kod eller standardvärde Fungerar enbart i Internet Explorer (2.0 eller senare). Bestämmer färgen på kanten.
BORDERCOLORLIGHT RGB-kod eller standardvärde Fungerar enbart i Internet Explorer (2.0 eller senare). Bestämmer färgen på den ljusa delen på 3D-kanten.
BORDERCOLORDARK RGB-kod eller standardvärde Fungerar enbart i Internet Explorer (2.0 eller senare). Bestämmer färgen på den mörka delen på 3D-kanten.
BACKGROUND bildfil Fungerar enbart i Internet Explorer (3.0 eller senare) och i Netscape 4.0. Anger en bakgrundsbild till tabellen.

Titta på följande exemepel:
Exempel på ett HTML-dokument <HTML>
<HEAD>
<TITLE>Exempel på tabeller</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="5" BGCOLOR="#00FFFF" CELLSPACING="4" CELLPADDING="4">
<TR>
<TH>Polare</TH>
<TH>Hemsida</TH>
</TR>
<TR>
<TD>Kalle</TD>
<TD>www.kalle.se</TD>
</TR>
<TR>
<TD>Pelle </TD>
<TD>www.pelle.se </TD>
</TR>
</BODY>
</HTML>

Attribut till <TR>,<TH> och <TD>

Flera av attributen som finns till taggen <TABLE> kan också användas till taggarna <TR>,<TH> och <TD>. Om attributet placeras i taggen <TR> formateras hela raden. Om attributet sätts i <TH> eller <TD> berörs bara den cellen. Här följer attributen till <TR>,<TH> och <TD>:

Attribut Möjliga värden Förklaring
ALIGN CENTER, LEFT eller RIGHT Bestämmer hur texten ska placeras horisontellt i cellen/cellerna. I mitten (center), till höger (right) eller till vänster (left).
VALIGN TOP, MIDDLE eller BOTTOM Bestämmer hur texten ska placeras vertikalt i cellen/cellerna. Längst upp (top), i mitten (middle) eller längst ner (bottom).
BGCOLOR RGB-kod eller standardvärden Anger cellen/cellernas bakgrundsfärg.
BORDERCOLOR RGB-kod eller standardvärde Fungerar enbart i Internet Explorer (2.0 eller senare). Bestämmer färgen på kanten runt cellen/cellerna.
BORDERCOLORLIGHT RGB-kod eller standardvärde Fungerar enbart i Internet Explorer (2.0 eller senare). Bestämmer färgen på den ljusa delen på 3D-kanten runt cellen/cellerna.
BORDERCOLORDARK RGB-kod eller standardvärde Fungerar enbart i Internet Explorer (2.0 eller senare). Bestämmer färgen på den mörka delen på 3D-kanten runt cellen/cellerna.
BACKGROUND Bildfil Fungerar enbart i Internet Explorer (3.0 eller senare) och i Netscape 4.0. Anger en bakgrundsbild till rutan.
WIDTH Positivt heltal eller procentvärde Fungerar enbart i taggarna <TH> och <TD>. Med WIDTH/HEIGHT kan du bestämma cellens bredd resp. höjd. Höjden anges i pixlar eller i procent av fönstret.
HEIGHT

De viktiga attributen COLSPAN och ROWSPAN

Med dessa två attributen kan man få celler att sträcka sig över fler kolumner och/eller rader. De används i taggarna <TH> och <TD>. Låt oss se på några exempel:

<TABLE BORDER=2>
<TR>
<TH COLSPAN=2>Rubrik</TH>
</TR>
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
</TABLE>
Rubrik
Cell 1 Cell 2

Här sträcker sig första raden över 2 kolumner. På första raden behövs bara en <TH>-tagg. Däremot behövs två <TD>-taggar på rad 2.
<TABLE BORDER=2>
<TR>
<TH>Rubrik 1</TH>
<TH COLSPAN="2">Rubrik 2</TH>
</TR>
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
</TABLE>
Rubrik 1 Rubrik 2
Cell 1 Cell 2 Cell 3

I detta exempel sträcker sig den andra cellen på första raden över 2 kolumner. Därför behövs bara två celler på första raden men tre på rad två.
<TABLE BORDER=2>
<TR>
<TH ROWSPAN="2">Planeter</TH>
<TD>Mars</TD>
</TR>
<TR>
<TD>Pluto</TD>
</TR>
<TR>
<TD>Månen</TD>
<TD><TD>
</TR>
</TABLE>
Planeter Mars
Pluto
Uranus
Månen

Här sträcker sig första cellen ut sig på tre rader. Därför behövs bara cell på rad 2 och 3. På rad 4 behövs åter 2 celler. Eftersom den andra cellen inte innehåller något syns den inte. Om du vill ha en tom ruta istället kan du infoga en radbrytning (<BR>).

I lektionens inledning berättade jag att tabeller ofta används för att göra layouten snyggare. Nedan följer ett exempel på det.

screenshot <HTML>
<HEAD><TITLE>Exempel med tabeller</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="0">
<TR ALIGN=CENTER VALIGN=MIDDLE>
<TD COLSPAN=3><IMG SRC="bilar.gif"></TD>
<TR>
<TD><IMG SRC="lada.gif"></TD>
<TD><IMG SRC="bmw.gif"></TD>
<TD><IMG SRC="mazda.gif"></TD>
</TR>
<TR>
<TD><IMG SRC="ford.gif"></TD>
<TD><IMG SRC="saab.gif"></TD>
<TD><IMG SRC="volvo.gif"></TD>
</TR>
</TABLE>
</BODY>
</HTML>


Huvud-
meny		 Prov på
lektionen		 Nästa
lektion