Patrick86: Problem bei Tabellenformatierung mittels einer Klasse

Beitrag lesen

Hallo Ihr! :)

Nachdem mir in einer ersten Anfrage hier im Forum sehr geholfen wurde und ich mir das Formatieren von Elementen mittels Klassen aneignen konnte (zumindest funktioniert es - es geht sicher noch eleganter^^'), habe ich mich registriert und traue mich nun mit einem weiteren Problem hierher.
Auch dieses mal hat mich eine Suche leider nicht vorangebracht, da ich nicht wirklich weiß, wo das Problem liegen könnte - und daher eine Suche nach bestehenden Threads nicht wirklich was bringt. Ich wüsste nicht, wonach ich suchen sollte?

Jedenfalls, mein Problem:

Ich bewege mich in einer WordPress-Umgebung und habe eine Klasse "ausgabe" erstellt, mit der ich eine Tabelle formatiere und für deren untergeordnete Elemente ich verschiedene Formatierungs-Regeln definiert habe. Das ganze definiere ich im <head>. Hier der Code und die von mir dafür zu Anschauungszwecken erstellte Seite:

Style-Code im <head>

<style type="text/css">  
table.ausgabe { border:0px; table-layout:auto; text-align:left }  
table.ausgabe tr { border:0px }  
table.ausgabe th { border:0px }  
table.ausgabe td { border:0px }  
table.ausgabe sup { color:navy; font-size:60% }  
table.ausgabe tbody { border:thin solid gray }  
table.ausgabe tfoot { border:thin solid gray; font-size:75% }  
table.ausgabe tfoot span { font-weight:bold; }  
table.ausgabe tfoot sup { color:navy; font-size:75% }  
</style>  

Code-Ausschnitt der eigentlichen Tabelle im <body>

  
<table class="ausgabe">  
...  
<tfoot>  
<tr>  
<td colspan="2">  
<span>Informationsnachweise:</span>  
<sup>[1]</sup> Laut Simon&Schuster Onlineshop: <a href="http://books.simonandschuster.com/Warcraft-Day-of-the-Dragon/Richard-A-Knaak/Warcraft/9780671041526" target="_blank">Link</a>, letzter Zugriff 20.11.2013.  
<sup>[2]</sup> Laut Amazon.com Onlineshop: <a href="http://www.amazon.com/Day-Dragon-WarCraft-Book-No-1/dp/0671041525/ref=tmm_mmp_title_0?ie=UTF8&qid=1385030981&sr=8-1" target="_blank">Link</a>, letzter Zugriff 21.11.2013.  
<sup>[3]</sup> Laut Impressum von Warcraft (1). Der Tag des Drachen, 9. Auflage Taschenbuch, September 2007.  
</td>  
</tr>  
</tfoot>  
</table>  

Ich habe also in dem <foot>-Teil meiner Tabelle eine Überschrift in einem <span>-Element und den Textteil in gar keinem Element. Zweiteres geht vermutlich nur, weil ich in der Wordpress-Umgebung arbeite, die vermutlich automatisch irgendwas ergänzt... oder wird auch im Standard-HTML unformatierter Text automatisch als solcher erkannt? Also ohne jede Kennzeichnung durch <p> oder <span> ?

Ergebnis:
http://wcraft.lorebase.org/tabellentest-mit-span/

Nun sieht das eigentlich schon genau so aus, wie ich es haben will, aber das alles, also die Art und Weise, wie ich zum Ziel gekommen bin, fühlt sich für mich extrem unsauber an: Zur Formatierung meiner Überschrift in <tfoot> ein formatiertes Element <span> zu benutzen ist doch nicht im Sinne des Erfinders, oder? Und das mein Textteil einfach so "da rum steht", gefällt mir auch nicht. Oder übertreibe ich da und sollte einfach mit der gewünschten Optik, die ich ja habe, zufrieden sein?

Ich würde jedenfalls viel lieber ein <h>-Element nutzen, um die Überschrift zu formatieren und dann <span> eben für den Textblock darunter nutzen. Wenn ich das aber versuche, dann geht alles schief...

Siehe folgende Versuche - abermals Code und Testseite:

<head>

<style type="text/css">  
table.ausgabe { border:0px; table-layout:auto; text-align:left }  
table.ausgabe tr { border:0px }  
table.ausgabe th { border:0px }  
table.ausgabe td { border:0px }  
table.ausgabe sup { color:navy; font-size:60% }  
table.ausgabe tbody { border:thin solid gray }  
table.ausgabe tfoot { border:thin solid gray; font-size:75% }  
table.ausgabe tfoot h6 { font-weight:bold; font-size:90% }  
table.ausgabe tfoot span { font-size:50%; }  
table.ausgabe tfoot sup { color:navy; font-size:75% }  
</style>

<body>

<tfoot>  
<tr>  
<td colspan="2">  
<h6>Informationsnachweise:</h6>  
<span><sup>[1]</sup> Laut Simon&Schuster Onlineshop: <a href="http://books.simonandschuster.com/Warcraft-Day-of-the-Dragon/Richard-A-Knaak/Warcraft/9780671041526" target="_blank">Link</a>, letzter Zugriff 20.11.2013.  
<sup>[2]</sup> Laut Amazon.com Onlineshop: <a href="http://www.amazon.com/Day-Dragon-WarCraft-Book-No-1/dp/0671041525/ref=tmm_mmp_title_0?ie=UTF8&qid=1385030981&sr=8-1" target="_blank">Link</a>, letzter Zugriff 21.11.2013.  
<sup>[3]</sup> Laut Impressum von Warcraft (1). Der Tag des Drachen, 9. Auflage Taschenbuch, September 2007.</span>  
</td>  
</tr>  
</tfoot>

Dieses Mal habe ich also meine Überschrift in ein <h6>-Element und den Text in ein <span>-Element gesteckt.

Ergebnis: http://wcraft.lorebase.org/tabellentest-2-mit-h6/

Obwohl ich nach dem selben Prinzip vorgehe wie zuvor, nur eben andere Elemente formatiere, sind die Auswirkungen hingegen komplett anders. Es gelingt mir nicht mehr, so zu formatieren, wie ich es haben will!
Das ganz kuriose dabei: OBWOHL ich das <h6> Element wieder schließe wirkt es sich trotzdem auf das folgende <span> aus! Dieser komische Abstand zwischen den Zeilen im <span> ist nur da, wenn ich für die Überschrift <h6> benutze. Formatiere ich die Überschrift hingegen auch mit <span> verschwindet der Abstand wieder.

Also im letzten Code nur das <h6>...</h6> gegen <span>...</span> ausgetauscht und es passiert plötzlich das:

Ergebnis: http://wcraft.lorebase.org/tabellentest-2-mit-span/

Was ich vermute ist Folgendes:
Durch das Wegfallen von <h6> schlagen scheinbar andere Styledefinitionen übergeordneter Elemente durch und verändern den gesamten Style meines <tfoot> - oder so ähnlich? ^^'

Was ich aber überhaupt nicht verstehe:
Wie kann sich eine Änderung in der Formatierung meiner Überschrift auch auf den darunter liegenden Textteil auswirken? An dessen Code ändere ich doch gar nichts? Das verwirrt mich total und ich scheine hier irgendeinen Zusammenhang nicht verstanden zu haben...

Würde mich freuen, wenn man mir da beim Verstehen helfen könnte! :)

Nachtrag:

Nochmal zur Erinnerung: Ich bewege mich mit meinem Code innerhalb einer Wordpress-Umgebung. Das spielt vielleicht auch mit hinein...?

Und wenn ich "Vokabeln" nicht richtig benutze, wäre ich dankbar, wenn man mich darauf hinweist. Ich bin mir beim Formulieren nicht immer ganz sicher, wenn ich von "Elementen" oder vom "Formatieren" oder "Definieren" spreche. Sollte da etwas auffallen, nur raus mit der Kritik. Ich möchte ja richtig über das reden können, was ich meine. Dann klappts vielleicht auch irgendwann mit der Archiv-Suche besser. ^^'