Tabellen sind eine Herausforderung. Tabellen sind nicht geeignet um das Layout zu gestalten. Bei der Darstellung von Daten in Tabellen hat man zudem die Herausforderung mit der Darstellung abhängig von der Bildschirmbreite. Hier helfen jedoch MediaQuerries und CSS.
Eine Tabelle ist eine geordnete Zusammenstellung von Texten oder Daten. Die darzustellenden Inhalte werden dabei in Zeilen (waagerecht) und Spalten (senkrecht) gegliedert, die grafisch aneinander ausgerichtet werden.
Für den Aufbau einer Tabelle der Gitterstruktur sind mehrere Elemente verantwortlich. Im einfachsten Fall besteht eine Tabelle aus Tabellenzeilen, in welchen sich Tabellenzellen befinden.
<table>
<tr>
<td><td>
<td><td>
</tr>
</table>
Moderne Tabellen sollten jedoch mindestens aus einem Tabellenkopf, Tabellenkörper und einem Tabellenfuß bestehen.
Dabei enthält der Tabellenkopf die Zeilen der einfachen Tabelle, die ausschließlich Kopfzellen enthalten, während der
Tabellenkörper die Zeilen enthält, die ausschließlich oder hauptsächlich Datenzellen enthalten. Der Tabellenfuß enthält zusammenfassende oder die Tabelle erläuternde Daten.
<table>
<thead>
<tr>
<th>Kopf Spalte 1</th>
<th>Kopf Spalte 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Inhalt Spalte 1<td>
<td>Inhalte Spalte 2<td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Fuß Spalte 1</td>
<td>Fuß Spalte 2</td>
</tr>
</tfoot>
</table>
Tabellenüberschrift: Durch das caption-Element wird eine Tabellenüberschrift definiert. Die Deklaration muss unmittelbar nach dem einleitenden <table>-Tag erfolgen. Obwohl eine Tabelle mehrere Tabellenkörper (tbody) besitzen darf, ist es nicht erlaubt, mehrere Tabellenüberschriften zu verwenden. caption bedeutet so viel wie Überschrift oder Beschriftung.
Tabellenuntertitel: Mit dem Element figure haben sie ein perfektes Elternelement für ein figcaption als Tabellenuntertitel.
<figure>
<table>
<caption>Überschrift für die Tabelle</caption>
<thead>
<tr>
<th>Kopf Spalte 1</th>
<th>Kopf Spalte 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Inhalt Spalte 1<td>
<td>Inhalte Spalte 2<td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Fuß Spalte 1</td>
<td>Fuß Spalte 2</td>
</tr>
</tfoot>
</table>
<figcaption>Zusammenfassung der Tabelle</figcaption>
</figure>
Tabellen mit Hilfe von CSS umstrukturieren: Ab einem bestimmten Breakpoint erhalten die Zeilen (<tr>) eine Breite von 100%, werden gefloatet und richten sich somit untereinander aus. Der Tabellenkopf, Überschrift und Fuß werden ausgeblendet.
Die Informationen des Tabellenkopfes müssen nun den einzelnen Zeilen vorangestellt werden. Darüber hinaus werden die Informationen mehrfach benötigt. Mit Hilfe eines data-labels ist das allerdings kein Problem
<tbody>
<tr>
<td data-label="Kopf Spalte 1">Inhalt Spalte 1<td>
<td data-label="Kopf Spalte 2">Inhalte Spalte 2<td>
</tr>
</tbody>
Die Entscheidung wann eine Tabelle mit nur einer Spalte oder mit mehreren Spalten dargestellt wird erfolgt über eine Mediaquerry abfrage. Im einspaltigen Layout werden Tabellenüberschrift, Kopf und Fuß ausgeblendet.
@media (max-width: 75em)
{
table
{
border: none;
}
thead, caption, tfoot /*Überschrift als auch der Tabellenkopf und Fuß werden ausgeblendet */
{
display: none;
}
tr
{
float: left;
width: 100%;
margin-bottom: 1em;
}
td
{
float: left;
width: 80%;
padding: .5em;
}
td::before
{
content:attr(data-label);
word-wrap: break-word;
width: 40%;
float: left;
padding: .5em;
margin: -.5em .5em -.5em -.5em;
}
}
Um die gewünschte Darstellung zu erreichen, lesen wir das data-label mit Hilfe der content-Eigenschaft von CSS aus, und fügen den Begriff mit ::before am Anfang jeder Zeile wieder ein.
td::before
{
content:attr(data-label);
word-wrap: break-word;
width: 40%;
float: left;
padding: .5em;
margin: -.5em .5em -.5em -.5em;
}