Tabelle oder DL Liste?

[IsyChan]

Servus,

eine kleine Frage, bei so einer Auflistung lieber eine Tabelle oder eine DL Liste?

Ich tippe auf Tabelle wenn mir auch nicht ganz klar ist, wie sich diese im RDW später verhalten soll. Mit einer DL Liste ist es kein größeres Problem.

PS: Der Bilderupload scheint im Google Chrome mit Windows 10 nicht zu funktionieren. Es kommt ein roter Balken mit dem Hinweis [Objekt]

[MrMurphy1]

Hallo,

ich sehe eher eine Tabelle, da die enthaltenden Informationen von der Spalten- und von der Zeilenbezeichnung abhängig sind.

Gruss

MrMurphy

[IsyChan]

Hallo MrMurphy,

ich sehe eher eine Tabelle, da die enthaltenden Informationen von der Spalten- und von der Zeilenbezeichnung abhängig sind.

ok, Tabelle war ja auch mein Tipp. Aber die Frage die jetzt kommt was passiert mit der Tabelle wenn ich auf eine Handy Darstellung umschalte? Die volle Tabelle wird nicht mehr zu sehen sein?

[MrMurphy1]

Hallo

ok, Tabelle war ja auch mein Tipp. Aber die Frage die jetzt kommt was passiert mit der Tabelle wenn ich auf eine Handy Darstellung umschalte? Die volle Tabelle wird nicht mehr zu sehen sein?

Dafür habe ich auch schon Lösungen gesehen, sogar hier im Forum. Ich schaue mal ob ich die wiederfinde. Wahrscheinlich sind die Forenprofis aber schneller.

Gefunden. Beschreibung:

http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Tabellen_responsiv_gestalten

und Beispiel

http://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Responsive_Tabelle_5.html

Gruss

MrMurphy

[IsyChan]

Hallo MrMurphy

dieses http://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Responsive_Tabelle_5.html gefällt mir sehr gut, schau ich mir Morgen mal etwas genauer an und schau ob ich dieses für mich nutzten kann.

Danke für deine Hilfe und die beiden Links.

[MrMurphy1]

Hallo,

die Anleitung ist vollständig und dadurch leider etwas unübersichtlich und wirkt dadurch eventuell abschreckend, das Grundprinzip ist aber relativ einfach.

Tabellenzellen können auch als Inline-Block oder Blockelemente dargestellt werden. Das ist vielen Webseitenerstellern nicht bekannt.

Wenn bei zu schmalem Fenster mehrere Zellen nebeneinander rutschen sollen, werden sie als Inline-Block-Elemente ( display: inline-block; ) dargestellt. Über die Breite (width, padding) kann gesteuert werden, wie viele Zellen nebeneinander stehen sollen.

Sollen bei noch schmalerem Fenster oder um Daten herauszuheben die Zellen jeweils in einer Zeile stehen, werden sie als Block-Elemente ( display: block; ) dargestellt. Inline-Block mit entsprechender Breite würde zwar auch gehen, aber dann ärgert einen eventuell der rechte Zwangsabstand.

Sobald die Zellen als Inline-Block- oder Block-Element angezeigt werden, wird gleichzeitig die 1. Zeile mit den Überschriften ausgeblendet ( display: none; ). Und mittels CSS und des Pseudoelements ::before vor jeder Zelle eingeblendet.

Die restlichen Angaben dienen "nur" der Optik. Die kannst du hinzufügen, wenn die Tabelle sich so verhält wie du es dir vorstellst.

Am besten läßt du also erst mal nur inline-block mit Breitenangaben und block auf deine Tabelle los und schaust, wie sie sich verhält.

Gruss

MrMurphy

[IsyChan]

Hallo MrMurphy,

hab mich mal an meinem Screenshot vom ersten Posting versucht. Dabei ist folgendes herausgekommen:

<table width="100%">
   <thead class="thead">
     <tr>
       <th>TLD Domain</th>
       <th>Beschreibung</th>
       <th>Preis / Jahr</th>
       <th>Kündigungsfrist</th>
       <th>Laufzeit / Abrechnung</th>
     </tr>
   </thead>

   <tbody>
      <table width="100%" border="0">           
         <tr>
           <td>.de</td>
           <td>Deutschland</td>
           <td>7,44 €</td>
           <td>6 Wochen</td>
           <td>1 Jahr / jährlich</td>
           </tr>
       </table>
   </tbody>
</table>

Und das dazugehörige CSS (in Anlehnung an eine Online Demo von Peter M. Müller und der Reihe Little Boxes):

table {
    border-collapse:separate;
    border-spacing:1px;
    width:100%;
  }
  
  thead { background-color: #d1e9f2; color:#000;}
  tbody { background-color:#f4f3f3;}
  
  th, td {
    text-align:left;
    vertical-align:top;
    padding:0.5em 1em;
  }
  
  th:nth-child(1){ width:17%; }
  th:nth-child(2){ width:20%; }
  th:nth-child(3){ width:15%; }
  th:nth-child(4){ width:20%; }
  th:nth-child(5){ width:28%; }

  td:nth-child(1){ width:17%; }
  td:nth-child(2){ width:20%; }
  td:nth-child(3){ width:15%; }
  td:nth-child(4){ width:20%; }
  td:nth-child(5){ width:28%; }

  
  tbody tr:nth-child(odd) { background-color:#efefef;}
  tbody tr:hover {background-color:#cecece;}

Kann man daran noch etwas verbessern, vereinfachen oder lässt sich damit weiterarbeiten?

Mein Beispiel ist auch online zu finden: http://codepen.io/anon/pen/qOdbbb

[Gunnar Bittersmann]

@@IsyChan

<table width="100%">

table hat kein width-Attribut (mehr). Darstellung gehört ins Stylesheet, nicht ins Markup.

   <thead class="thead">

Die Klasse ist sinnfrei. Durch den Elementtypen thead ist das bereits als Tabellenkopf ausgezeichnet.

   <tbody>
      <table width="100%" border="0">           

Nein. tbody darf nicht table zum Kind haben.

Außerdem liegt hier überhaupt keine verschachtelste Tabelle vor.

Das Markup sollte so aussehen:

<table>
   <thead>
     <tr>
       <th>TLD Domain</th>
       <th>Beschreibung</th>
       <th>Preis / Jahr</th>
       <th>Kündigungsfrist</th>
       <th>Laufzeit / Abrechnung</th>
     </tr>
   </thead>

   <tbody>
     <tr>
       <td>.de</td>
       <td>Deutschland</td>
       <td>7,44 €</td>
       <td>6 Wochen</td>
       <td>1 Jahr / jährlich</td>
     </tr>
   </tbody>
</table>

LLAP 🖖