Wie CSS-Felder korrekt in HTML-Tabellen integrieren?

Ich habe ein wenig an meiner neuen Webseite gebastelt und wollte diese zunächst nur mit CSS gestalten. Das hat auch ganz gut geklappt und es sah alles super aus, bis ich mir das Ergebnis mal mit einer älteren Version des Internet Explorers angesehen hatte. Da sah ich dann die Katastrophe; der Explorer hat scheinbar die Positionsangaben von CSS falsch interpretiert und die ganzen Flächen verschoben dargestellt; manches fehlte ganz. Man sagt ja immer, man solle doch alles mit CSS positionieren und das sei der moderne Weg der Programmierung usw., aber was nützt mir dieser tolle und moderne Weg, wenn dann ältere Browser alles falsch darstellen, da habe ich auch nicht viel gekonnt.

Darum bin ich dann auch wieder auf Tabellen zur Positionierung umgestiegen und das hat zumindest den Effekt, dass auch beim alten IE alles angezeigt wird und nicht plötzlich Buttons oder Textfelder verschwinden. Nur ein Problem habe ich noch und zwar werden mir die Textfelder, die ich mit CSS erstellt habe, irgendwie „zerhackt“, wenn ich sie in eine Tabelle übernehme. D.h. ich sehe dann beispielsweise nicht ein Feld von 300 mal 300 px, sondern mehrere kleine Textfelder untereinander, so als würde man jede Zeile als extra Textfeld betrachten. Jede Zeile hat also den Rahmen, den eigentlich das gesamte große Textfeld haben sollte. Woran könnte das liegen und vor allem, wie kann ich das korrigieren?

Zuerst einmal bleibt zu sagen, dass ältere Browser oft Probleme mit modernen Formatierungen (sowohl CSS als auch HTML) haben. Die Frage, die sich da stellt ist, ob man diese total veralteten Versionen überhaupt noch unterstützen sollte. Eine Analyse der verwendeten Browser-versionen deiner Besucher könnte da helfen, um zu sehen, ob sich das ganze Umarbeiten des Codes überhaupt lohnt. Wenn nämlich nur ein winziger Teil deiner Besucher alte Versionen nutzt, solltest du schon auf modernere Formatierungsmethoden umsteigen.

Ein anderer Punkt ist die Validität des Codes und die speziellen Bugs des Internet-Explorers. Ist der Code nicht 100% valide, so vermurkst der Internet-Explorer oft die ganze Webseite. Zum Anderen ist der Internet Explorer dafür bekannt, an sich schon viele Bugs zu haben, die man nur durch spezielle Hacks lösen kann. Viele Formatierungen (auch welche, die nicht neu sind) werden vom Internet-Explorer gar nicht erst erkannt oder falsch interpretiert. Aus diesem Grunde würde ich dir empfehlen, nicht den Internet Explorer als Referenz für deine Codierung zu nehmen, sondern stattdessen den Firefox oder Google Chrome. Wenn es dort richtig angezeigt wird, ist es auch richtig. Nur die speziellen Fehler, die der Internet Explorer "von Haus aus" macht, müssen dann noch korrigiert werden.

Codierung mit Tabellen ist tatsächlich längst überholt und kann so einige andere Probleme mit sich bringen, zum Beispiel bei der Validierung oder bei der Suchmaschinenoptimierung. Es ist auch nicht unbedingt angebracht, sich auf alte Browser-Versionen anzupassen und dabei die neuen Versionen außer Acht zu lassen.

Dass deine einzelnen Tabellenzeilen einen eigenen Rahmen haben, liegt vermutlich an den Angaben des CSS bzw. des HTML-Codes. Es hört sich so an, als wären die Zellen kleiner als wie du dir das vorgestellt hast. Wenn du mehrere Zellen zu einem großen Feld zusammenfassen möchtest (auch damit der Rahmen wegfällt), solltest du sie entsprechend auch vom Code her zusammen fassen. Das kannst du mit dem Code "<td colspan="2">" um zwei Spalten zusammenzufassen und mit "<td rowspan="2">" fasst du zwei Zeilen zusammen. Die "2" musst du dann nur noch entsprechend durch die gewünschte Anzahl der zusammen gefassten Zeilen/Spalten ersetzen. Ich hoffe, ich habe dein Problem richtig verstanden.