HTML-Tabellen sind das Rückgrat strukturierter Daten im Web. Sie sind nicht mehr nur für Tabellenkalkulationen gedacht. Sie können sie formen, einfärben und genau steuern, wie sie innerhalb eines Browserfensters atmen. Die Old-School-Methode basiert auf bestimmten Präsentationsattributen. Sie funktionieren. Sie sind direkt. Sie benötigen keine komplexen CSS-Frameworks, um ein anständiges Layout zu erhalten.
Ändern der Hintergrundfarbe der Tabelle
Beginnen Sie mit dem Gesamtbild. Möchten Sie, dass das gesamte Gitter platzt? Sie benötigen kein separates Stylesheet. Fügen Sie einfach ein „bgcolor“-Attribut auf das öffnende „
“-Tag ein.
Beispiel:
Dies bereitet die Bühne. Jede Zelle erbt diese Stimmung, es sei denn, Sie überschreiben sie.
Sie können auch hineinzoomen. Eine einzelne Zeile oder nur eine bestimmte Zelle einfärben. Fügen Sie „bgcolor=”color”` entweder in das Tag „
“ oder „
| “ ein.
Beispiel:
|
Es ist ein kleines Detail. Aber es verändert die Art und Weise, wie sich das Auge über die Daten bewegt.
Tischgröße
Browser sind standardmäßig faul. Sie erweitern Zeilen und Spalten entsprechend dem Inhalt. Wenn Ihre Daten kurz sind, wird die Tabelle so weit ausgedehnt, dass sie das Fenster ausfüllt. Wenn es lang ist, wird es lang.
Manchmal möchte man Kontrolle. Sie möchten feste Maße.
Fügen Sie „width“ und „height“ zum Starttag „
“ hinzu. Sie können Pixel oder Prozentsätze verwenden.
Beispiel: „“.
Pixel geben Ihnen harte Grenzen. Prozentsätze lassen die Tabelle mit dem Ansichtsfenster atmen. Für welches Sie sich entscheiden, hängt von Ihren Designzielen ab.
Sie können auch einzelne Zellen sperren. Fügen Sie „width=”value”` zu einem „
“- oder „
| “-Tag hinzu. Dadurch wird die globale Einstellung für diesen bestimmten Punkt außer Kraft gesetzt.
Experiment. Versuchen Sie es mit einem Pixelwert. Versuchen Sie es dann mit einem Prozentsatz. Sehen Sie, wie es auf verschiedenen Bildschirmen zerbricht oder zusammenhält.
Zellpolsterung
Raum ist Design. Konkret handelt es sich um den Abstand zwischen dem Rand einer Zelle und dem darin enthaltenen Text.
Das ist „Cellpadding“. Es wird ein Pixelwert benötigt.
Verwenden Sie es im Starttag „
“.
Beispiel 1: „
“.
Beispiel 2: „
“.
Fünf Pixel sind knapp. Fünfzehn ist luftig. Der Inhalt fühlt sich anders an. Mit mehr Polsterung sieht es sauberer aus.
Zellabstand
Dann gibt es die Lücke zwischen den Zellen.
Das ist „Zellenabstand“. Es wird auch ein Pixelwert benötigt.
Fügen Sie es dem Tag „
“ hinzu.
Beispiel 1: „“.
Beispiel 2: „“.
Durch einen kleinen Zellabstand fühlt sich das Gitter dicht an. Eine große lässt es wie eine Checkliste aussehen.
Tabellenüberschriften
Daten brauchen Struktur. Dafür sorgen Header.
Um eine Spalte oder Zeile als Überschrift hervorzuheben, tauschen Sie in der ersten Zeile „
“ gegen „
| “ aus.
Der Text wird automatisch fett dargestellt. Es zentriert es auch.
Beispiel:
| |
