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 |
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 |
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.