Tabeller


Koderna som bygger tabeller


<TABLE>...</TABLE>: börjar och avslutar hela tabellen.

<TR>...</TR> inleder och avslutar varje rad i tabellen. <TR>

<TD>...</TD>: inleder och avslutar varje individuell cell i tabellen. Mellan koderna placeras det du vill skriva in. <TD>

<TH>...</TH>: inleder och avslutar varje individuell cell i tabellen. Fungerar precis som <TD> med den skillnaden att textinnehållet i en <TH> centreras och sätts med fet stil. Mellan dessa koder placeras det du vill skriva in. <TH>

<TABLE>
(inleder tabellen)
<TR>(inleder för-
sta raden)		 <TH>
Cell 1
</TH> 		<TD>
Cell 2
</TD> 		<TD>
Cell 3
</TD> 		</TR>
avslutar
första raden
<TR>(inleder
andra raden)		 <TH>
Cell 4
</TH> 		<TD>
Cell 5
</TD> 		<TD>
Cell 6
</TD> 		</TR>
avslutar
andra raden
</TABLE>
(avslutar tabellen)



Extra breda celler med COLSPAN.


Cell - 1
Cell - 2 Cell - 3 Cell - 4 Cell - 5
Cell - 6 Cell - 7 Cell - 8 Cell - 9

<TABLE WIDTH="90%" BORDER>
<TR>
<TH COLSPAN=4>Cell - 1</TH>
</TR>
<TR>
<TD>Cell - 2</TD>
<TD>Cell - 3</TD>
<TD>Cell - 4</TD>
<TD>Cell - 5</TD>
</TR>
<TR>
<TD>Cell - 6</TD>
<TD>Cell - 7</TD>
<TD>Cell - 8</TD>
<TD>Cell - 9</TD>
</TR>
</TABLE>


Extra höga celler med ROWSPAN.


Cell - 1 Cell - 2 Cell - 3 Cell - 4
Cell - 5 Cell - 6 Cell - 7
Cell - 6 Cell - 7 Cell - 8
Cell - 9 Cell - 10 Cell - 11

<TABLE BORDER>
<TR>
<TH ROWSPAN=4>Cell - 1</TH>
<TD>Cell - 2</TD>
<TD>Cell - 3</TD>
<TD>Cell - 4</TD>
</TR>
<TR>
<TD>Cell - 5</TD>
<TD>Cell - 6</TD>
<TD>Cell - 7</TD>
</TR>
<TR>
<TD>Cell - 6</TD>
<TD>Cell - 7</TD>
<TD>Cell - 8</TD>
</TR>
<TR>
<TD>Cell - 9</TD>
<TD>Cell - 10</TD>
<TD>Cell - 11</TD>
</TR>
</TABLE>



Justera tabellens innehåll.


Cell - 1 Cell - 2 Cell - 3
Cell - 4 Cell - 5 Cell - 6


<TABLE WIDTH="450" BORDER>
<TR ALIGN="RIGHT" VALIGN="TOP">
<TD HEIGHT="60">Cell - 1</TD>
<TD HEIGHT="60">Cell - 2</TD>
<TD HEIGHT="60">Cell - 3</TD>
</TR>
<TR>
<TD HEIGHT="60" ALIGN="LEFT" VALIGN="TOP">Cell - 4</TD>
<TD HEIGHT="60" ALIGN="CENTER" VALIGN="MIDDLE">Cell - 5</TD>
<TD HEIGHT="60" ALIGN="RIGHT" VALIGN="BOTTOM">Cell - 6</TD>
</TR>
</TABLE>


Justera text med MIDDLE och BASELINE.


Cell - 1 Cell - 2 Cell - 3
Cell - 4 Cell - 5 Cell - 6


<TABLE BORDER>
<TR ALIGN="CENTER" VALIGN="MIDDLE">
<TD HEIGHT="60" WIDTH="100"><FONT SIZE="2">Cell - 1
</FONT></TD>
<TD HEIGHT="60" WIDTH="150"><FONT SIZE="4">Cell - 2
</FONT></TD>
<TD HEIGHT="60" WIDTH="260"><FONT SIZE="6">Cell - 3
</FONT></TD>
</TR>
<TR ALIGN="CENTER" VALIGN="BASELINE">
<TD HEIGHT="60" WIDTH="100"><FONT SIZE="2">Cell - 4
</FONT></TD>
<TD HEIGHT="60" WIDTH="150"><FONT SIZE="4">Cell - 5
</FONT></TD>
<TD HEIGHT="60" WIDTH="260"><FONT SIZE="6">Cell - 6
</FONT></TD>
</TR>
</TABLE>


Luftiga celler med CELLPADDING.


CELLPADDING="10"
Cell - 2 Cell - 3 Cell - 4 Cell - 5

<TABLE WIDTH="90%" CELLPADDING="10" BORDER>
<TR>
<TH COLSPAN=4>CELLPADDING="10"</TH>
</TR>
<TR>
<TD>Cell - 2</TD>
<TD>Cell - 3</TD>
<TD>Cell - 4</TD>
<TD>Cell - 5</TD>
</TR>
</TABLE>


CELLPADDING="15"
Cell - 2 Cell - 3 Cell - 4 Cell - 5

<TABLE WIDTH="90%" CELLPADDING="15" BORDER>
<TR>
<TH COLSPAN=4>CELLPADDING="15"</TH>
</TR>
<TR>
<TD>Cell - 2</TD>
<TD>Cell - 3</TD>
<TD>Cell - 4</TD>
<TD>Cell - 5</TD>
</TR>
</TABLE>


CELLPADDING="20"
Cell - 2 Cell - 3 Cell - 4 Cell - 5

<TABLE WIDTH="90%" CELLPADDING="20" BORDER>
<TR>
<TH COLSPAN=4>CELLPADDING="20"</TH>
</TR>
<TR>
<TD>Cell - 2</TD>
<TD>Cell - 3</TD>
<TD>Cell - 4</TD>
<TD>Cell - 5</TD>
</TR>
</TABLE>


Ändra ramtjocklek med border.


Ramen är 6 pixlar tjock


<TABLE WIDTH="90%" CELLPADDING="5" BORDER="6">
<TR>
<TH>Ramen är 6 pixlar tjock</TH>
</TR>
</TABLE>


Ramen är 12 pixlar tjock


<TABLE WIDTH="90%" CELLPADDING="5" BORDER="12">
<TR>
<TH>Ramen är 12 pixlar tjock</TH>
</TR>
</TABLE>


Ramen är 18 pixlar tjock


<TABLE WIDTH="90%" CELLPADDING="5" BORDER="18">
<TR>
<TH>Ramen är 18 pixlar tjock</TH>
</TR>
</TABLE>


Luft mellan cellerna med CELLSPACING.


CELLSPACING="10" CELLSPACING="10"


<TABLE WIDTH="90%" CELLPADDING="5" BORDER="6" CELLSPACING="10">
<TR>
<TD>CELLSPACING="10"</TD>
<TD>CELLSPACING="10"</TD>
</TR>
</TABLE>


CELLSPACING="15" CELLSPACING="15"


<TABLE WIDTH="90%" CELLPADDING="5" BORDER="6" CELLSPACING="15">
<TR>
<TD>CELLSPACING="15"</TD>
<TD>CELLSPACING="15"</TD>
</TR>
</TABLE>


CELLSPACING="20" CELLSPACING="20"


<TABLE WIDTH="90%" CELLPADDING="5" BORDER="6" CELLSPACING="20">
<TR>
<TD>CELLSPACING="20"</TD>
<TD>CELLSPACING="20"</TD>
</TR>
</TABLE>


Flytta tabellens rubrik.


RUBRIKEN ÖVER TABELLEN!
Koden för att få rubriken över tabellen.<caption align="top">
Koden för att få rubriken över tabellen.<caption align="top">

<table border=10>
<caption align="top">RUBRIKEN ÖVER TABELLEN!</caption>
<tr><td>Koden för att få rubriken över tabellen.<caption align="top"></td></tr>
<tr><td>Koden för att få rubriken över tabellen.<caption align="top"></td></tr>
</table>




RUBRIKEN UNDER TABELLEN!
Koden för att få rubriken under tabellen.<caption align="bottom">
Koden för att få rubriken under tabellen.<caption align="bottom">


<table border=5>
<caption align="bottom">RUBRIKEN UNDER TABELLEN!</caption>
<tr><td>Koden för att få rubriken under tabellen.<caption align="bottom"></td></tr>
<tr><td>Koden för att få rubriken under tabellen.<caption align="bottom"></td></tr>
</table>




Ändra tabellens bakgrundsfärg.

Cell 1 black Cell 2 silver  Cell 3 gray Cell 4 white
Cell 5 maroon Cell 6 red Cell 7 purple Cell 8 fuchsia
Cell 9 green Cell 10 lime Cell 11 olive Cell 12 yellow
Cell 13 navy Cell 14 blue Cell 15 teal Cell 16 aqua

<table WIDTH=95% BORDER=1>
<tr>
<td bgcolor="black"><Font color="#FFFFFF">Cell 1 black</td></FONT>
<td bgcolor="silver"><Font color="#000000">Cell 2 silver </td></FONT>
<td bgcolor="gray"><Font color="#000000">Cell 3 gray</td></FONT>
<td bgcolor="white"><Font color="#000000">Cell 4 white</TD></FONT>
</tr><tr>
<TD bgcolor="maroon"><Font color="#000000">Cell 5 maroon</font></td>
<td bgcolor="red"><Font color="#000000">Cell 6 red</td></FONT>
<td bgcolor="purple"><Font color="#000000">Cell 7 purple</td></FONT>
<td bgcolor="fuchsia"><Font color="#000000">Cell 8 fuchsia</td></FONT>
</tr><tr>
<td bgcolor="#green"><Font color="#000000">Cell 9 green</td></FONT>
<td bgcolor="lime"><Font color="#000000">Cell 10 lime</td></FONT>
<td bgcolor="olive"><Font color="#000000">Cell 11 olive</td></FONT>
<td bgcolor="yellow"><Font color="#000000">Cell 12 yellow</FONT></td>
</tr><tr>
<td bgcolor="navy"><Font color="#000000">Cell 13 navy</font></td>
<td bgcolor="blue"><Font color="#000000">Cell 14 blue</td></FONT>
<td bgcolor="teal"><Font color="#000000">Cell 15 teal</td></FONT>
<td bgcolor="aqua"><Font color="#000000">Cell 16 aqua</td></tr></FONT>
</table>


Exempel TABLE med klickbara bilder. <TRYCK HÄR>


HTML-meny