http://monkeytoys.com/htmlkurs/
Senast uppdaterad: 1997-04-16 klockan: 19.00
Lektion 6: Tabeller
Vi ska lägga till en tabell i hemsidan. Först ska vi titta lite på hur man gör tabeller. Vi börjar med enklast tänkbara tabell. 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=2>
TABLE (tabell) betyder att vi vill göra
en tabell. BORDER=2 talar om att vi vill ha
en ram som är 2 pixlar 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=2>
<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=2>
<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=2>
<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=2>
<TR>
<TD>
En ruta med ram runt
</TD>
<TD>
En ruta till 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 ruta till 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=2>
<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 och ritar ut lite hjälplinjer så blir det lättare att förstå:
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> och slutar med en </TR>. Varje ruta börjar med en <TD> och slutar med en </TD>. Det blev väl lite mer överskådligt?
Du kan säkert gissa att tabellen ser ut så här:
| En ruta med ram runt | En ruta till med ram runt |
| En ruta med ram runt på rad 2 | En ruta till med ram runt på 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=2>
<TR> <TH COLSPAN=2> Tabellrubrik </TH> </TR>
<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>
<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.
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 heter
ROWSPAN och som anger hur många rader
högt ett fält ska vara. Vi ser efter hur tabellen
tar sig ut nu:
| Tabellrubrik | |
|---|---|
| En ruta med ram runt | En ruta till med ram runt |
| En ruta med ram runt på rad 2 | En ruta till med ram runt på 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 flera av våra favoritlänkar i. Komplettera HTML-dokumentet från lektion 5 så att det ser ut så här:
