Tabellen mit CSS formatieren

Im ersten Schritt erstellt man eine ganz normale HTML-Tabelle

<table>
    <tr>
        <td>oben links</td>
        <td>oben rechts</td>
    </tr>
    <tr>
        <td>unten links</td>
        <td>unten rechts</td>
    </tr>
</table>

Da die Rahmen ausgeschaltet sind, sieht man von der Tabelle herzhaft wenig außer dem eigentlichen Inhalt

oben links	oben rechts
unten links	unten rechts

Für den Abstand zwischen den einzelen Tabellenzellen gibt

Über CSS schalten wir für die Tabelle für die Tabellenzellen nun nach den Rahmen ein, also ein border ...

td {
  border:1px solid orange;
}

Und schon sieht man, wo unsere Tabelle anfangt und aufhört.

oben links	oben rechts
unten links	unten rechts

Rahmen ohne Abstand mit CSS

Wenn man nun keinen Abstand zwischen den Tabellenzellen haben möchte, kann der Abstand ausgeschaltet werden - mal lasst die Rahmen kollabieren (oder auf deutsch zusammenbrechen, zusammenklappen).

table {
  border-collapse:collapse;
}

td {
  border:1px solid orange;
}

oben links	oben rechts
unten links	unten rechts

Leere Tabellenzellen ausblenden

Wenn leere Tabellenzellen ganz ohne Rahmen angezeigt werden sollen (weil sie leer sind) - dann hilft bei CSS "empty-cells:hide;"

table {
  border-collapse: separate;
  empty-cells:hide;
}

td {
  border:1px solid orange;
}

<table>
    <tr>
        <td></td>
        <td>oben rechts</td>
    </tr>
    <tr>
        <td>unten links</td>
        <td>unten rechts</td>
    </tr>
</table>

	oben rechts
unten links	unten rechts

Sehr schön sieht man auf der Seite http://icant.co.uk/csstablegallery/ was man alles mit CSS an Design bei Tabellen zaubern kann. Verschiedene Design können heruntergeladen und zum Lernen analysiert werden.

Lösung einfache vertikale Steuerung Tabellenzeile bei Mausberührung hervorheben

HTML5-Video-Kurs:
hier klicken für
mehr Informationen

weitere eigene Projekte:

Programmiersprachen

Bildbearbeitung & Fotografieren

MS Office Kurs / Ernährung