HTML, Text und Tabellen

Auch wenn eine Tabelle farbig gestaltet ist, muss sie etwas enthalten, sonst hätte sie keinen Zweck. Sehen wir uns also an, wie wir eine Tabelle richtig kombinieren und formatieren, damit sie Text enthalten kann.

TextausrichtungSchauen wir uns an, wie man nach dem Einfügen von Text den Text innerhalb der Tabelle mit dem Befehl ausrichtetalign. Erstellen wir zuerst die Tabelle.

Hier ist die Tabelle:

Legen wir Text ein:

Hier ist, wie sich die Tabelle mit dem Text präsentiert:

Hier ist meine Tabelle

Perfekt! Wenn wir den Text jetzt auf diese Weise zentrieren wollten:

Hier ist meine Tabelle

Der Code wird sein:

Sie haben es erraten, Absätze kommen wieder ins Spiel. Mit dem Attribut p identifizieren wir einen Absatz und mit align richten wir ihn nach Belieben aus, in unserem Beispiel zentriert. Offensichtlich können Sie für die Ausrichtung die Parameter left und nach Ihrer Wahl verwenden. Ränder Wenn der Text zu nah am Tabellenrand hängt, können Sie den Abstand zwischen diesen beiden Elementen vergrößern, indem Sie das Attribut cellpadding verwenden, das es uns ermöglicht, einen Abstand in Pixel zu erstellen. Vergleichen wir zwei Tabellen, eine ohne cellpadding und eine mit cellpadding: Ohne cellpadding:

Hier ist meine Tabelle

Mit cellpadding auf 3pxl eingestellt:

Hier ist meine Tabelle

Hier ist der Code mit cellpadding:

Der Abstand Nun sehen wir, wie wir den Textabstand innerhalb der Tabelle anpassen können. Nehmen wir unser Beispiel und fügen eine Textzeile hinzu:

Hier ist meine Tabelle Hier ist meine Tabelle

Sehen wir uns nun an, wie der zwischen den beiden Textabsätzen entstandene Abstand entfernt werden kann, um dieses Ergebnis zu erzielen:

Hier ist meine Tabelle Hier ist meine Tabelle

Um den Abstand zu entfernen, haben wir das Tag verwendet style. Mit margin-top für den oberen Abstand und margin-bottom für den unteren können wir diese beiden Abstände auf null Pixel setzen, d.h. da jede Zeile ein eigener Absatz ist, haben wir bei jeder Zeile einen oberen und einen unteren Rand gesetzt und ihn vollständig entfernt. Versuchen wir, den oberen Rand für beide Absätze auf 5 Pixel zu setzen:

Hier ist meine Tabelle Hier ist meine Tabelle

Wie Sie sehen können, wird zwischen dem ersten und dem zweiten Absatz im oberen Bereich ein Abstand von 5 Pixeln erzeugt. Wenn ich nun auch den unteren Rand auf 5 Pixel setze, erhalten wir Folgendes:

Hier ist meine Tabelle Hier ist meine Tabelle

Üben Sie, indem Sie verschiedene Abstandsmaße ausprobieren, um die verschiedenen Kombinationen kennenzulernen. Diese gerade gesehene Lektion ist sehr wichtig für die grafische Gestaltung des Textes.

Pubblicato in HTML & CSS