Frage von RhoMalV, 11

Sind tabellarische Darstellungen für Webseiten überhaupt noch empfehlenswert (keine Layout-Tabellen)?

Hallo,

sind zu Zeiten des mobilen Webs Tabellen zur übersichtlichen Darstellung von Daten überhaupt noch zu empfehlen oder sollte man generell tabellarische Daten in einem einspaltigen Zeilen-Container anlegen? Selbst wenn sie auf einem Desktop noch ordentlich darstellbar sind, werden diese auf einem 320px breiten View unleserlich und wenn man sie aufteilen würde unübersichtlich.

Ich meine jetzt keine Layout-Tabellen.

Welche alternativen Darstellungsvarianten kennt Ihr und nutzt Ihr?

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Bluewater1403, 6

Es kann mitunter natürlich Sinn machen, dass gewisse Daten in einer "echten" Tabelle dargestellt werden.

Ich löse das dann so, dass ich Tabelle in einen Container setze, der zwar nicht breiter wird als das mobile Gerät, aber dann einen Scrollbalken in X-Richtung erhält.

Somit kann ein User, wenn er die Daten der Tabelle lesen will explizit den Ihnalt der Tabelle horizontal mit dem Finger scrollen oder wischen OHNE das das Layout zerschiesst oder die ganze Seite scrollt.

Suchmaschinen erkennen das - somit gibt es keine negativen Nebenwirkungen.

Das kann man alleine durch Html und CSS lösen.

Kommentar von RhoMalV ,

Cool. Setzt Du dann für den jeweiligen DIV-Container einen scrollbar: x; oder wie setzt Du das technisch um?

Kommentar von Bluewater1403 ,

Ich setze sehr oft Bootstrap ein. Da sieht das CSS dann so aus:

.table-responsive{
overflow-x: auto;
min-height: .01%
}
@media screen and (max-width:767px){
.table-responsive{
width: 100%;
margin-bottom: 18px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-responsive > .table{
margin-bottom:0
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td{
white-space: nowrap
}

Und das Html:

<div class="table-responsive">
<table class="table">
.
.
.
</table>
</div>
Kommentar von RhoMalV ,

Besten dank! Ich muss mich damit noch einmal intensiver auseindersetzen, damit es so funktioniert, wie ich es mir vorstelle. :)

Ansonsten scheint es ein wirklich guter Ansatz zu sein.

Antwort
von Technoir, 5

Nutze einfach responsive Tabellen !

Kommentar von RhoMalV ,

Welche Art von Tabellen wäre denn responsive? Nebeneinander angeordnete DIV-Container, bei der man in der mobilen Ansicht den float auf none setzt? 

Ist halt unpraktisch, wenn man einen Tabellenkopf angelegt hat, in der man die Spalten mit einer Überschrift versieht. Diese wiederholen sich in der responsiven Darstellung nicht automatisch.

Antwort
von fiwaldi, 6

Immer noch gibt es im komerziellen/administrativen  Bereich Nutzer, die mit Mobilgeräten nichts am Hut haben, da sie mehr Überblick brauchen

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten