Lektion 6


Tabeller

Vi ska lägga till en tabell på hemsidan. Först ska vi titta lite på hur man gör tabeller. Vi börjar med enklast tänkbara. En tabell med bara en ruta:

En ruta med ram runt

Nu ska vi gå igenom steg för steg hur man gör. Vi börjar med att tala om att vi vill ha en tabell:

<TABLE BORDER=1>

TABLE (tabell) betyder att vi vill göra en tabell. BORDER=1 talar om att det ska vara en ram som är 1 pixel bred mellan rutorna och runt tabellen. Nästa steg är att tala om att vi vill påbörja en rad i tabellen:

<TABLE BORDER=1>
<TR>

<TR> (table row) betyder att här börjar en ny rad i tabellen. Vi måste tala om att vi vill ha ett fält i tabellen också:

<TABLE BORDER=1>
<TR>
<TD>
En ruta med ram runt

<TD> (table data) gör att vi får ett datafält i tabellen. Dessa tre rader är vad vi behöver för att definiera en enkel tabell. Vi sätter dit slutkoder också:

<TABLE BORDER=1>
<TR>
<TD>
En ruta med ram runt
</TD>
</TR>
</TABLE>

Nu ska vi lägga till en ruta i tabellen bredvid den vi redan har. Det ser ut så här:

<TABLE BORDER=1>
<TR>
<TD>
En ruta med ram runt
</TD>
<TD>
En till ruta med ram runt
</TD>
</TR>
</TABLE>

Vi lägger alltså till ett datafält efter det första men före slutet på raden (</TR>). Då ser tabellen ut så här:

En ruta med ram runt

En till ruta med ram runt

När vi ändå är igång kan vi lägga till en rad i tabellen så att det blir två rader med vardera två fält i:

<TABLE BORDER=1>
<TR>
<TD>
En ruta med ram runt
</TD>
<TD>
En ruta till med ram runt
</TD>
</TR>
<TR>
<TD>
En ruta med ram runt på rad 2
</TD>
<TD>
En ruta till med ram runt på rad 2
</TD>
</TR>
</TABLE>

Vi lägger in koderna för den nya raden efter den första raden, men före tabellslutet (</TABLE>).


Blev det mycket på en gång? Vi skriver om ovanstående HTML-kod på ett annat sätt så blir det lättare att förstå:

 Tabellexempel

Utan att ändra ordningen på HTML-koderna har vi flyttat dem så att flera hamnar på samma rad. Då ser vi att tabellen börjar med<TABLE> och slutar med </TABLE>. Varje tabellrad börjar med en <TR> (ny rad) och slutar med en </TR> (radslut). Varje ruta börjar med en <TD> (ny ruta) och slutar med en </TD> (rutslut). Det blev väl lite mer överskådligt? Du kan säkert gissa att tabellen ovan ser ut så här:

Ruta 1, rad 1

Ruta 2, rad 1

Ruta 1, rad 2

Ruta 2, rad 2

Ibland händer det att man vill ha en ruta som är lika lång som flera fält. Vi gör en sådan och sätter en rubrik i den:

<TABLE BORDER=1>
<TR><TH COLSPAN=2>Tabellrubrik</TH></TR>
<TR><TD>Ruta 1, rad 1</TD><TD>Ruta 2, rad 1
</TD></TR>
<TR><TD>Ruta 1, rad 2</TD><TD>Ruta 2, rad 2
</TD></TR>
</TABLE>

<TH> (table header) fungerar på samma sätt som <TD>, med den skillnaden att allt som står i ett <TH>-fält skrivs med fetstil och centreras. COLSPAN=2 betyder att fältet ska vara lika brett som 2 kolumner (fält) i tabellen. På samma sätt finns det en kod som heterROWSPAN och som anger hur många rader högt ett fält ska vara.

Vi ser efter hur tabellen tar sig ut nu:

Tabellrubrik

Ruta 1, rad 1

Ruta 2, rad 1

Ruta 1, rad 2

Ruta 2, rad 2

Det finns fler funktioner att använda tillsammans med tabeller, men dem kan vi lämna till senare. Nu ska vi göra en tabell på vår hemsida. Vi gör en tabell med ytterligare några av våra favoritlänkar i. Komplettera HTML-dokumentet från lektion 5 så att det ser ut så här:

<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#7DBDE3" TEXT="#000000"
LINK="#0000FF" VLINK="#333333" ALINK="#FFFF80">
<CENTER>
<H1>Välkommen till min hemsida!</H1>
</CENTER>
<HR WIDTH="100%" />
<P>
<FONT SIZE=4>
Det här är mitt första försök att göra en egen hemsida.
Ju mer jag lär mig, desto bättre kommer sidan att bli.
Ha lite tålamod så blir du rikligt belönad!
</FONT>
</P>
<P>
<CENTER>
<H4>Här är mina idoler:</H4>
<P>
<IMG SRC="vacker.jpg" ALT="Skönheter" BORDER=1>
</P>
</CENTER>
</P>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.ifokus.se">
<IMG SRC="ifokus.gif" ALT="iFokus" BORDER=0>
</A>
<A HREF="http://www.aktieguiden.com">
<IMG SRC="aktieguiden.gif" ALT="Aktieguiden" BORDER=0></A>
</P>
</CENTER>
<P>
<CENTER>
<TABLE BORDER=1 WIDTH="80%">
<TR>
<TH COLSPAN=2>Fler favoritlänkar:</TH>
</TR>
<TR>
<TD>
<A HREF="http://www.bokstavligt.com/"> Bokstavligt Förlag
</A>
</TD>
<TD>
Ger ut fackböcker, exempelvis HTML på svenska och Sökmotoroptimering.
</TD>
</TR>
<TR>
<TD>
<A HREF="http://www.tongoys.com/">Tongoys</A>
</TD>
<TD>
Leksaken vuxna önskar fanns när de var små. 
En bra anledning att skaffa barn. :-) 
</TD>
</TR>
</TABLE>
</CENTER>
</P>
<HR WIDTH="100%" />
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:ingenreklam@bokstavligt.com"> ingenreklam@bokstavligt.com</A>
</FONT>
</CENTER>
</BODY>
</HTML>

WIDTH=”80%” är en frivillig kod som betyder att tabellen ska ha en bredd som motsvarar 80 procent av webbläsarfönstrets bredd. Du kan även ange bredden i pixlar.

Vi ska göra en sak till med tabeller innan vi går vidare till nästa lektion. Som sidan ser ut nu kommer texten att löpa från vänster kant till höger innan den radbryts. För den som har en skärm med hög upplösning kommer det att bli breda rader som är svåra att läsa. Därför ska vi lägga in en tabell som begränsar bredden på sidan till 900 pixlar.

Gör så här:

<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#7DBDE3" TEXT="#000000"
LINK="#0000FF" VLINK="#333333" ALINK="#FFFF80">
<CENTER>
<TABLE WIDTH="900">
<TR>
<TD>
<CENTER>
<H1>Välkommen till min hemsida!</H1>
</CENTER>
<HR WIDTH="100%" />
<P>
<FONT SIZE=4>
Det här är mitt första försök att göra en egen hemsida.
Ju mer jag lär mig, desto bättre kommer sidan att bli.
Ha lite tålamod så blir du rikligt belönad!
</FONT>
</P>
<P>
<CENTER>
<H4>Här är mina idoler:</H4>
<P>
<IMG SRC="vacker.jpg" ALT="Skönheter" BORDER=1>
</P>
</CENTER>
</P>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.ifokus.se">
<IMG SRC="ifokus.gif" ALT="iFokus" BORDER=0>
</A>
<A HREF="http://www.aktieguiden.com">
<IMG SRC="aktieguiden.gif" ALT="Aktieguiden" BORDER=0></A>
</P>
</CENTER>
<P>
<CENTER>
<TABLE BORDER=1 WIDTH="80%">
<TR>
<TH COLSPAN=2>Fler favoritlänkar:</TH>
</TR>
<TR>
<TD>
<A HREF="http://www.bokstavligt.com/"> Bokstavligt Förlag </A>
</TD>
<TD>
Ger ut fackböcker, exempelvis HTML på svenska och Sökmotoroptimering.
</TD>
</TR>
<TR>
<TD>
<A HREF="http://www.tongoys.com/">Tongoys</A>
</TD>
<TD>
Leksaken vuxna önskar fanns när de var små.
En bra anledning att skaffa barn. :-) 
</TD>
</TR>
</TABLE>
</CENTER>
</P>
<HR WIDTH="100%" />
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:ingenreklam@bokstavligt.com"> ingenreklam@bokstavligt.com</A>
</FONT>
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Här har vi alltså lagt in innehållet på hemsidan i en tabell som är 900 pixlar bred. För att få sidan centrerad i mitten av webbläsarfönstret satte jag en <CENTER> efter <BODY> och en avslutande </CENTER> före </BODY>. Lägg också märke till att de två horisontella strecken inte längre är 100 procent av webbläsarfönstrets bredd, utan 100 procent av tabellens bredd.

Spara dokumentet under namnet lektion6.htm och ta en titt på sidan. Så här ser den ut.

 

Lektion 6 - HTML på svenska

Klicka för att förstora

Vi fortsätter med lektion 7.