Einfache 2 x 2 Tabelle

1 2
3 4

   <table border>
   <tr>
     <td>1</td>
     <td>2</td>
   <tr>
     <td>3</td>
     <td>4</td>
   </table>

 

Noch ein 2 x 2 Beispiel

1 2
3 Zellen dehnen sich
auf Textbreite

<table border>
<tr>
  <td>1</td>
  <td>2</td>
<tr>
  <td>3</td>
  <td>Zellen dehnen sich<br>
       auf Textbreite</td>
</table>

 

Rowspan und Colspan Attribute

1 2 3
4 Das Rowspan und Colspan Attribut kann Zellen und Spalten überspannen
5

<table border>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
<tr>
  <td>4</td>
  <td rowspan=2 colspan=2>
    Das Rowspan und Colspan Attribut kann Zellen und Spalten
   überspannen
  </td>
<tr>
  <td>5</td>
</table>

 

Reihen und Spalten können Überschriften haben

  Tage der Woche
  Montag Dienstag Mittwoch
Woche 1 1 2 3
Woche 2 4 5 6

<table border>
<tr>
   <td></td>
   <th colspan=3>Tage der Woche</th>
<tr>
   <td></td>
   <th>Montag</th>
   <th>Diestag</th>
   <th>Mittwoch</th>
<tr>
   <th>Woche 1</th>
   <td>1</td>
   <td>2</td>
   <td>3</td>
<tr>
   <th>Woche 2</th>
   <td>4</td>
   <td>5</td>
   <td>6</td>
</table>  

 

Zellausrichtung

  Ausrichtungsattribute, Align und VAlign
Vertikale
Aurichtung
Oben Mitte Unten
Horizontale
Ausrichtung
Links Mitte Rechts

<table border>
<tr>
   <td></td>
   <th colspan=3>Ausrichtungsattribute, Align und VAlign</th>
<tr>
   <th>Vertikal<br>Ausrichtung</th>
   <td valign=top>Oben</td>
   <td valign=middle>Mitte</td>
   <td valign=bottom>Unten</td>
<tr>
   <th>Horizontale<br>Ausrichtung</th>
   <td align=left>Links</td>
   <td align=center>Mitte</td>
   <td align=right>Rechts</td>
</table> 

 

Zellen können verschiedenste Dinge enthalten:
Hintergrundfarben können verwendet werden.


Graphiken
2 x 2 Tabellen
Hotspots
Text
Tabellen
1 2 3
4 5

<table border>
<tr align=center>
  <td><img src="glass.bmp"><br>
      Graphiken</td>
  <td bgcolor="#ffcdcd">
      <a href="#TableContents">Table Contents</a><br>
      Hotspots</td>
<tr align=center>
  <td>Text</td>
  <td><table border bordercolor="#37ffcd">
  <caption>Tabellen</caption>
        <tr>
          <td>1</td>
          <td>2</td>
          <td bgcolor="#D9D9F3">3</td>
        <tr>
          <td>4</td>
          <td>5</td>
        </table></td>
</table>

 

Zellenbreiten können als Prozentsatz der Tabellenbreite angegeben werden und Tabellenbreiten als Prozentsatz der Fensterbreite.

20% 50% 15% 15%

<table border width=75%>
<tr>
   <td width=20%>20%</td>
   <td width=50%>50%</td>
   <td width=15%>15%</td>
   <td width=15%>15%</td>
</table> 

 

Tabellen können zentriert werden und eine Über- oder Unterschrift besitzen bottom.

Tabelle 1

Illustration einer zentrierten Tabelle mit 75% der Fensterbreite

20% 50% 15% 15%

<table border width=75% align=center>
<caption align=bottom><h3>Tabelle 1</h3>
        Illustration einer zentrierten Tabelle mit 75% der Fensterbreite
</caption>
<tr>
   <td width=20%>20%</td>
   <td width=50%>50%</td>
   <td width=15%>15%</td>
   <td width=15%>15%</td>
</table>

Zellabstände mit dem Cellspacing Attribut.

CellSpacing 0
1 2
3 4
CellSpacing 10
1 2
3 4
   <table border
   CellSpacing=0>
   <Caption>
   CellSpacing 0
   </caption>
   <tr><td>1</td>
       <td>2</td>
   <tr><td>3</td>
       <td>4</td>
   </table>
   <table border
   CellSpacing=10>
   <Caption>
   CellSpacing 10
   </caption>
   <tr><td>1</td>
       <td>2</td>
   <tr><td>3</td>
       <td>4</td>
   </table>