TABELLER &
LAYOUT (2 AV 2)
Rad- & kolumnspann
Det går att slå ihop flera celler till en, antingen radvis eller
kolumnvis. Detta är bra när man skall placera ut sina objekt på
skärmen på rätt ställe. När man vill slå ihop celler på en rad
använder man ROWSPAN-taggen och i en kolumn således COLSPAN-taggen.
Det går även att kombinera dessa två.
Det är viktigt att tänka på antalet celler i rader och kolumner
när man använder dessa taggar. Det måste gå jämt ut annars ser
det inte klokt ut, eller också fungerar det inte alls.
Visa Exemplet.
<TABLE WIDTH="95%" HEIGHT="250" BORDER="5" CELLSPACING="3" CELLPADDING="5">
<TR>
<TH COLSPAN="3">Uppe över hela</TH>
</TR>
<TR>
<TD ROWSPAN="2">Vänster</TD>
<TD>Mittersta rutan</TD>
<TD ROWSPAN="2">Höger</TD>
</TR>
<TR>
<TD>Ensam på 3:e raden</TD>
</TR>
</TABLE>
Ett annat exempel:
Visa Exemplet.
<TABLE WIDTH="100%" HEIGHT="300" BORDER="3" CELLSPACING="1" CELLPADDING="0">
<TR>
<TD ROWSPAN="3">Rad 1-3, Kol 1</TD>
<TD COLSPAN="3">Rad 1, Kol 2-4</TD>
</TR>
<TR>
<TD>Rad 2, Kol 2</TD>
<TD ROWSPAN="2">Rad 2-3, Kol 3</TD>
<TD>Rad 2, Kol 4</TD>
</TR>
<TR>
<TD>Rad 3, Kol 2</TD>
<TD>Rad 3, Kol 4</TD>
</TR>
<TR>
<TD COLSPAN="4">Rad 4, Kol 1-4</TD>
</TR>
</TABLE>
Tips för tabeller
- Observera att formatering av text i en tabell måste göras i varje enskild
cell. Om t.ex. en font-tag omsluter tabellen så gäller inte
denna för innehållet i tabellen.
- Det går att lägga tabeller i andra tabeller.
Visa Exemplet.
<TABLE WIDTH="100%" HEIGHT="80%" BORDER="1"
CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>
<TABLE ALIGN=right BORDER="1"
CELLSPACING="2" CELLPADDING="0">
<TR>
<TD>
<IMG SRC="bild.gif"></TD>
</TR>
<TR>
<TD ALIGN="center">
Bildtext</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
- Med tabeller kan man dela av fönstret i t.ex. en länkdel och en dokumentdel.
Visa Exemplet.
<TABLE WIDTH="100%" HEIGHT="90%" BORDER="0"
CELLSPACING="0" CELLPADDING="5">
<TR>
<TD BGCOLOR="#CC6666" WIDTH="20%" ALIGN="center" VALIGN="top">
Länk 1<BR>
Länk 2</TD>
<TD WIDTH="80%" ALIGN="left" VALIGN="top">
Resten av dokumentet</TD>
</TR>
</TABLE>
- Man kan använda en tabellrad eller kolumn som en färgad linje som alltid
är lika bred/hög som texten eller bilden. " " betyder
hårt mellanslag (se övriga taggar/specialtecken). Man bör inte lämna en cell tom om det skall fungera
överallt. Vill man att linjen skall vara ännu smalare så kan infoga en
transparent gif-bild på 1 x 1 punkter istället för " ".
Visa Exemplet.
<CENTER>
<TABLE WIDTH="90" BORDER="0"
CELLSPACING="10" CELLPADDING="0">
<TR>
<TD WIDTH="4" BGCOLOR="#FF0000">
<FONT SIZE="1"> </FONT></TD>
<TD ALIGN="left" VALIGN="top">
<FONT SIZE="1">Texten till höger om det röda strecket. Texten till höger om det röda strecket. Texten till höger om det röda strecket</FONT></TD>
</TR>
</TABLE></CENTER>
|
1997-2000