Tabellen

Tabellen deklarieren wir mit dem Element <table>. Darüber hinaus hat jede Tabelle Reihen, <tr>, Zellen, <td>, und Überschriften <th>. Um der Tabelle noch mehr Struktur zu geben haben wir noch die Tags <thead>, <tbody> und <tfoot>. Mit dem <caption>-Element können wir der Tabelle noch einen Titel vergeben.

Ausserdem haben wir noch Zugriff auf die Attribute colspan und rowspan mit welchen wir bestimmen können, wie lang bzw. hoch eine Zeile sein soll.

<table>
    <caption>How I chose to spend my money</caption>
    <thead>
        <tr>
            <th>Purchase</th>
            <th>Location</th>
            <th>Date</th>
            <th>Evaluation</th>
            <th>Cost (€)</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">SUM</td>
            <td>118</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Haircut</td>
            <td>Hairdresser</td>
            <td>12/09</td>
            <td>Great idea</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Lasagna</td>
            <td>Restaurant</td>
            <td>12/09</td>
            <td>Regrets</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Shoes</td>
            <td>Shoeshop</td>
            <td>13/09</td>
            <td>Big regrets</td>
            <td>65</td>
        </tr>
        <tr>
            <td>Toothpaste</td>
            <td>Supermarket</td>
            <td>13/09</td>
            <td>Good</td>
            <td>5</td>
        </tr>
    </tbody>
</table>