HTML Darstellung von Tabellen in Divs oder Tables?

[Blackbenji]

Hallo,

ich habe in PHP einen Datensatz den ich tabellarisch Darstellen möchte.
Die Frage ist nun: Divs oder Tables?

Die Suche im Internet ergibt da gespaltenes Feedback.
Die einen sagen: Tables! Aber mit der Definition im CSS. Die anderen sagen Divs mit CSS.

Persönlich würde ich eher zu den Tables greifen wollen, weil es einfacher ist.

Was ist aber Zeitgemäß?

 

[Yuuri]

Kommt drauf an ob die Daten für eine Tabelle geeignet sind.

 

[Blackbenji]

Als Beispiel:

id | headline | author | date | function
1 | testentry | useradmin | 2013-03-24 12:26:33 | edit /delete

Das ganze natürlich 20,30,50,100 Datensätzen ...

 

[Reglohln]

Vor allem hat ein <div>-Tag noch weniger Aussagekraft, als eine Tabelle.

Fakt ist: tabellarische Daten gehören in Tabellen (und zwar "echte", mittels <table>, ect.). Anderer Inhalt gehört nicht in Tabellen, sondern in andere, semantisch korrekte Elemente.

@dein Beispiel: Kommt etwas darauf an, wie du es einsetzt. Ansich könnte es schon eine Tabelle sein, aber je nach Einsatz könnte auch eine Liste oder gar nur ein <span> genutzt werden.

Man kann es einfach nicht pauschalisieren. Du musst vom Endergebnis ausgehen.

 

[Augen1337]

Was ist daran eine Liste?

 

[Yuuri]

Sieht ganz klar nach Tabelle aus.

 

[Reglohln]

Was ist daran eine Liste?

Je nachdem, wie er es einsetzt, wäre es sicher möglich. Aber stimmt schon. Liste ist es wohl eher weniger ^^

Sieht ganz klar nach Tabelle aus.

Das scheint aber nur die Ausgabe der Datenbank zu sein. Ob er es auch so einsetzt, ist eine ganz andere Frage.

Für mich könnte das z.B. ein Blogbeitrag sein (nur ohne Inhalt ^^). Überschrift kommt ganz oben dann in ein <hx>-tag und der Rest unter die Überschrift als normaler Text. Da wäre nichts mit Tabelle.

 

[Tion1392]

Da es eine Auflistung von Datensätzen ist, ist eine Tabelle prädestiniert dafür. Dies ist sogar ein Parade-Beispiel für den Einsatz einer Tabelle

 

[Daaron]

Auch von mir: Definitiv <table>, es sind tabellarische Daten.

<div> sollte man immer erst dann einsetzen, wenn semantisch nichts wirklich passen will bzw. semantisch passendere Elemente von Zielbrowsern auf den Tod nicht unterstützt werden. <div> ist eigentlich "nur da" und genau so nichtssagend wie <span>. Das eine ist ein "ich bin halt da"-Blockelement, das andere ein "ich trag nur Styles mit mir rum"-Inline.

 

[Yuuri]

Ich mag deinen letzten Satz.

 

[Reglohln]

Nur, weil der TE Daten in tabellarischer Form aufführt, die offenbar nur direkt aus der Datenbank stammen, heißt das noch lange nicht, dass er sie auch tabellarisch verwenden wird.

Im Beispiel des TE ist eine Headline, Author und Erstellungsdatum hinterlegt. Das kann man komplett untabellarisch nutzen.

Man kann hier einfach keine Aussage treffen, ob es mit Tabellen gelöst werden kann, oder nicht. Nutzt der TE die Daten in genau so einer Übersicht, wie er sie gepostet hat, ist es natürlich eine Tabelle. Andernfalls kann es auch komplett falsch sein, mit Tabellen zu arbeiten.

Edit: wobei der TE schreibt "ich habe in PHP einen Datensatz den ich tabellarisch Darstellen möchte.". Sollen die Daten wirklich so dargestellt werden, wie im Beispiel, dann wären es wirklich Tabellen.

 

[Daaron]

Natürlich. Der Inhalt eines CMS ist ja nach dem SQL Query auch tabellarisch und am Ende eben doch nicht tabellarisch dargestellt. Aber hier siehts mir arg nach ner Backend-Verwaltung (wegen dem edit/delete) aus, die normalerweise tabellarisch aufgebaut wird.

 

[Blackbenji]

@Daaron: richtig erkannt, es geht um das Backend.

Dann werde ich bei Tables bleiben!

 

[RudeRaccoon]

Tables für Tabellen, Div Container für Design

 

[Reglohln]

Div Container für Design

Das ist Unfug. Divs haben genauso wenig mit Design zu tun, wie Tabellen. Für Design ist CSS zuständig und das nutzt vorhandenes, semantisch korrektes Markup.

Dass man DIVs und andere Füllelemente nicht immer ganz vermeiden kann, ist natürlich klar. Aber das heißt nicht, dass man immer und überall, wo man irgendein Designelement hinsetzen will, auch ausschließlich DIVs und Ähnliches nutzen muss.

 

[Daaron]

Tables für Tabellen, Div Container für Design

Wenn das auch nur ansatzweise richtig wäre, dann beantworte mir folgende Fragen:
Wie "designst" du eine Tabelle (also tabellarische Daten)?
Wenn nur <div> für Design zuständig ist, wofür ist dann <section>, <aside>, <nav>, <header>, <footer>, <time>, <figure>,....?

Kleiner Tip: NICHTS vpm alledem hat was mit Design zu tun. Du kannst ein <div> als Inline-Element darstellen, du kannst ein <span> als Block nutzen, du kannst (und wirst, wenn du einen Hauch Ahnung hast) Listen-Elemente nicht nur für Listen-Darstellungen einsetzen,...

Überleg dir mal ganz straff, wofür das M in HTML steht. Daraus erschließt sich auch, wieso <div> kein Allheilmittel ist und wieso <table> nicht grundsätzlich immer falsch ist.

 

[Landvogt4711]

Überleg dir mal ganz straff, wofür das M in HTML steht. Daraus erschließt sich auch, wieso <div> kein Allheilmittel ist und wieso <table> nicht grundsätzlich immer falsch ist.

SEO-Technisch ist ein Div dem Table immer noch überlegen.

 

[carom]

SEO-Technisch ist ein Div dem Table immer noch überlegen.

Wenn es um das Abbilden von tabellarischen Daten geht, dann wage ich das ganz stark zu bezweifeln aus SEO-Sicht, denn semantisch handelt es sich nun mal um eine Tabelle mit Daten. Abgesehen von SEO ist diese Semantik alleine schon aufgrund der Barrierefreiheit wichtig. Deine Aussage gilt vielleicht für tabellarische Layouts, aber darum ging es dem TS ja nicht.

Jedenfalls versteht keine Maschine, dass deine Tabelle eine Tabelle ist, wenn du sie nicht als table definierst. Und Menschen ohne Augenlicht auch nicht. Daaron hat schon ganz recht mit dem M für Markup.

 

[Daaron]

SEO-Technisch ist ein Div dem Table immer noch überlegen.

Auch von mir gibts dafür ein FAAAAAALSCH!

Moderne Suchmaschinen nutzen semantisches Markup, um Inhalte zu strukturieren und zu gewichten. Ein seitenweiter <header> ist wahrscheinlich weniger wichtig als das, was in einem <article> steht. Wenn etwas in einer <table> steht, dann wird es wohl tabellarisch sein. Tabellen können wichtig sein. Preislisten sind z.B. tabellarisch. Auch Kalender machen als Tabelle Sinn. Und denk nur an Kontaktdaten: In der ersten Spalte steht ein Name, in der 2. eine Telefonnummer, in der 3. eine Mailadresse... also wird das dann wohl der komplette Kontakt-Eintrag für diese Person sein. Macht semantisch deutlich mehr Sinn als die <div>-Hölle.

 

[Landvogt4711]

Auch von mir gibts dafür ein FAAAAAALSCH!

Moderne Suchmaschinen nutzen semantisches Markup, um Inhalte zu strukturieren und zu gewichten. Ein seitenweiter <header> ist wahrscheinlich weniger wichtig als das, was in einem <article> steht. Wenn etwas in einer <table> steht, dann wird es wohl tabellarisch sein. Tabellen können wichtig sein. Preislisten sind z.B. tabellarisch. Auch Kalender machen als Tabelle Sinn. Und denk nur an Kontaktdaten: In der ersten Spalte steht ein Name, in der 2. eine Telefonnummer, in der 3. eine Mailadresse... also wird das dann wohl der komplette Kontakt-Eintrag für diese Person sein. Macht semantisch deutlich mehr Sinn als die <div>-Hölle.

SEO-Reports besagen mir da aber was anderes. Ist eine Tabelle auf einer statischen Fläche einer Webseite, wird dies als negativ Indexiert.
Womöglich ein Fehler des Programms, dennoch wurde mir das bei einem SEO-Kurs auch so beigebracht.