Profil - Informatik Kl 10 - HTML

 Tabellen in HTML-Dokumenten

Grundlagen - Aufbau - Einstellungen -Beispiel

Tabellen sind die Grundlage gegliederter HTML-Dokumente. Die Tabelle kann sichtbar oder unsichtbar erstellt werden. Die Größe von Tabellen und deren Zeilen und Spalten kann dynamisch entsprechend dem Inhalt, statisch mit fester Pixelgröße oder prozentual zur Größe des Browserfensters eingestellt werden. In Tabellenzellen können Text, Bilder und Multimediaelemente platziert werden.

 

Grundaufbau

<TABLE> -- Start Tabelle

  <TR> -- Zeile 1

    <TD> Inhalt 1 </TD> --Spalte 1

    <TD> Inhalt 2 </TD> --Spalte 2

  </TR>  

  <TR> -- Zeile 2

    <TD> Inhalt 3 </TD> --Spalte 1

    <TD> Inhalt 4 </TD> --Spalte 2

  </TR>  

</TABLE> --Ende Tabelle


Wichtige Attribute
Tabelle   <TABLE></TABLE>  
 - Tabellen-Rand  <TABLE BORDER></TABLE>  (Tabelle erhält Rand)
 - Tabellen-Rand  <TABLE BORDER=?></TABLE>  (Randstärke in Pixel)
 - Zellen-Größe  <TABLE CELLSPACING=?>  
 - Zellen-Padding  <TABLE CELLPADDING=?>  ('Luft' zw. Inhalt und Rand)
 - Breite  <TABLE WIDTH=?>  (in Pixel)
 - in Prozent  <TABLE WIDTH=%>  (Prozent der Seiten-Breite)
Tabellen-Zeile  <TR></TR>  
 - Ausrichtung  <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>  
Tabellen-Zelle  <TD></TD>  (erscheint innerhalb von Tab.-Zeilen)
 - Ausrichtung  <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>  
 - kein Zeilenumbr.  <TD NOWRAP>  
 - umfaßt ? Spalten  <TD COLSPAN=?>  
 - umfaßt ? Zeilen  <TD ROWSPAN=?>  
 - Breite  <TD WIDTH=?>  (in Pixel)
 - in Prozent  <TD WIDTH=%>  (Prozent der Seiten-Breite)
 - Zellenfarbe  <TD BGCOLOR=#$$$$$$>  
Spalten-Kopf  <TH></TH>  (wie Zelle, aber meist fett, zentriert)
 - Ausrichtung  <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>  
 - kein Zeilenumbr.  <TH NOWRAP>  
 - umfaßt ? Spalten  <TH COLSPAN=?>  
 - umfaßt ? Spalten  <TH ROWSPAN=?>  
 - Breite  <TH WIDTH=?>  (in Pixel)
 - in Prozent  <TH WIDTH=%>  (Prozent der Seiten-Breite)
 - Zellenfarbe  <TH BGCOLOR=#$$$$$$>   
Tabellen-Ueberschrift  <CAPTION></CAPTION>  
 - Ausrichtung  <CAPTION ALIGN=TOP|BOTTOM>  (über/unter Tabelle)


Beispiel für eine Tabelle mit verbundenen Zellen:

<TABLE BORDER=1>
  <CAPTION>Tabelle mit gedehnten Zellen</CAPTION>
  <TR><TH>Leer</TH>
        <TH COLSPAN=2>Spalten 1 und 2</TH>
        <TH>Spalte 3</TH>

  </TR>
  <TR><TH>Zeile 1</TH>
       <TD>Feld 1,1</TD>
       <TD ROWSPAN=2>Feld 2</TD>
        <TD>Feld 3,1</TD>

  </TR>
  <TR><TH>Zeile 2</TH>
        <TD>Feld 1,2</TD>
        <TD>Feld 3,2</TD>

  </TR>
</TABLE>