Lädt...

HTML-Tabellengrößen

Tabellen können eine Inhaltsspalte ausfüllen oder kompakt wie eine Preiskarte bleiben. Nach den Rändern, die das Raster zeichneten, dimensioniert diese Lektion den Kasten: mit CSS (width, max-width, padding, optionale Spaltenbreiten), damit die Tabelle zu Daten und Bildschirm passt. Darstellung bleibt in CSS; table / tr / th / td tragen weiterhin die Bedeutung. Wenn Ränder das Raster sichtbar machen, macht Größe es angenehm.

Was „Größe“ für eine Tabelle bedeutet

Größe ist nicht eine Zahl. Die ganze Tabelle hat eine Breite relativ zum Elternteil. Zellen brauchen padding, damit Text atmen kann. Spalten können den Platz gleich teilen oder eine breitere Label-Spalte bevorzugen. Auf Handys erzwingt eine Tabelle mit 1200px unangenehmes horizontales Scrollen, selbst bei nur zwei kurzen Spalten. Flexible Rezepte — oft width: 100% mit sinnvollem max-width — halten einfache Raster lesbar, ohne CSS für ehrliche th/td-Struktur zu ersetzen.

Direkte Antwort

Setzen Sie width auf der table (z. B. 100%) und optional ein Cap mit max-width (z. B. 480px oder 640px). Geben Sie Spaltenbreite auf th/td vor, wenn eine Spalte mehr Platz braucht. Bevorzugen Sie Prozent und max-width statt riesiger fester Pixelbreiten, die Handys überlaufen. Behalten Sie border-collapse und padding aus der Ränder-Lektion, damit Größe und Linien zusammenarbeiten. Regeln mit einer class scopieren, damit ein Demo nicht jede Tabelle der Seite ändert.

Flexible Breite mit Spalten-Hint

Ein übliches Anfänger-Muster: Die Tabelle füllt den Elternteil bis zu einem Maximum, Ränder bleiben collapsed, und die erste Spalte bekommt mehr Anteil für Labels.

Flexible table width

html
HTML Code 
<style>
table.prices { width: 100%; max-width: 480px; border-collapse: collapse; }
table.prices th, table.prices td { padding: 8px; border: 1px solid #555; }
table.prices th:first-child, table.prices td:first-child { width: 60%; }
</style>
<table class="prices">
<tr><th>Plan</th><th>Price</th></tr>
<tr><td>Starter</td><td>0</td></tr>
<tr><td>Pro</td><td>9</td></tr>
</table>

Lesen des flexiblen Beispiels

  • width: 100% lässt die Tabelle die verfügbare Inhaltsbreite nutzen
  • max-width: 480px verhindert einen Riesenstreifen auf breiten Monitoren
  • border-collapse: collapse hält Größe und Ränder im Einklang
  • padding: 8px gibt jeder Zelle lesbaren Innenraum
  • :first-child { width: 60%; } hintet, dass die Plan-Spalte breiter als die Preis-Spalte sein soll
  • Class-Scoping (.prices) vermeidet versehentliches Ändern jeder Tabelle

Kompakte max-width-Tabelle

Manchmal wollen Sie eine kleine Vergleichskarte, die nie full-bleed wird. Ein niedrigeres max-width (bei weiterhin width: 100% innerhalb des Caps) hält das Raster auf Desktop und Mobil übersichtlich.

Compact max-width table

html
HTML Code 
<style>
table.compact {
width: 100%;
max-width: 320px;
border-collapse: collapse;
}
table.compact th, table.compact td {
padding: 6px 10px;
border: 1px solid #444;
text-align: left;
}
</style>
<table class="compact">
<tr><th>Item</th><th>Stock</th></tr>
<tr><td>USB cable</td><td>14</td></tr>
<tr><td>Notebook</td><td>3</td></tr>
</table>

Lesen des kompakten Beispiels

  • Dieselbe flexible Idee, engeres max-width für kartenartigen Fußabdruck
  • Horizontales padding (6px 10px) kann vom vertikalen abweichen
  • text-align: left ist optionale Darstellung — nützlich, wenn Zahlen und Wörter ein kleines Raster teilen
  • Weiterhin kein Layout-Tabellen-Nesting; Sie dimensionieren nur eine echte Datentabelle
  • Browser verkleinern: Die Tabelle sollte mit der Spalte schrumpfen bis zu Inhaltsgrenzen, nicht standardmäßig eine riesige Scrollbar erzwingen

Feste Pixel versus flexible Gewohnheiten

Feste Breiten wie width: 1200px wirken auf großen Monitoren fein und auf dem Handy schmerzhaft. Brauchen Sie ein Minimum zum Drucken oder für ein dichtes Dashboard, starten Sie von fluidem width plus max-width oder planen Sie später Responsive-Strategien. Für Anfänger-Tabellen dieses Kurses ist flexible Größe die gute Default-Gewohnheit. Spalten-width-Prozente sind Hints — Browser können bei extrem langem oder unzerbrechlichem Inhalt nachjustieren, halten Sie Zellen-Text beim Lernen daher kurz. Wenn eine Spalte nicht schrumpft, prüfen Sie lange URLs oder Wörter ohne Leerzeichen, bevor Sie max-width beschuldigen.

Padding, Spalten und Collapse zusammen

Größenarbeit sitzt neben der Ränder-Lektion. Ohne padding wirken dichte Zellen eng, selbst bei perfekter Außenbreite. Ohne collapse können Breitenexperimente dicker oder uneben wirken, weil getrennte Ränder Extra-Platz brauchen. Optionale Spalten-Hints (width auf :first-child-Zellen oder bestimmten th) führen den Browser, wenn Labels mehr Raum brauchen als Werte. Nutzen Sie Größen-CSS nicht als Ausrede, th-Köpfe wegzulassen oder die Seite als verschachtelte Layout-Tabellen neu zu bauen — dieser Konflikt war in der Tables-Sitzung schon geklärt.

Übung im Editor

  1. Geben Sie Ihrer Übungstabelle width: 100% und ein max-width (probieren Sie 480px).
  2. Fügen Sie padding zu th/td hinzu (Randstile wiederverwenden, falls vorhanden).
  3. Browser verkleinern — prüfen Sie, dass eine einfache Zwei-Spalten-Tabelle kein endloses Horizontalescrollen erzwingt.
  4. Optional eine breitere erste Spalte mit :first-child oder class.
  5. Tabelle mit engerem max-width wie 320px duplizieren und den Fußabdruck vergleichen.
  6. Vorübergehend width: 1200px setzen, den Handy-Schmerz notieren, dann entfernen.
  7. border-collapse umschalten, während Breiten gesetzt sind, und das äußere Größengefühl beobachten.
  8. Unter der Tabelle einen Satz: gewähltes max-width und warum.

Typische Fehler

  • Feste width: 1200px-Tabellen, die kleine Screens brechen
  • Kein padding — dichte, schwer lesbare Zellen
  • Ränder und Breiten ohne border-collapse kämpfen lassen
  • Globales table { width: ... }, das jedes Demo auf der Seite ändert
  • Erwarten, dass Spalten-width-Hints extrem lange unzerbrechliche Strings überstimmen
  • Tabellengröße missbrauchen, um wieder Full-Page-Layout-Spalten zu faken
  • max-width vergessen, sodass width: 100% allein eine winzige Drei-Zellen-Tabelle über einen Ultrawide zieht

Zusammenfassung

  • Tabellen mit CSS width und max-width dimensionieren
  • Padding für lesbare Zellen nutzen
  • Flexible Layouts für kleine Screens bevorzugen
  • Spaltenbreiten-Hints sind optional und möglichst mit classes gescoped
  • Ränder collapsed halten, damit Größe und Linien kooperieren
  • Struktur bleibt in HTML; Dimensionen in CSS
  • Nächste header-fokussierte Lektionen bauen auf einem Raster, das schon zum Viewport passt

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
6
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Html Tutorial