> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```html theme={null}
<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>
```