# PHP & CSS – Tabellen und Formulare

## 1. Input-Feld mit vorausgefülltem Wert

**Problem:** `$value=` ist kein gültiges HTML-Attribut.

**Lösung:**
```html
<input name="ls" value="<?= htmlspecialchars($row['ls']) ?>">
```

Doppelte Anführungszeichen außen verwenden, damit die einfachen Anführungszeichen im PHP-Array (`$row['ls']`) nicht kollidieren.

Weiterer Fehler im Original: doppeltes `</td></td>` und fehlendes schließendes `</td>`.

**Korrekter Block:**
```html
<form method="post">
    <table>
        <tr>
            <th>Ticket-Nr.</th>
            <td><?= htmlspecialchars($row['tt']) ?></td>
        </tr>
        <tr>
            <th>Auftraggeber</th>
            <td><input name="ls" value="<?= htmlspecialchars($row['ls']) ?>"></td>
            <th>Bearbeiter</th>
            <td><?= htmlspecialchars($row['bearbeiter']) ?></td>
        </tr>
    </table>
</form>
```

---

## 2. Spaltenbreite in Tabellen

### Option 1 – Inline Style
```html
<th style="width: 150px;">Auftraggeber</th>
```

### Option 2 – CSS-Klasse
```css
table th { width: 150px; }
table th:first-child { width: 100px; }
```

### Option 3 – `<col>`-Element (zentral für jede Spalte)
```html
<table>
    <colgroup>
        <col style="width: 150px;">
        <col style="width: 250px;">
        <col style="width: 150px;">
        <col style="width: 250px;">
    </colgroup>
    ...
</table>
```

> **Wichtig:** `table-layout: fixed` ist erforderlich, damit die Breiten zuverlässig greifen.

```css
table {
    table-layout: fixed;
    width: 100%;
}
```

---

## 3. Spaltenbreiten zentral für mehrere Tabellen

Jeder Tabelle eine eigene Klasse geben:

```html
<table class="tabelle-ticket">
<table class="tabelle-adressen">
```

CSS in einer zentralen `.css`-Datei:

```css
table {
    table-layout: fixed;
    width: 100%;
}

.tabelle-ticket col:nth-child(1) { width: 150px; }
.tabelle-ticket col:nth-child(2) { width: 250px; }
.tabelle-ticket col:nth-child(3) { width: 150px; }
.tabelle-ticket col:nth-child(4) { width: 250px; }

.tabelle-adressen col:nth-child(1) { width: 100px; }
.tabelle-adressen col:nth-child(2) { width: 300px; }
```

Einbinden per:
```html
<link rel="stylesheet" href="style.css">
```

---

## 4. Tabelle ignoriert Spaltenbreiten (Auto-Breite)

**Ursache:** Fehlendes `table-layout: fixed`.

```css
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;  /* ← das fehlte */
}
```

Außerdem: `max-width: auto` ist ungültig. Entweder weglassen oder konkreten Wert setzen:
```css
.content {
    max-width: 1200px;  /* oder weglassen */
}
```

---

## 5. Input-Breite sprengt Tabellenlayout

**Ursache:** `input { width: 100%; }` greift auch auf Inputs in Tabellenzellen.

**Lösung:** Inputs in Tabellen explizit ausschließen:

```css
/* Inputs nur im Formular-Bereich */
.form-bereich input,
.form-bereich select {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
}

/* Inputs in Tabellen zurücksetzen */
td input, td select {
    width: auto;
    padding: 2px 4px;
    margin-top: 0;
}
```

Oder Formular-Bereich per Klasse kapseln:

```html
<div class="form-bereich">
    <label>...</label>
    <input ...>
</div>

<table>
    ...  <!-- inputs hier bleiben unberührt -->
</table>
```