Sonntag, 18. November 2007

Tabellen bei Blogger.com-Postings einfügen

Bei meinem gestrigen Posting zu Scriptaculous-Framework wollte ich eine Tabelle in den Text einfügen. Doch leider bietet der WYSIWYG-Editor bei Blogger.com dazu keine Möglichkeit an:



Doch ist dies ja zunächst nicht das Problem – ich kenne mich mit HTML-Quelltext aus und es gibt eine "Html bearbeiten"-Ansicht. So stand dem Einfügen der Tabelle ja nichts im Weg. Gesagt - getan! Doch als ich mir dann das fertige Posting ansah war mein Erstaunen groß. Über der Tabelle war jede Menge Leerraum. Auch ein Blick in den fertig generierten Quellcode zeigt keinerlei Elemente über der Tabelle an, die eine solche Anzeige hätten erklären können. Ich war verzweifelt. Im ersten Augenblick dachte ich an ein CSS-Problem, doch auch nach dem Deaktivieren der CSS-Definitionen über die Web Developer Toolbar bestand das Problem weiterhin.

Ich schaute mir nun den generierten Quelltext des fertigen Postings noch einmal genauer an und stellt fest, dass überall dort, wo ich beim Schreiben meiner Tabelle einen Zeilenumbruch (Enter-Taste) hatte ein br-Element eingefügt wurde. Also etwa so:

Das hatte ich geschrieben:
<table>
<tbody><tr>
<td>Test</td>
</tr>
</tbody></table>

Das wurde daraus:
<table><br /><tbody><tr><br /><td>Test</td><br /></tr><br /></tbody></table>

Nun war alles klar. Der WYSIWYG-Editor hatte alle Zeilenumbrüche (Enter-Taste) in ein br-Element umgewandelt – und diese waren natürlich so syntaktisch völlig an der falschen Stelle und wurden somit vom Browser über der Tabelle dargestellt.

Problem erkannt, Gefahr gebannt.

Ich entfernte also alle Zeilenumbrüche zwischen table und /table und schon war der große Leerraum über der Tabelle weg. Auch ja – man sollte auch alle Leerzeichen zwischen den HTML-Elementen die zur Tabelle gehören entfernen, sonst gibt es ähnliche komische Resultate.

Kommentare:

  1. Vielen vielen Dank für die Hilfe. Hatte das selbe Problem und wäre nie auf die Lösung gekommen^^.

    AntwortenLöschen
  2. Hallo Dirk,
    ich habe die selben Probleme und suche seit Tagen eine Lösung. Jetzt habe ich deinen Post gefunden. Deine Lösung eingefügt aber in meinem Blogpost ändert sich gar nichts. Über meiner Tabelle ist jede Menge Leerraum. Vielleicht hast Du einen Vorschlag was ich noch ändern könnte, damit die Tabelle direckt unter dem Posttitel anfängt und der freiraum verschwindet.

    AntwortenLöschen
  3. Also bei mir funktioniert es wunderbar... Ist zwar eine riesig lange Zeile, aber es klappt... http://beachvolleycoach.blogspot.com/

    AntwortenLöschen
  4. Vielen Dank! Hatte das Problem gehabt, und hier die Lösung gefunden.

    AntwortenLöschen
  5. Funktioniert, auch mit Bildern. Vielen Dank.

    AntwortenLöschen