Använda tabeller

Jag lägger normalt allt innehåll på webbsidorna i tabeller. Eftersom jag sätter tabellkanternas värde till 0 syns de inte. På just den här sidan har jag dock satt kantens bredd till 1, för att du skall se hur en tabellsida är uppbyggd.

Hittills har vi lagt ut text och bilder enbart med textnivåtaggarna. Det gör att båda glider omkring litet hur som helst på sidorna, alldeles beroende av hur stort besökaren gör sitt webbläsarfönster.

Öppna Haj i Hjälmaren och dra ut det nya fönstret över hela skärmbredden. Det är ju inte så här sidan är tänkt att se ut!

Snarare då så här. Nu kan du dra hur mycket du vill i kanterna - sidan behåller ändå det format jag tänkte mig.

Att använda tabeller handlar inte om att rada upp siffror under varandra, utan om att på ett effektivt sätt ordna innehållet i sina sidor så att de ser ut som man vill ha dem. 

Så här ser den grundläggande HTML-koden för en tabell ut:

<TABLE>
<TR>
<TD> ... </TD>
</TR>
</TABLE>

• <TABLE> ... </TABLE> är start- och sluttaggarna för tabellen
• <TR> ... </TR> ger en rad i tabellen
• <TD> ... </TD> ger en cell i raden

Alla tre har attribut som du kommer att få nytta av. Därför tar jag upp dem ganska grundligt här, innan jag med exempel visar hur de används. Bara de viktigaste attributen finns med nedan.

Både inledande och avslutande tagg måste finnas med. Du kan lägga nästan vilket HTML-kod som helst i tabellen. Här följer de viktigare attributen:

• ALIGN="..." justerar tabellens placering i sidled (left, center, right, justify)
• BGCOLOR="..." bestämmer bakgrundsfärgen i hela tabellen; du kan dock ange en annan färg som bakgrund i enskilda rader och celler
• WIDTH="..." anger tabellens bredd; kan anges som procent eller i antal pixlar
• BORDER="..." anger tabellkantens bredd i pixlar
• CELLSPACING="..." anger mellanrummet mellan cellerna i tabellen
• CELLPADDING="..." anger mellanrummet mellan cellens innehåll och dess gräns

Den avslutande taggen kan utelämnas

• ALIGN="..." justerar innehållet i cellerna horisontellt (left, center, right, justify)
• VALIGN="..." justerar innehållet i cellerna vertikalt (top, middle, bottom, baseline)
• BGCOLOR="..." bestämmer bakgrundsfärg i hela raden

Den avslutande taggen kan utelämnas

• ALIGN="..." justerar innehållet i den enskilda cellen horisontellt (left, center, right, justify)
• VALIGN="..." justerar innehållet i den enskilda cellen vertikalt (top, middle, bottom, baseline)
• BGCOLOR="..." anger cellens bakgrundsfärg
• WIDTH="..." anger cellens bredd i pixlar eller i procent av hela raden i tabellen
• HEIGHT="..." anger cellens höjd i pixlar eller i procent av tabellen
• COLSPAN="..." anger antalet kolumner som cellen sträcker sig över
• ROWSPAN="..." anger antalet rader som cellen sträcker sig över

Nu tittar vi närmare på hur det fungerar. I rutan nedan har du en tabellkod. Titta på den och försök lista ut vad den gör - hur tabellen kommer att se ut. Under rutan kan du sedan öppna ett nytt fönster som innehåller just denna tabell:

<!-- det här är kommentarer som inte syns på sidan men gör det lättare att läsa koden -->
<!-- var generös med kommentarerna i din egen HTML-kod -->

<!-- gränsen mellan cellerna blir synlig, tabellbredden är satt till 300, luften mellan cellinnehåll och cellgräns är 3, bakgrundsfärgen är ljust gul -->
<TABLE BORDER="1" WIDTH="300" CELLPADDING="3" BGCOLOR="#FFFFCC">
<TR> <!-- den första raden -->
<!-- cellen nedan har bredden 298, det vill säga 300 minus de båda kantlinjerna
<TD WIDTH="298" COLSPAN="2"> <!-- den första cellen spänner över 2 kolumner -->
<H2>Färger i de nordiska flaggorna</H2>
</TD> <!-- slut på första cellen -->
</TR> <!-- slut på första raden -->
<TR>
<!-- de två cellerna nedan har sammanlagda bredden 297, det vill säga 300 minus de tre kantlinjerna -->
<TD WIDTH="88" ROWSPAN="2">Danmark</TD> <!-- cell som spänner över 2 rader -->
<TD WIDTH="209" BGCOLOR="#FFFFFF"></TD> <!-- cell med vit bakgrundsfärg -->
</TR>
<TR>
<TD WIDTH="209" BGCOLOR="#FF0000"></TD> <!-- cell med röd bakgrundsfärg -->
</TR>
<TR>
<TD WIDTH="88" ROWSPAN="2">Finland</TD>
<TD WIDTH="209" BGCOLOR="#FFFFFF"></TD>
</TR>
<TR>
<TD WIDTH="209" BGCOLOR="#0000FF"></TD>
</TR>
<TR>
<TD WIDTH="88" ROWSPAN="3">Norge</TD> <!-- cell som spänner över 3 rader -->
<TD WIDTH="209" BGCOLOR="#FFFFFF"></TD>
</TR>
<TR>
<TD WIDTH="209" BGCOLOR="#FF0000"></TD>
</TR>
<TR>
<TD WIDTH="209" BGCOLOR="#0000FF"></TD>
</TR>
<TR>
<TD WIDTH="88" ROWSPAN="2">Sverige</TD>
<TD WIDTH="209" BGCOLOR="#FFFF00"></TD>
</TR>
<TR>
<TD WIDTH="209" BGCOLOR="#0000FF"></TD>
</TR>
</TABLE> <!-- slut på tabellen -->

Jämför med hur tabellen kommer att se ut på webbsidan.

Det här går knappast att åstadkomma utan tabeller. Om du ändrar BORDER="1" i den första raden ovan till BORDER="0" kommer listerna mellan celler och kolumner inte att synas alls.

Medan du arbetar med en sida som innehåller tabeller, kan du gärna sätta BORDER="1" även om du senare vill ändra detta till BORDER="0". Det gör det lättare att "se" hur tabellerna är uppbyggda och var eventuella fel kan tänkas ligga, när du granskar sidan i webbläsaren.

Om du vill kan du lägga hela sidans innehåll - det vill säga allt som ligger i <BODY> ... </BODY> - i en tabell. Nästan alla HTML-taggar går att använda även i tabeller. Många taggar går dessutom att styra bättre i tabeller än utanför.

 Taggen <HR> ger som du minns en horisontell linje.

<HR WIDTH="30%" SIZE="3" ALIGN="center">

Jag använder den koden här och får följande resultat:

Den horisontella linjens längd är 30 procent av tabellens bredd och den ligger centrerad på bredden.

Nedan har jag avslutat tabellen och jag lägger exakt samma kod för en horisontell linje utanför tabellen. Om du ändrar webbläsarfönstrets bredd, kommer linjen ovan att ligga stilla mitt i spalten - som jag ville ha det. Linjen utanför tabellen anpassar sig hela tiden efter webbläsarfönstret; den är centrerd i förhållande till webbläsarfönstret och linjelängden är 30 procent av webbläsarfönstrets bredd, inte textspaltens.

Detsamma gäller för texten ovan. Jag har angett i koden att den skall vara centrerad i tabellen. Under den horisontella linjen utanför tabellen är den centrerad i förhållande till webbläsarfönstret (pröva genom att ändra bredd på webbläsarfönstret). I tabellen är den centrerad i förhållande till tabellens innehåll.

Det finns situationer då det är lämpligt att sätta värdet för BORDER till större än 0 - till exempel om det verkligen är en tabell med siffror och andra uppgifter man vill visa, och det är viktigt att de olika delarna av tabellen tydligt hålls isär. Men det finns också tillfällen då en kantlinje är direkt fel.

Se på det här exemplet - jag har gjort en bild med en ram, och ramen är en viktig den av bilden. Här har bilden blivit instängd i en "cell" - visserligen en tabellcell, men ändå! Cellens gränslinjer tränger inpå ramen och blir mycket störande - som om tavlan stod i en låda.

Att det över huvud taget finns ett mellanrum mellan cellens gräns och tavelramen, beror på att jag har ett värde på CELLPADDING.

Än värre blir det när den vänstra cellens längd gör att bilden till höger blir hängande med tomrum både över och under.

Även här finns en tabell, men jag har satt BORDER="0".

Nu har bilden fått luft omkring sig - tavlan hänger på en vägg i stället för att stå inklämd i en ytterram.

Koden till just den här tabellen - utan ramar - ser ut så här:

<TABLE BORDER="0" WIDTH="610" CELLSPACING="0" CELLPADDING="3">
<TR>
<TD WIDTH="340" HEIGHT="350"><B>Samma bild i samma typ av tabell, men utan synlig BORDER</B>
<P>Även här finns en tabell, men jag har satt BORDER=&quot;0&quot;.</P>
<P>Nu har bilden fått luft omkring sig - tavlan hänger på en vägg i stället för att stå inklämd i en ytterram.</P>
<HR WIDTH="30%" SIZE="3">
</TD>
<TD WIDTH="270" ALIGN="center" ROWSPAN="2">
<IMG BORDER="0" SRC="bilder/beskurna/ghost.jpg" WIDTH="250" HEIGHT="201">
<SPAN STYLE="font-variant: small-caps"><FONT FACE="Times New Roman" SIZE="1">Kan spöken ha spindelfobi?</FONT></SPAN>
</TD>
</TR>
<TR>
<TD WIDTH="340"><P>Koden till just den här tabellen - utan ramar - ser ut så här:</P>
</TD>
</TR>
</TABLE>

Eftersom citationstecken - " - används i HTML-koden kan de missuppfattas om de skrivs ut i texten på sidan. I stället skriver man då &quot;

Det finns flera sådana specialtecken som bör kodas. Du hittar hela listan på sidan om Specialtecken.

Den här taggen behövs egentligen inte i tabellen, men jag har den med därför att jag har kopplat den till stilmallen.

Granska koden ovan så att du förstår hur jag har använt de olika attributen för TABLE-, TR-, TD- och HR-taggarna i den här tabellen. Lägg märke till att jag har använt attributet HEIGHT i en cell för att bestämma höjden på cellen och därmed även den intilliggande cellens höjd.

I stället för att ange värden för varje tabell för sig, kan du bestämma värdena direkt i stilmallen. Detta är lämpligt  när du använder samma tabellvärden på flera sidor. Även om stilmallen har bestämda värden för tabellerna, kan du ändra dessa värden var som helst direkt i tabelltaggarna i HTML-koden.

/* 550 pixlar bred tabell med padding 3 pixlar och utan kantlinje*/
TABLE {
border: 0px;
width: 550px;
padding: 3px;
}

Det här tillägget till stilmallen gör att en TABLE-tagg utan angivna värden för bredd och "luft" skapar en 550 pixlar bred tabell med 3 pixlars mellanrum mellan cellinnehållet och cellens gränser.

Låt oss säga att du har en sida vars bakgrund är så färgrik eller mönstrad att praktiskt taget all text försvinner i färgen. Då kan du lägga texten i tabeller i tabeller och exakt ange var på sidan dessa skall visas. Titta på den här sidan. Den har en "svår" bakgrund, men de båda textblocken ligger i varsin tabell. Dessa har en lugnt enfärgad bakgrund och därför syns texten mycket bra. Tabellerna har jag sedan lagt på den plats där jag vill ha dem, med hjälp av attributet STYLE. Koden ser ut så här:

<HTML>
<HEAD>
<TITLE>SDN HTML-skola</TITLE>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0" BACKGROUND="seaml22.jpg">
<!-- Tabellerna nedan styrs av attributet STYLE -->
<TABLE BORDER="2" STYLE="position: absolute; left: 110; top: 86" BGCOLOR="#FFFFD8" WIDTH="150" HEIGHT="110" CELLSPACING="0" CELLPADDING="3">
<TR>
<TD WIDTH="100%" ALIGN="center">Första texten</TD>
</TR>
</TABLE>
<TABLE BORDER="2" STYLE="position: absolute; left: 247; top: 254" BGCOLOR="#FFFFD8" WIDTH="150" HEIGHT="110" CELLSPACING="0" CELLPADDING="3">
<TR>
<TD WIDTH="100%" ALIGN="center">Andra texten</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Titta på koden för den första tabellen. Attributet STYLE säger här att tabellen skall ha en absolut placering 110 pixlar från skärmens vänsterkant och 86 pixlar från överkanten. Oavsett hur brett eller smalt besökaren gör webbläsarfönstret, kommer tabellerna att ligga kvar på sina platser.

När det gäller tabeller handlar det mycket om "learning by doing", och i övningsuppgifterna kommer du att flytta in allt innehåll på din hemsida i tabeller.

Övningsuppgifter
Kunskapstest

© SupportData.Net