TABLES

Tabeller är väldigt användbara i HTML. Och de är inte så svåra att förstå, men har många olika taggar, då det finns mycket man vill kunna ställa in. Men det finns bara tre grundtaggar, med sluttagg till, förstås.

GRUNDTAGGAR
Först talar du om att det är en tabell, och var den slutar.

Så här: <TABLE></TABLE>.

Därinne anger du raderna.

Så här:<TR></TR>

Och slutligen varje cell.

<TD></TD>

Vill du lägga in nått i en cell gör du det mellan och taggarna. Vill du inte lägga in nått, så får du tala om det ändå. Gör ett mellanslag, eller ändra texten till bakgrundsfärgen och skriv en punkt.

TJOCKLEK OCH ANNAT
Därefter kommer lulllull: Det ska se bra ut också.
<TABLE BORDER=X> är en bra tagg. Skriv dit den efter <TABLE> taggen, eller lägg till BORDER direkt i den. Siffran vid X talar om hur tjock kanten ska vara runt en cell. Det anges i pixels. Ange till två och du får följande resultat:

Lite text i
varje ruta

Sen finns det CELLPADDING=x och CELLSPACING=x. CELLPADDING bestämmer avståndet mellan cellens kant och dess innehåll, och CELLSPACING bestämmer avståndet mellan cellerna. Värdena anges i pixels, och här är dom satta till 10. Deafult är 1 resp 2 pixels.
Lite text i
varje ruta

Det går även bra att reglera cellens bredd över skärmen. Det görs i % eller pixels. TD WIDTH="10%"
Här är with 250 och här 150

Vill man variera var i cellen innehållet placeras lägger man till VALIGN=X efter TR i <TR> taggen. X ersätts med ordet i vänstra cellen, för önskat resultat.
TOP Några
rader
i
rutan.

MIDDLE Några
rader
i
rutan.

BOTTOM Några
rader
i
rutan.

I sidled skriver man inte VALIGN utan ALIGN.
LEFTText
Ännu mera text och en snutt till

CENTERText
Ännu mera text och en snutt till

RIGHTText
Ännu mera text och en snutt till

Kom ihåg att LEFT är standard och inte behöver anges, men kan anges ändå, om man vill.

FLERA RUTOR
Men en tabell med bara en ruta är bara en ruta.
Flera rutor ser ut tex så här:
Lite text i varje ruta
Så här ser koden ut.
<TABLE>
<TABLE BORDER=2>
<TR><TD> Lite text i </TD><TD> varje ruta </TD></TR>
</TABLE>

Eller så här:
Lite text i
varje ruta
Då ser koden ut så här:
<TABLE>
<TABLE BORDER=2>
<TR><TD> Lite text i </TD></TR>
<TR><TD> varje ruta </TD></TR>
</TABLE>

Eller kombinerat:
Lite text
i varje ruta
Och koden igen.
<TABLE>
<TABLE BORDER=2>
<TR><TD> Lite </TD><TD>text </TD></TR>
<TR><TD> i varje </TD><TD> ruta </TD></TR>
</TABLE>

ÖVERLAPPNING
Du kan även täcka flera celler med en enda cell.
Både uppåt i sid- och höjdled. Titta på följande tabell.
Cell ACell B Cell C Cell D
Cell ECell F Cell G Cell H

Och denna:
Cell ACell D
Cell ECell F Cell G Cell H

Hur gjorde jag? Jo, i <TD> taggen lade jag till en rad: COLSPAN=3. Jag tog också bort taggarna för cell B och C. Motsvarande tagg för förlängning av kolumner finns också: ROWSPAN=X

FÄRGER I CELLEN
<TD BGCOLOR="#FFFF00"> ger cellen färg.
I TR-taggen får hela raden färg

RUBRIK
Släng in en CAPTION efter TABLE-taggen, så kan du få en rubrik.

HUVUDRUBRIK
Cellinnehåll.

Denna koden användes:
<TABLE BORDER=2>
<CAPTION>
HUVUDRUBRIK
</CAPTION>
<TR>
<TD>Cellinnehåll.
</TD>
</TR>
</TABLE>

TILLBAKA TILL WEB-SNICKERI SIDAN