Anpassungsfähige Tabellen mit CSS: Von Desktop zu Mobile

Das Internet entwickelt sich ständig weiter, und mit ihm auch die Art und Weise, wie wir Webseiten gestalten. Ein zentraler Aspekt modernen Webdesigns ist die Responsivität – die Fähigkeit von Webseiten, sich an verschiedene Bildschirmgrößen und Geräte anzupassen. Heute betrachten wir ein praktisches Beispiel: die Gestaltung einer responsiven HTML-Tabelle mit CSS.

Die Herausforderung: Tabellen im Responsiven Design

Tabellen sind ein traditionelles Element im Webdesign, ideal für die Darstellung von Daten in einer strukturierten Form. Aber sie haben oft ein Problem: Auf kleinen Bildschirmen, wie denen von Smartphones, können sie unübersichtlich und schwer zu navigieren sein. Unser Ziel ist es daher, eine Tabelle zu erstellen, die auf Desktop-Computern gut aussieht und gleichzeitig auf mobilen Geräten problemlos nutzbar ist.

Die Lösung: CSS Media Queries und Attribute

Die vorgestellte Tabelle zeigt eine einfache, aber effektive Methode, um Responsivität zu erreichen. Mit CSS Media Queries können wir die Darstellung der Tabelle anpassen, je nachdem, wie breit der Bildschirm des betrachtenden Geräts ist. Unterhalb einer Breite von 600px ändern sich die Eigenschaften der Tabelle, um eine optimierte Ansicht für kleinere Bildschirme zu bieten.

Desktop-Version

Auf größeren Bildschirmen wird die Tabelle in ihrer traditionellen Form angezeigt: Zeilen und Spalten sind klar sichtbar, und die Tabelle erstreckt sich über die volle Breite des Containers. Die Gestaltung mit dunklen Kopfzeilen und helleren Zeilen erleichtert die Lesbarkeit und bietet einen modernen, ansprechenden Look.

Mobile Version

Die wahre Magie zeigt sich jedoch auf kleineren Bildschirmen. Jede Zeile der Tabelle wird zu einem eigenen Blockelement, wobei die Zellinhalte untereinander statt nebeneinander angeordnet werden. Diese Anpassung wird durch die CSS-Eigenschaft display: block; erreicht, die auf die Tabellenzellen unterhalb der 600px-Breite angewendet wird.

Eine besonders raffinierte Eigenschaft ist die Verwendung des data-label Attributs im HTML-Code. Auf kleineren Bildschirmen wird vor jedem Zelleninhalt ein Label (wie „Kategorie“, „Domain“, etc.) angezeigt, das aus dem data-label-Attribut generiert wird. Dies macht die Daten auch in einer gestapelten Darstellung leicht verständlich.

Warum responsives Tabellendesign wichtig ist

Mit dem stetig wachsenden Anteil mobiler Internetnutzung ist es unerlässlich, dass Informationen auf allen Geräten zugänglich und leicht zu verstehen sind. Eine responsive Tabelle stellt sicher, dass Benutzer, unabhängig von ihrem Gerät, eine optimale Erfahrung haben. Die verbesserte Benutzererfahrung führt zu höherer Zufriedenheit und Engagement, was besonders wichtig ist, wenn es um den kommerziellen Einsatz von Webseiten geht.

Diesen CSS Code benötigen wir hierfür:

  table {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
  }

  table caption {
    font-size: 1.5em;
    margin: .5em;
  }

  table tr {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: .35em;
  }

  table th,
  table td {
    padding: .625em;
    text-align: center;
  }

  table th {
    font-size: .85em;
    letter-spacing: .1em;
		background-color: #2a2a2a;
		color:#ffffff;
  }

  @media screen and (max-width: 600px) {
    table {
      border: 0;
    }

    table caption {
      font-size: 1.3em;
    }

    table thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

    table tr {
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: .5em;
    }

    table td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right;
    }

    table td::before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
    }

    table td:last-child {
      border-bottom: 0;
    }
  }

Hier der HTML Code für die Tabelle:

<table><caption>Domainliste</caption>
<thead>
<tr>
<th scope="col">Kategorie</th>
<th scope="col">Domain</th>
<th scope="col">Registriert</th>
<th scope="col">Kaufpreis</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Kategorie">Internet</td>
<td data-label="Domain">webprojekt.org</td>
<td data-label="Registriert">01.10.2001</td>
<td data-label="Kaufpreis">199 €</td>
</tr>
<tr>
<td data-label="Kategorie">Bauen</td>
<td scope="row" data-label="Domain">klima-haus.de</td>
<td data-label="Registriert">01.03.2011</td>
<td data-label="Kaufpreis">999 €</td>
</tr>
<tr>
<td data-label="Kategorie">Energie</td>
<td scope="row" data-label="Domain">heizölpreisevergleichen.de</td>
<td data-label="Registriert">01.03.2018</td>
<td data-label="Kaufpreis">399 €</td>
</tr>
<tr>
<td data-label="Kategorie">Beratung</td>
<td scope="row" data-label="Domain">rechtsschutzberatung.de</td>
<td data-label="Registriert">01.05.2013</td>
<td data-label="Kaufpreis">899 €</td>
</tr>
</tbody>
</table>

Das vorgestellte Beispiel zeigt, wie mit einigen cleveren CSS-Techniken und dem gezielten Einsatz von HTML-Attributen eine herkömmliche Tabelle in ein responsives, benutzerfreundliches Element verwandelt werden kann. Dieses Beispiel demonstriert eindrucksvoll, wie modernes Webdesign funktionieren kann – durch die Anpassung an die Bedürfnisse und Gewohnheiten der Nutzer in einer sich ständig verändernden digitalen Landschaft.