12 – Tabellen & Formulare 📊✏️

📊 1. Was sind Tabellen – und was nicht?

Eine Tabelle ist eine **Gitterstruktur aus Zeilen und Spalten**, die verwandte Daten übersichtlich darstellt.

Erlaubt: Preislisten, Stundenpläne, Vergleichstabellen, Noten.
Verboten: Seiten-Layouts, Menüs, Karten – dafür gibt es Flexbox und Grid!

🧱 2. Einfache Tabelle – Schritt für Schritt

Jede Tabelle braucht drei Grundelemente:

• <table> – der gesamte Tabellencontainer
• <tr> – eine Tabellenzeile („table row“)
• <td> oder <th> – eine Zelle („table data“ oder „table header“)

Beispiel: Preisliste

<table>
  <tr>
    <th>Produkt</th>
    <th>Preis</th>
  </tr>
  <tr>
    <td>Apfel</td>
    <td>1,20 €</td>
  </tr>
  <tr>
    <td>Banane</td>
    <td>0,80 €</td>
  </tr>
</table>

♿ 3. Barrierefreie Tabellen – semantisch korrekt

Für Screenreader und Suchmaschinen braucht eine Tabelle mehr als nur <table>:

• <caption> – Überschrift der gesamten Tabelle (wie <title> für Bilder)
• <thead> – Kopfbereich (wiederholbar bei langen Tabellen)
• <tbody> – Hauptdatenbereich
• <th scope="col"> – sagt: „Diese Kopfzelle gilt für die ganze Spalte“

<table>
  <caption>Webhosting-Pakete</caption>
  <thead>
    <tr>
      <th scope="col">Paket</th>
      <th scope="col">Preis/Monat</th>
      <th scope="col">Speicher</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic</td>
      <td>2,99 €</td>
      <td>10 GB</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>5,99 €</td>
      <td>50 GB</td>
    </tr>
  </tbody>
</table>

🧩 4. Verbundene Zellen – colspan und rowspan

Manchmal soll eine Zelle mehrere Spalten oder Zeilen umfassen:

• colspan="3" → Zelle erstreckt sich über 3 Spalten
• rowspan="2" → Zelle erstreckt sich über 2 Zeilen

Beispiel: Ein Titel über mehrere Spalten:

<tr>
  <th scope="col">Uhrzeit</th>
  <th colspan="3" scope="col">Montag</th>
</tr>

✏️ 5. Was sind Formulare?

Formulare ermöglichen es Benutzern, Daten an deine Website zu senden – z. B. Kontaktanfragen, Login, Suche.

Das Grundgerüst:

• <form> – der Container (mit action und method)
• <input>, <textarea>, <select> – Eingabefelder
• <label> – Beschreibung für jedes Feld (Pflicht für Barrierefreiheit!)
• <button type="submit"> – zum Absenden

♿ 6. Barrierefreie Formulare – richtig verknüpfen

Jedes Eingabefeld braucht ein verknüpftes <label>:

<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" name="email" required>

→ Das for-Attribut im <label> und die id im <input> müssen identisch sein.

Für Gruppen (z. B. Radiobuttons):

<fieldset>
  <legend>Geschlecht:</legend>
  <label><input type="radio" name="geschlecht" value="m"> Männlich</label>
  <label><input type="radio" name="geschlecht" value="w"> Weiblich</label>
</fieldset>

❌ 7. Häufige Fehler & Lösungen

🧠 8. KI als Lernpartner – guter Prompt

❌ Schlecht: „Gib mir ein Formular.“ ✅ Gut: „Kannst du mir ein barrierefreies Kontaktformular mit Name, E-Mail, Radiobuttons für das Thema und Textarea zeigen – inklusive korrekter Labels, for/id-Verknüpfung, <fieldset> und Erklärung, warum jedes Element wichtig ist?“