• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellen und responsive Nutzung

gnude

Neues Mitglied
Hallo HTML/CSS Entwicker,
mal eine Frage in die Runde.
Ich habe eine einfache HTML Tabelle, wohl noch HTML 3.2, die in eine Wordpress Seite eingebettet ist.
Die Tabelle ist sehr simpel aufgebaut. Allerdings ist sie durch die Wordpress Umgebung auf Smartphone nicht Scrollbar.
Daher auf einem mobiel Gerät wird sie einfach abgeschnitten und man sieht nicht was rechts ist.
Nun möchte ich die einfache Tabelle mit CSS soweit responsive gestalten das sie vernünftig angezeigt wird.
In Wordpress kann ich eigenen CSS unterbringen.
Hat jemand Tipps oder Links wo ich mit der Suche beginnen kann.
Würde gern über die ein oder andere Lösung diskutieren.....

HTML Code der Tabelle:
HTML:
<table border="1">
 <thead>
  <tr bgcolor="#BDBDBD">
  <th style="text-align: left;" width="150"><strong>Name</strong></th>
  <th width="150"></th>
  <th style="text-align: left;" width="150"><strong>Kontaktdaten</strong></th>
  <th width="150"></th>
  </tr>
 </thead>
 <tbody>
  <tr>
  <td><strong>Name</strong></td>
  <td>Hans</td>
  <td><strong>Telefon</strong></td>
  <td>12345</td>
  </tr>
  <tr>
  <td><strong>Nachname</strong></td>
  <td>Wurst</td>
  <td><strong>eMail
  </strong></td>
  <td>testmail</td>
  </tr>
 </tbody>
</table>
 
Werbung:
Vielen Dank, ich probiere es mal aus.
Die Idee ist schonmal nicht schlecht. Der Tabelleninhalt wird hier nach unten zusammengeführt. Ich glaub das ist auf einem Mobilgerät die "beste" Lösung.
Tabelle sind wirklich ne Herausforderung da sie aus einer Zeit stammen wo ein Mobilgerät noch nicht erfunden war. Trotzdem sind sie jetzt da und man muss das beste draus machen.
Eine Lösung die die Felder weiter rechts nebeneinander hält gibt es vermutlich nicht oder?
 
Ja die Tabelle die ich umsetzen möchte ist in der Tat etwas eigenwilling und ähnlich dem was ich gepostet habe.
Ich weiss das es ne eigenwillige Aufteileung ist.
 
Werbung:
Würde gern über die ein oder andere Lösung diskutieren.....

@gnude: Deine Tabelle enthält zwei grundlegende Probleme, die eine responsive Darstellung verhindern:

1. HTML-Tabellen sind ausschließlich für Tabellendaten gedacht. Dein Inhalt ist hingegen eine Auflistung von Kontaktdaten.

2. Du füllst die Tabelle zudem vollkommen falsch. Außer in der Bildschirmansicht stehen die Daten in überhaupt keinem Zusammenhang.

Bei der korrekten Anwendung von HTML ist eine anschließende responsive Gestaltung kein Problem.

Tabelle sind wirklich ne Herausforderung da sie aus einer Zeit stammen wo ein Mobilgerät noch nicht erfunden war.

Tabellen waren immer nur für Tabellendaten gedacht, nicht zur Gestaltung von Webseiten. Mit Mobilgeräten hat das nichts zu tun.

Echte Tabellen mit korrekten Tabellendaten sind von sich aus nicht responsive, kommen in der Praxis aber auch so gut wie nie vor. In vielen aktuellen Lehrmaterialien werden sie entsprechend kaum noch behandelt.

Bis zum Jahr 2000 gab es kein CSS, deshalb wurden Tabellen (übrigens auch damals schon) zur Gestaltung mißbraucht. Das ging halt nicht anders. Seit dem Jahr 2000 ist das aber sachlich falsch, auch wenn viele Webseitenersteller das bis heute nicht akzeptieren wollen. Mit der Einführung von Flexbox und CSS-Grid gibt es überhaupt keinen Grund mehr, Tabellen zur Gestaltung zu mißbrauchen.

Deine Daten sind offensichtlich eine Kontaktliste. Sachlich ist deshalb das dl-Element mit seinen Kindelementen dt und dd am sinnvollsten. Damit ist dann auch eine responsive Darstellung kein Problem. Mit veraltetem oder sogar sachlich falsch angewendetem HTML können keine moderne, responsive Webseiten gestaltet werden.

Trotzdem sind sie jetzt da und man muss das beste draus machen.
Nein, du hast entschieden, die für deine Webseite zu verwenden.
 
Zurück
Oben