Wie man HTML-Tabellen für kleinere Auflösungen optimieren kann
HTML-Tabellen sind ein traditionelles Element im Webdesign und ideal zur Darstellung von größeren Datenmengen in einer strukturierten und kompakten Form. Eine Tabelle mit 2 Spalten, beispielsweise für Kontaktdaten, ergibt semantisch meistens noch keine HTML-Tabelle, da sie eher einem Glossar ähnelt. Oft fehlen bei diesen sogenannten Layout-Tabellen auch die Spaltenüberschriften. Diese befinden sich in diesem Fall in der ersten Spalte, die zweite Spalte enthält dagegen die Werte. Insofern die nachfolgenden Zeilen einen ähnlichen Aufbau (in Form von Beschriftung und Wert) haben, könnte dafür auch eine "echte" Tabelle genutzt werden, beispielsweise zur Auflistung der Eigenschaften eines Produktes.
Welche Vor- und Nachteile haben HTML-Tabellen?
HTML-Tabellen werden in der Regel dazu verwendet, um umfangreiche Datenmengen übersichtlich abzubilden und bieten eine klare semantische Struktur, die nicht nur für Menschen, sondern auch für Suchmaschinen und Screenreader leicht verständlich ist.
Sie wirken in kleineren Auflösungen jedoch schnell unübersichtlich, lassen sich in diesen oft auch schwer navigieren und sind im Standard selten barrierefrei. Diese Probleme lassen sich aber mit einigen zusätzlichen Elementen und Attributen und ein wenig CSS-Code aus der Welt schaffen.
Wie lassen sich HTML-Tabellen benutzerfreundlich umsetzen und worauf ist dabei zu achten?
Das Grundgerüst einer HTML-Tabelle bilden die Elemente thead, tbody und tfoot. thead beinhaltet den Tabellenkopf, tbody die eigentlichen Daten und tfoot bei Bedarf einen optionalen Tabellenfuß, beispielsweise für Summenwerte der Daten.
Innerhalb der zuvor genannten Elemente befinden sich wiederum die Elemente tr, th und td. Das tr-Element erzeugt die jeweilige Zeile. Im th-Element ist die Überschrift der jeweiligen Spalte zu finden und im td-Element der Wert. Der Tabellenkopf ist speziell für Screenreader und die Barrierefreiheit entscheidend, da sich deren Nutzer über einen Shortcut bei einem Datenfeld die dazugehörige Spaltenüberschrift vorlesen lassen können. Damit in den kleineren Auflösungen die Spaltenüberschrift vor dem jeweiligen Wert ausgegeben wird, muss diese dem td-Element zusätzlich über das Attribut data-label mitgegeben werden.
Im Sinne der Barrierefreiheit sollte man bei der Tabelle das Attribut summary und innerhalb der Tabelle das Element caption setzen, solange sich diese inhaltlich unterscheiden. Die summary wird nur von Screenreadern vorgelesen und ist für alle anderen nicht sichtbar. Sie erklärt die Struktur der Tabelle, also beispielsweise was in der ersten Zeile und in den darauffolgenden zu finden ist. Die caption ist dagegen eine Art Tabellenüberschrift und wird dem Nutzer angezeigt. Sie kann die Tabelle und deren Daten kurz beschreiben, wenn sie nicht von vornherein verständlich ist.
<div class="table-responsive">
<table summary="Die erste Zeile zeigt die Überschriften, alle weiteren Zeilen listen die Mitglieder mit Vor- und Nachnamen, der Adresse, der Telefonnummer und der E-Mail-Adresse auf.">
<caption>Mitgliederliste</caption>
<thead>
<tr>
<th>Vorname</th>
<th>Nachname</th>
<th>Adresse</th>
<th>Telefonnummer</th>
<th>E-Mail-Adresse</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Vorname">Max</td>
<td data-label="Nachname">Mustermann</td>
<td data-label="Adresse">Musterstraße 1, 01234 Musterstadt</td>
<td data-label="Telefonnummer">0123 45678910</td>
<td data-label="E-Mail-Adresse">max@mustermann.de</td>
</tr>
<tr>
<td data-label="Vorname">Maria</td>
<td data-label="Nachname">Musterfrau</td>
<td data-label="Adresse">Musterweg 1, 04321 Musterort</td>
<td data-label="Telefonnummer">0109 87654321</td>
<td data-label="E-Mail-Adresse">maria@musterfrau.de</td>
</tr>
<tr>
<td data-label="Vorname">Marcel</td>
<td data-label="Nachname">Muster</td>
<td data-label="Adresse">Musterweg 3, 01357 Musterort</td>
<td data-label="Telefonnummer">0123 10987654</td>
<td data-label="E-Mail-Adresse">marcel@muster.de</td>
</tr>
<tr>
<td data-label="Vorname">Mark</td>
<td data-label="Nachname">Mustermann</td>
<td data-label="Adresse">Musterstraße 5, 03579 Musterstadt</td>
<td data-label="Telefonnummer">0109 12345678</td>
<td data-label="E-Mail-Adresse">mark@mustermann.de</td>
</tr>
</tbody>
</table>
</div>
Die Gestaltung der HTML-Tabelle, aber auch die Beschriftung in den kleineren Auflösungen, wird über folgenden CSS-Code umgesetzt:
<style type="text/css">
.table-responsive table.sw-text-editor-table,
.table-responsive table {
table-layout: fixed;
width: 100%;
border: 0;
}
.table-responsive table.sw-text-editor-table caption,
.table-responsive table caption {
caption-side: top;
font-size: 18px;
margin: 10px;
}
.table-responsive table.sw-text-editor-table thead,
.table-responsive table thead {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
}
.table-responsive table.sw-text-editor-table tr,
.table-responsive table tr {
display: block;
border: 1px solid #798490;
border-bottom: 3px solid #798490;
margin-bottom: 7px;
padding: 5px;
}
.table-responsive table.sw-text-editor-table th,
.table-responsive table.sw-text-editor-table thead td,
.table-responsive table.sw-text-editor-table td,
.table-responsive table th,
.table-responsive table thead td,
.table-responsive table td {
padding: 7px;
text-align: center;
}
.table-responsive table.sw-text-editor-table th,
.table-responsive table.sw-text-editor-table thead td,
.table-responsive table th,
.table-responsive table thead td {
font-size: 15px;
background-color: #0042a0;
color: #ffffff;
}
.table-responsive table.sw-text-editor-table td,
.table-responsive table td {
display: block;
font-size: 14px;
text-align: right;
border: 0;
border-bottom: 1px solid #798490;
}
.table-responsive table.sw-text-editor-table td::before,
.table-responsive table td::before {
content: attr(data-label) ': ';
float: left;
font-weight: bold;
margin-right: 2px;
}
.table-responsive table.sw-text-editor-table td:last-child,
.table-responsive table td:last-child {
border-bottom: 0;
}
@media screen and (min-width: 576px) {
.table-responsive table.sw-text-editor-table,
.table-responsive table {
border: 1px solid #798490;
}
.table-responsive table.sw-text-editor-table caption,
.table-responsive table caption {
font-size: 20px;
}
.table-responsive table.sw-text-editor-table thead,
.table-responsive table thead {
height: auto;
width: auto;
overflow: initial;
position: initial;
margin: 0;
}
.table-responsive table.sw-text-editor-table tr,
.table-responsive table tr {
display: table-row;
padding: 0;
border-bottom: 0;
}
.table-responsive table.sw-text-editor-table th,
.table-responsive table.sw-text-editor-table thead td,
.table-responsive table.sw-text-editor-table td,
.table-responsive table th,
.table-responsive table thead td,
.table-responsive table td {
border: 1px solid #798490;
}
.table-responsive table.sw-text-editor-table td,
.table-responsive table td {
display: table-cell;
padding: 9px;
text-align: center;
font-size: 14px;
}
.table-responsive table.sw-text-editor-table td::before,
.table-responsive table td::before {
display: none;
}
}
</style>
Wie lassen sich HTML-Tabellen mit Shopware 6 umsetzen?
In Shopware 6 kann man die zuvor genannte HTML-Tabelle beispielsweise über den CMS-Block "HTML" aus der Block-Kategorie "HTML" umsetzen.
Darüber hinaus ist es auch möglich, die Funktion "Tabelle hinzufügen" des TinyMCEs eines beliebigen CMS-Blocks für einen Text zu nutzen. Dazu klickt man die Funktion an, aktiviert den Schalter "Tabellenkopf hinzufügen" und wählt anschließend die Anzahl Spalten und Zeilen aus. Danach kann der Tabellenkopf und die einzelnen Spalten und Zeilen mit Werten gefüllt werden. Im Anschluss muss man beim CMS-Block im Tab "Layout" bei dem Eingabefeld "CSS-Klassen" noch die CSS-Klasse "table-responsive" ergänzen.
Wie bereits zuvor erwähnt, muss der Tabelle auch noch ein summary-Attribut zugewiesen, innerhalb der Tabelle ein caption-Element platziert und den td-Elementen das Attribut data-label="Tabellenkopf-Wert" zugewiesen werden, damit die HTML-Tabelle in kleineren Auflösungen gut nutzbar und barrierefrei ist. Diese Einstellungen kann man über die Funktion "Bearbeitungsmodus wechseln", die über das Icon </> erreichbar ist, setzen. Das Endresultat sieht dann wie folgt aus:
<table class="sw-text-editor-table" summary="Die erste Zeile zeigt die Überschriften, alle weiteren Zeilen listen die Mitglieder mit Vor- und Nachnamen, der Adresse, der Telefonnummer und der E-Mail-Adresse auf.">
<caption>Mitgliederliste</caption>
<thead class="sw-text-editor-table__head">
<tr class="sw-text-editor-table__row">
<th class="sw-text-editor-table__col">Vorname</th>
<th class="sw-text-editor-table__col">Nachname</th>
<th class="sw-text-editor-table__col">Adresse</th>
<th class="sw-text-editor-table__col">Telefonnummer</th>
<th class="sw-text-editor-table__col">E-Mail-Adresse</th>
</tr>
</thead>
<tbody class="sw-text-editor-table__body">
<tr class="sw-text-editor-table__row">
<td data-label="Vorname" class="sw-text-editor-table__col">Max</td>
<td data-label="Nachname" class="sw-text-editor-table__col">Mustermann</td>
<td data-label="Adresse" class="sw-text-editor-table__col">Musterstraße 1, 01234 Musterstadt</td>
<td data-label="Telefonnummer" class="sw-text-editor-table__col">0123 45678910</td>
<td data-label="E-Mail-Adresse" class="sw-text-editor-table__col">max@mustermann.de</td>
</tr>
<tr class="sw-text-editor-table__row">
<td data-label="Vorname" class="sw-text-editor-table__col">Maria</td>
<td data-label="Nachname" class="sw-text-editor-table__col">Musterfrau</td>
<td data-label="Adresse" class="sw-text-editor-table__col">Musterweg 1, 04321 Musterort</td>
<td data-label="Telefonnummer" class="sw-text-editor-table__col">0109 87654321</td>
<td data-label="E-Mail-Adresse" class="sw-text-editor-table__col">maria@musterfrau.de</td>
</tr>
<tr class="sw-text-editor-table__row">
<td data-label="Vorname" class="sw-text-editor-table__col">Marcel</td>
<td data-label="Nachname" class="sw-text-editor-table__col">Muster</td>
<td data-label="Adresse" class="sw-text-editor-table__col">Musterweg 3, 01357 Musterort</td>
<td data-label="Telefonnummer" class="sw-text-editor-table__col">0123 10987654</td>
<td data-label="E-Mail-Adresse" class="sw-text-editor-table__col">marcel@muster.de</td>
</tr>
<tr class="sw-text-editor-table__row">
<td data-label="Vorname" class="sw-text-editor-table__col">Mark</td>
<td data-label="Nachname" class="sw-text-editor-table__col">Mustermann</td>
<td data-label="Adresse" class="sw-text-editor-table__col">Musterstraße 5, 03579 Musterstadt</td>
<td data-label="Telefonnummer" class="sw-text-editor-table__col">0109 12345678</td>
<td data-label="E-Mail-Adresse" class="sw-text-editor-table__col">mark@mustermann.de</td>
</tr>
</tbody>
</table>
Der CSS-Code für die Gestaltung der HTML-Tabelle und für die Beschriftungen in den kleineren Auflösungen kann entweder im eigenen Theme abgelegt oder im CMS-Block "HTML" aus der Block-Kategorie "HTML" hinterlegt werden.





