Webmaster-Crashkurs

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.

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2018   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit VideosImpressumDatenschutzerklärung