vorlesungsunterlagen, reinisch, 2001 10 17

tabellen werden hauptsaechlich zur positionierung von elementen auf einer webseite verwendet, obwohl sie urspruenglich nur fuer einfache tabellarische auflistungen vorgesehen waren. 

<table>...</table>
erstellt eine tabelle.

<tr>...</tr>
erstellt eine tabellenzeile (tableRow)

<td>...</td>
erstellt eine tabellenzelle (tableData)

zb.:
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
ergibt:
 ------- 
| 1 | 2 |
|---+---|
| 3 | 4 |
 ------- 

<table
	border="1" (erzeugt rand)
	cellpadding="10" (erzeugt abstand vom inhalt zum zellenrand)
	cellspacing="3" (erzeugt abstand zwischen den zellen)
	bgcolor="#ff0000" (erzeugt hintergrundfarbe)
	background="bild1.jpg" (erzeugt hintergrundbild)
	width="50%" oder auch width="300" (breitenangabe)
	height="50%" oder auch height="300" (hoehenangabe)
	>...</table>

<td
	bgcolor="#ff0000" (erzeugt hintergrundfarbe)
	background="bild1.jpg" (erzeugt hintergrundbild)
	width="50% | 300" (breitenangabe, '|' bedeutet oder)
	height="50% | 300" (hoehenangabe)
	align="left | center | right" (gibt horizontale anordnung an)
	valign="top | middle | bottom" (gibt vertikale anordnung an)
	nowrap (verhindert zeilenumbruch)
	colspan="2" (verbindet zellen horizonzal 'COLums')
	rowspan="2" (verbindet zellen vertikal 'Reihen')
	>...</td>

zb.:
<table>
<tr><td colspan="2">1+2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
ergibt:
 ----------- 
|  1+2  | 3 |
|-------+---|
| 4 | 5 | 6 |
 ----------- 

zb.:
<table>
<tr><td rowspan="2">1+3</td><td>2</td></tr>
<tr><td>4</td></tr>
</table>
ergibt:
 ------- 
| 1 | 2 |
| + |---|
| 3 | 4 |
 ------- 

zb.:
<table>
<tr><td colspan="2">1+2</td><td>3</td></tr>
<tr><td>4</td><td rowspan="2" colspan="2">5+6+8+9</td></tr>
<tr><td>7</td></tr>
</table>
ergibt:
 ----------- 
|  1+2  | 3 |
|-------|---|
| 4 |  5+6+ |
|---|  8+9  |
| 7 |       |
 ----------- 

zb.:
<table border="1" width="100%" height="100%" callspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">links oben</td>
<td align="right" valign="top">rechts oben</td>
</tr><tr>
<td align="center" valign="middle" height="100%" colspan="2">MITTE</td>
</tr><tr>
<td align="left" valign="bottom">links unten</td>
<td align="right" valign="bottom">rechts unten</td>
</tr>
</table>
ergibt:
eine moegliche einteilung einer webseite