4. Tabeller

.

En enkel tabell:

Html-dokument:	I nettleseren:
<table border=”1″> <caption align=”top”>TABELLTITTEL</caption> <tr> <th>Celle 1</th> <th>Celle 2</th> </tr> <tr> <td>Celle 3</td> <td>Celle 4</td> </tr> </table>	TABELLTITTEL Celle 1 Celle 2 Celle 3 Celle 4

.

Tabell-merker

HTML-MERKER (tags)	Forklaring
table	tabell
tr	(table row) tabellrad
th	(table heading) celle med tykkere, midtstilt skrift
td	(table data) celle
caption	tabelltittel/-kommentar

.

ATTRIBUTTER	Forklaring
border=”1″	Tabellramme
bordercolor=”red/#ff0000″	Fargen på tabellramme
rules=”none”	Kun ytterkant
rules=”rows”	Kun radene
rules=”cols”	Kun kolonnene
colspan=”2″	En celle sammensatt av to horisontale celler
rowspan=”2″	En celle sammensatt av to vertikale celler
cellpadding=”10″	Avstanden mellom celleveggen og dens innhold
cellspacing=”10″	Avstanden mellom cellene
align=”left/center/right/       top/bottom”	Justere celletekst og tabelltittel
bgcolor=”red”/”#ff0000″	Rød bakgrunnsfarge
background=”url”	Bakgrunnsbilde
width/height=”50%”/300″	Tabellens/cellens bredde/høyde

.

EKSEMPLER
.

Colspan, Rowspan

Html-dokument:	I nettleseren:
<table border=”2″> <tr> <th>th</th> <th colspan=”2″>Colspan</td> </tr> <tr> <td rowspan=”2″>Rowspan</td> <td>td 1</td> <td>td 2</td> </tr> <tr> <td>td 3</td> <td>td 4</td> </tr> </table>	th Colspan Rowspan td 1 td 2 td 3 td 4

.

Cellspacing

Html-dokument	I nettleseren
<table border=”3″ cellspacing=”10″&gt <tr&gt <th&gtCelle 1</th> <th&gtCelle 2</th&gt </tr&gt <tr&gt <td&gtCelle 3</td&gt <td&gtCelle 4</td&gt </tr&gt </table&gt	Celle 1 Celle 2 Celle 3 Celle 4

.

Cellpadding

Html-dokument	I nettleseren
<table border=”3″ cellpadding=”10″&gt <tr&gt <th&gtCelle 1</th> <th&gtCelle 2</th&gt </tr&gt <tr&gt <td&gtCelle 3</td&gt <td&gtCelle 4</td&gt </tr&gt </table&gt	Celle 1 Celle 2 Celle 3 Celle 4

.

Div. celleinnhold

Html-dokument	I Nettleseren
<p align=”center”> <table border=”3″ width=”250″ height=”150″> <tr> <th bgcolor=”#ff0000″>bgcolor=”#ff0000″</th> <th background=”url”>background=”url”</th> </tr> <tr> <th align=”left”>align=”left”</th> <th align=”right”>align=”right”</th> </tr> </table> </p>	bgcolor =”#ff0000″ background =”url” align =”left” align =”right”

.

Tabeller er veldig fleksible. En kan putte både avsnitt, tabller og lister inni en celle.

.