Tabeller

1. Tabeller

Idag finns det många olika upplösningar på bildskärmar. Det gör att en sida kan se bra ut i en viss upplösning, men se helt annorlunda ut i en annan upplösning. Rubriker och text kan delas över flera rader, fastän man inte vill det m.m. och det kan bli väldigt konstigt.

Dessa oönskade förändringar kan vi komma förbi genom att lägga in vårt material i en "fast struktur", som en tabell representerar. En annan fördel med tabeller är att det är lättare att placera bilder och annan text där vi vill ha dem, utan att krångla till det för mycket.

2. Kodstrukturen

En enkel kodstruktur för en tabell med bara en cell:

<html> <head> <title> </title> </head> <body> <table width="200" height="100" border="1"> <tr> <td> Här skriver vi text m.m. </tr> </table> </body> </html>

Denna kod ger en tabell med följande utseende:

Här skriver vi text m.m.

<table> talar om att vi skapar en tabell och avslutas med </table>. <tr> betyder på svenska tabellrad och representerar varje ny rad i tabellen. Används varje gång vi vill skapa ännu en ny rad med celler. <td> betyder tabelldata och med denna kod skapar vi celler, i vilka vi senare lägger vi in vår text och våra bilder. <td> behöver inte avslutas, tillskillnad från <tr> och <table>. Med border="1". kan jag ange hur stor ramen för tabellen skall vara och om jag anger värdet till 0, kommer jag att dölja ramen helt. Sedan kan du ange högre värden också. Med width och height anger jag hur bred resp. hög tabellen skall bli. På samma sätt kan vi ange cellens storlek genom att sätta width och height inom td.

width och height kan vi ange på lite olika sätt. Dels kan de anges i procent och dels i pixlar. När man anger procent, blir storleken i förhållande till bildskärmen och koden ser ut så här <td width="30%" height="70%">.

3. Tabeller med 2 celler

När vi placerar in text och bilder placeras dessa i tabellens celler. Vet vi om detta, är det inte svårt att fixa.

Vad som däremot kan vara lite mer krångligt är att placera dem inom cellen, så de hamnar där vi vill. Jag tänker ex. på centrering, rak vänstermarginal och att innehållet skall börja redan längst upp i cellen och inte en bit ner.

Nu finns attributen align och valign som vi kan lägga in i <td> koden. Med <td align="center"> kan vi centrera innehållet, med <td align="left"> ger vi texten en rak vänstermarginal, och med <td align="right"> ger vi det en rak högermarginal. Slutligen har vi <td align="justify"> vilket ger både en rak vänster- och högermarginal åt texten, men detta sistnämnda fungerar inte i alla webbläsare.

align representerar som vi sett den horisontella placeringen i cellen. Men med attributet valign kan vi däremot bestämma innehållets vertikala placering och attributet kan ha värdena <td valign="baseline">, <td valign="bottom">, <td valign="center">, <td valign="top">. Båda attributen kan avnändas tillsammas inom TD. align och valign kan inte bara avnändas för att placera text, utan också för att placera bilder.

Nedan visar jag koden för en tabell med två celler, där jag placerat in en bild och lite text, samt där jag placerat in dem horisontellt och vertikalt.

<html> <head> <title>xxx</title> </head> <body> <table width="400" height="100" border="1"> <tr> <td width="230" align="left" valign="top"> <img src="huset.gif" width="200" height="60" border="0" alt="Huset"> <td width="230" align="left" valign="top"> Text, text och massor av text... </tr> </table> </body> </html>

Denna kod ger en tabell med detta utseende:

Huset Text, text och massor av text...

Men skulle vi vilja ha två celler under varandra istället, skriver vi:

<html> <head> <title>xxx</title> </head> <body> <table width="300" height="100" border="1"> <tr> <td align="left" valign="top" >Text och bilder </tr> <tr> <td align="left" valign="top">Text och bilder </tr> </table> </body> </html>

Och då får vi en tabell som ser ut så här istället:

Text och bilder

Text och bilder

4. En tabell med 4 celler på två rader

Om vi vill ha fyra celler, två på övre raden och två på undre, använder vi koden:

<html> <head> <title>xxx</title> </head> <body> <table width="300" height="100" border="1"> <tr> <td> Cell 1 <td> Cell 2 </tr> <tr> <td> Cell 3 <td> Cell 4 </tr> </table> </body> </html>

Följande bild visar hur detta ovanstående skulle se ut:

Alltså: om jag vill skapa en ny cell på samma rad, använder jag koden <td>. Men om jag vill skapa en ny cell på en annan rad, måste jag avsluta aktuell rad genom </tr> och skapa en ny rad genom <tr> och sedan <td>.

5. Avstånd mellan cellerna i tabellen

Vidare kan vi genom attribut till table ange avståndet mellan de olika cellerna i vår tabell. Genom attributet cellspacing reglerar vi avståndet mellan celler på samma rad och genom cellpadding avståndet mellan celler på olika rader. Koden kan se ut så här och avståndet är angivet i pixlar:

<table cellspacing="2" cellpadding="2" width="200" height="300" border="1">

6. Varför syns inte cellen?

Ett problem med celler är att de måste få ett innehåll för att synas eller markeras på webbsidan. Missar vi detta, hjälper det inte hur rätt vi än skrivit HTML-koden.

Men det finns vissa knep för att komma runt detta problem. Ett är att lägga in en liten transparent bild på sidan. Ett annat knep är att lägga in en radbrytning <br> i cellen, istället för bilden.

7. Bakgrundsfärger och bakgrundsbilder

Om vill ändra bakgrundsfärgen i en enskild cell eller lägga in en bakgrundsbild, går det alldeles utmärkt. Om vi vill ha en vit bakgrundsfärg, anger vi koden <td bgcolor="#ffffff"> och om vi vill ha en bakgrundsbild, skriver vi i koden exempelvis <td background="papper.gif">. Båda attributen kan kombineras med varandra.

background="papper.gif" och bgcolor kan även skrivas inom table och ger då bakgrundsbild och färg åt hela tabellen. Definierar vi ingen bakgrundsfärg för tabellen, antar denna det värde som står inom body.

8. En cell som spänner över flera andra celler

För att kunna Sedan kan vi använda attributen rowspan och colspan. Dessa andvänds när vi vill att en cell skall spänna över två eller flera celler, vertikalt resp. horisontellt.

Med följande två bilder till koden vill jag åskådliggöra hur vi använder dessa attribut. De kan vara lite svåra att förstå, innan vi får kläm på dem.

Ett exemplet med rowspan:

<html> <head> <title>xxx</title> </head> <body> <table cellspacing="2" cellpadding="2" width="200" height="100" border="1"> <tr> <td rowspan="2"><br></td> <td><br></td> </tr> <tr> <td><br></td> </tr> </table> </body> </html>

rowspan:
colspan

Ett exemplet med colspan:

<html> <head> <title>xxx</title> </head> <body> <table cellspacing="2" cellpadding="2" width="200" height="100" border="0"> <tr> <td colspan="2"><br></td> </tr> <tr> <td><br></td> <td><br></td> </tr> </table> </body> </html>

colspan:
colspan

9. Färgad ram runt tabellen

Nu går det också att lägga en färgad ram runt tabellen. Genom att ange border="1" kommer en grå ram att visas, en ram som är förvald.

Men genom att ange <table bordercolor="#666666" cellspacing="0" cellpadding="0" border="1"> kommer istället en liten grå ram i annan nyans att synas runt hela tabellen. Genom att ge cellspacing och cellpadding olika värden, kan vi laborera med tabellramens utseende.

Detta fungerar bäst i Internet Explorer och inte så bra i Netscape. De tolkar dessa koder på lite olika sätt.

Huset Text, text och massor av text...

10. Tabellrubrik och cellrubrik

Genom caption kan vi skapa en rubrik för hela tabellen. Texten kommer då på webbsidan att placeras ovanför tabellramen. Men om vi vill skapa en rubrik för den enskilda cellen väljer vi istället th. th fungerar precis som en vanlig cell och om denna skall sträcka sig horisontellt över två eller fler celler, måste vi använda colspan.

Men det är väldigt ovanligt att man använder caption och th, man jag vill ändå visa hur det fungerar. I nedanstående exempel visar hur vi använder dem och jag har även givit cellerna olika färger:

<html> <head> <title>Tabellövning</title> </head> <body bgcolor="#99cccc"> <table border=""1" cellspacing="10" cellpadding="10" width="300" height="200"> <caption><font size="5">Celler med olika färger</font></caption> <tr> <th colspan="2" bgcolor="#3399cc"> Denna cell är en kolumnrubrik </tr> <tr> <td bgcolor="#009999"> Bakgrunden har koden "#009999" <td bgcolor="#339900"> Bakgrunden har koden "#339900" </tr> <tr> <td bgcolor="#999900"> Bakgrunden har koden "#999900" <td bgcolor="#669999"> Bakgrunden har koden "#669999" </tr> <tr> <td colspan="2"> <br> </tr> </table> </body> </html>

Denna kod ger en tabell med detta utseende:

Celler med olika färger
Denna cell är en kolumnrubrik

Bakgrunden har koden "#009999" Bakgrunden har koden "#339900"

Bakgrunden har koden "#999900" Bakgrunden har koden "#669999"





kontakt	© Stefan Dahl�n	Tisdag 7:e oktober 2008