HTML-Tipps für Webentwickler

Tabellenbeschriftung mit caption

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
05:38
  Lesezeichen setzen

Transkript

Eine Tabelle ist an sich nicht unbedingt aussagekräftig. Man muss wissen, worum es sich bei den Inhalten handelt. Genau dafür ist das "caption"-Element gedacht. Das ist eine einfache Tabelle ohne Beschriftung und man weiß überhaupt nicht, worum es sich hier handelt bei den ganzen Zahlen. Das heißt, wir brauchen dringend eine Beschriftung und diese setzen wir in einem "caption"-Element um. Das ist unsere Tabelle, also "table" und dann haben wir unsere "tr"-Elemente. Ich ergänze jetzt nach dem table-starttag ein "caption"-Element. Das muss ich auch wieder schließen. Und innerhalb des "caption"-Elementes, kann ich dann meinen Text schreiben, etwa in Absätzen. Das ist eine "Tabelle 1", nenne ich das. Und einen weiteren Absatz mit der eigentlichen Beschriftung. Es handelt sich nämlich dabei, um das Ergebnis, oder die möglichen Ergebnisse von zwei Würfeln mit einem Würfel. Was da alles möglich ist. Und wenn wir uns das jetzt ansehen, dann haben wir eine schöne Beschriftung und wir wissen jetzt, worum es sich handelt. So etwas ist beispielsweise praktisch, wenn Sie Siedler von Catan spielen, dann wissen Sie, welche Zahlen als Ergebnis wahrscheinlicher sind, als andere. Bei meiner Tabelle habe ich schon ein paar grundlegende Formatierungen für die "caption" vorgenommen. Ich habe Sie beispielsweise kursiv gesetzt, Abstände definiert und bei den Absätzen die Abstände entfernt. Es gibt aber auch "CSS"-Angaben speziell für diese "caption" und das sehen wir uns einmal an. Also ich wähle mein "caption"-Element aus und schreibe dann die Angabe "caption-side". Darüber kann ich definieren, an welcher Seite die Beschriftung erscheinen soll. Ich gebe erst einmal an "top". Das ist der Standardwert. Wenn wir und das jetzt ansehen, hat sich nichts geändert. Ich kann aber statt "top", auch "bottom" angeben und dann wird die Beschriftung unten angezeigt. Also ich wähle mal in den Entwicklertools "bottom". Und dann sehen Sie, ist die Beschriftung automatisch unterhalb der Tabelle. Wo die Beschriftung dann genau angezeigt wird, hängt vom "writig-mode" ab. Den gebe ich mal bei der Tabelle an: "writing-mode". Und wenn ich jetzt "horizontal" wähle, das ist der Standardwert, dann wird sich nichts ändern. Ich gebe aber einmal an zum Beispiel "vertical-lr" und dann sehen Sie, wird die Beschriftung hier rechts angezeigt und die ganze Tabelle ist gedreht, oder es gibt statt "lr", das heißt von links nach rechts, also vertikal und von links nach rechts, dann gibt es auch "rl", also von right to left. Dann ist es an dieser Stelle. Also über "writing-Mode" kann ich dann auch noch die Anzeige der Tabelle steuern und entsprechend wirkt sich dann "caption-side" aus. Das könnte ich auch mal hier zeigen, wenn ich das auf "top" setze. Dann wird es oberhalb angezeigt in diesem Modus. Die Auswirkung von "writing-mode" sieht man besonders gut, wenn man eine Tabelle hat mit Text und nicht nur Zahlen, wie in diesem Beispiel und da habe ich die Tabelle jetzt über diesen "writing-mode" richtig gedreht. Übrigens gibt es noch weitere Angaben als "caption-side", "top" und "bottom". Die sind aber dann spezifisch für den Firefox. Das heißt, die funktionieren nicht browserübergreifend. Sehen wir uns das einmal an. Also das sind dann nicht-Standard Firefox-only-Werte. Und da kann man dann auch "top-outside", "bottom-outside", "left" und "right". Also "left" und "right" das Interessante, weil das eben standardmäßig nicht funktioniert. Vielleicht fragen Sie sich, wie es eigentlich mit dem Element "fig-caption" aussieht. Das gibt es ja, wenn man "figure" einsetzt. Schauen wir uns das mal am Beispiel an. Also ich kann ja das Element "figure" verwenden. Das nimmt man gerne für Bilder, um die mit ihrer Beschriftung zusammenzufügen. Aber man kann das auch bei Tabellen nehmen beispielsweise. Und wenn Sie dieses "figure"-Element nehmen, dann sollten Sie nicht mehr mit "caption" für die Beschriftung arbeiten sondern "fig-caption" einsetzen. Also hier dann "fig-caption", um die Beschriftung dann darüber anzugeben. Also "fig-caption" nehmen Sie, wenn Sie "figure" einsetzen. Wenn Sie das nicht benutzen, dann ist dieses "caption"-Element ungeheuer praktisch zur Beschriftung von Tabellen. Und über "caption-side" können Sie dann bestimmen, an welcher Seite die Beschriftung der Tabelle angezeigt werden soll.