Navigation überspringen

Beispiel: Tabellen

Beabsichtigte Lernziele

Im folgenden Beispiel soll eine Tabelle erzeugt werden, die einige Aspekte berücksichtigt:

  • verschmolzene Zellen über Reihen und Spalten
  • feste Breiten
  • Ausrichtungsattribute für Zellen
  • Hintergrundgestaltung
  • Rahmen

Textseite

Das folgende Beispiel zeigt multiple tag-Erweiterungen, um die oben genannten Forderungen umzusetzen.

<!DOCTYPE html>

<html>
    
    <head>
        <title>Fenstertitel</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    
    <body>
        
        <table border="1" bgcolor="#0000ff" width="600px" cellpadding="5">
            <colgroup>
                <col width="25%">
                <col width="25%">
                <col width="25%">
                <col width="25%">
            </colgroup>
            <tr>
                <td align="center" valign="top" height="55px">
                    Zelle 1
                </td>
                <td align="left" valign="bottom">
                    Zelle 2
                </td>
                <td align="right" valign="middle" bgcolor="#ff0000">
                    Zelle 3
                </td>
                <td align="left" valign="top">
                    Zelle 4
                </td>
            </tr>
        </table>
        
    </body>
    
</html>

Das Ergebnis sieht wie folgt aus: