CSS: Tabellen zentrieren
Wenn man eine Webseiten mit modernen Mittel gestalten möchte, nimmt man hierfür in der Regel CSS (Cascading Style Sheets). Leider ist es hierbei nicht immer offensichtlich, wie man einen HTML-Tag so in CSS umsetzt, dass am Ende das Gleiche dabei heraus kommt.
Ein Beispiel hierfür wäre das Zentrieren. Einfachen Text kann man mit CSS zentrieren, in dem man einfach den Befehl text-align:center anwendet.
text-align:center;
width:95%;
border:1px solid #000000;
Wenn man dies jetzt mit einer Tabelle versucht, kommt man leider nicht zu dem gleichen Ergebnis. Die Tabelle bleibt im Mozilla und Opera leider auf der linken Seiten. Nur der Internet Explorer zeigt das gewünschte Bild.
text-align:center;
width:95%;
border:1px solid #000000;
| table: border:1px solid #FF0000 |
Um die Tabelle auch im Mozilla und Opera zentriert zu bekommen, muss man diesmal mit margin arbeiten. Margin-left und margin-right müssen nur auf auto gesetzt werden und schon zeigen die beiden Browser das gleiche Verhalten wie der Internet Explorer. Das text-align:center darf aber nicht wegfallen, da sonst der Internet Explorer nicht mehr zentriert, wenn man den folgenden Dokumententyp gewählt hat:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Hat man sich aber für
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
o.ä. entschieden, dann kann er Internet Explorer es auch ohne dem text-align:center;.
Das unten gezeigte Beispiel ist ohne text-align:center mit dem transitional Dokumententypen.
width:95%;
border:1px solid #000000;
| table: margin-left:auto;margin-right:auto; border:1px solid #FF0000 |
Mit ein wenig rumprobieren, kann man eigentlich immer das gleichen Erscheinungsbild bei den Browsern erzeugen.