tabellen oder div

SteiniKeule · 25.08.2009, 22:47

Hallo

also ich arbeite i.d.R. immer mit div´s. steht jetzt doch vor eine Aufgabe wo ich mir die Frage stelle ob es nicht sinnvoller wär mit tabellen zu artbeiten.

Die ausgabe sieht so aus:

Name | Eigenschaft | Bild
Name | Eigenschaft | Bild
Name | Eigenschaft | Bild
Name | Eigenschaft | Bild

Es wär natürlich mit div´s machbar, jedoch mit tabellen einfacher. Ist das coden mit Tabellen "schlecht" oder macht das einen schlechten Eindruck?
Sind Tabellen allgemein ungut oder sind sie durchaus auch ok wie in meinem fall? möchte nicht dass es billig wirkt

Chriz · 25.08.2009, 22:57

Ist doch eigentlich recht simpel:

Code:

// css
div.name, div.property, div.image { float:left; }
br.clear { clear: both; }
// html
<div class="name">name</div>
<div class="property">property</div>
<div class="image">image</div>
<br class="clear" />
// ..

Alternativ kannst du den CSS-Klassen feste Breiten zuordnen (width:33%, ..).

Bin heute wieder über ein unlösbares Containerproblem gestossen und da es ein Backendsystem ist, gehe ich wieder einen Schritt zurück und benutze Tabellen. Irgendwo kann ichs nicht verstehen, dass Browser noch derart dumm bei Floatingboxen agieren und eine Tabelle macht nunmal meistens genau das, was man von ihr erwartet, auch wenn es semantisch nicht korrekt ist.

Ich würde also sagen, wenn man es mit <div> nicht einigermaßen flott hinkriegt (und man sollte sich schonmal angucken, was alles damit möglich ist, float/clear reicht ja meistens), dann <div>, aber sch*** drauf wenns jetzt ne halbe Stunde kostet das so hinzupflücken, dann wirds halt ne Tabelle.

SteiniKeule · 25.08.2009, 22:59

ok die frage ist nur für was sind tabellen da wenn man sie nicht verwenden sollte

Chriz · 25.08.2009, 23:04

Für tabellarische Auflistungen, sprich Daten (kein Text, eher Werte, Stichwortauflistungen, ..). Sobald du Tabellen benutzt, um normalen Fließtext zu layouten ist es eigentlich nicht korrekt (semantisch). Einfache Listen oder Menüs (1-dimensionale Tabellen sozusagen) kannst du allerdings die Listen <ul>/<ol> benutzen.

SteiniKeule · 25.08.2009, 23:30

also hab jetzt mal deinen ansatz verwendet und da kommt etwas raus, womit ich wirklich nichts anfangen kann.

PHP-Code:

  <?php $wert = 0;
 while($wert != 3)
{
echo '<div class="border">
<div class="name">name</div>
<div class="property">property</div>
<div class="image">image</div></div>
<br class="clear" />';
$wert++;
}
?>

HTML-Code:

div.border{margin-left:150px; float:left; border:solid 2px red; width:430px;}
div.name{ float:left; border:none; width:270px; }
div.property{ float:left; border:none; width: 130px;}
div.image { float:left; border:none; width: 30px}
br.clear { clear: both; }

wie man sieht ist wert 0 somit müssen 3 Zeilen ausgegeben werden. Es sind auch 3 Zeilen. Jedoch ist die erste viel höher als die anderen 2. genauer gesagt ist unter der ersten viel mehr abstand als eigentlich sein sollte.

seitenquelltext sieht so aus:

HTML-Code:

<div class="border">
<div class="name">name</div>
<div class="property">property</div>
<div class="image">image</div></div>
<br class="clear"><div class="border">
<div class="name">name</div>
<div class="property">property</div>

<div class="image">image</div></div>
<br class="clear"><div class="border">
<div class="name">name</div>
<div class="property">property</div>
<div class="image">image</div></div>
<br class="clear">

Chriz · 25.08.2009, 23:40

Code:

<html>
    <head>
        <style type="text/css">
            div.border{margin-left:150px; float:left; border:solid 2px red; width:430px;}
            div.name{ float:left; border:none; width:270px; }
            div.property{ float:left; border:none; width: 130px;}
            div.image { float:left; border:none; width: 30px}
            br.clear { clear: both; }
        </style>
        <title></title>
    </head>
    <body>
        <div class="border">
            <div class="name">name</div>
            <div class="property">property</div>
            <div class="image">image</div>
        </div>

        <br class="clear">
        
        <div class="border">
            <div class="name">name</div>
            <div class="property">property</div>
            <div class="image">image</div>
        </div>
        
        <br class="clear">
        
        <div class="border">
            <div class="name">name</div>
            <div class="property">property</div>
            <div class="image">image</div>
        </div>
        
        <br class="clear">
    </body>
</html>

Also bei mir nicht. Installier dir mal Firebug, der zeigt dir dann woher der Weißraum kommt, wenn du mit dem DOM-Inspektor drüber fährst.

redox · 26.08.2009, 08:11

Ach das ist ja wieder diese ewige Diskussion.

Und als Argument wird immer angeführt, dass die Verschachtelung beim Tabellendesign zu unübersichtlich wird. Dabei ist in einigen Fällen genau das Gegenteil der Fall. Fünf Verschachtelte DIV sind mit Sicherheit schwerer lesbar, als eine Tabelle mit 10 Zellen und meinetwegen 5 Spalten...

Tabellen werden nur von Pseudo-Professionellen verteufelt, genau wie der Einsatz von JS und Cookies (bzgl. Barrierefreiheit usw.)

dennis81 · 26.08.2009, 08:15

Du brauchst kein 'clear' zu machen, wenn du overflow: hidden; verwendest.

PHP-Code:

  <html>
    <head>
        <style type="text/css">
            div.border{margin-left:150px; border:solid 2px red; width:440px; margin-bottom: 0.5em; padding: 0.2em;}
            div.container { overflow: hidden; }
            div.name{ float:left; border:none; width:270px; }
            div.property{ float:left; border:none; width: 130px;}
            div.image { float:left; border:none; width: 30px}
        </style>
        <title></title>
    </head>
    <body>
        <div class="border container">
            <div class="name">name</div>
            <div class="property">property</div>
            <div class="image">image</div>
        </div>
        <div class="border container">
            <div class="name">name</div>
            <div class="property">property</div>
            <div class="image">image</div>
        </div>
        <div class="border container">
            <div class="name">name</div>
            <div class="property">property</div>
            <div class="image">image</div>
        </div>
    </body>
</html>

btw: Das ist kein PHP Problem!

dennis81 · 26.08.2009, 08:20

Zitat:

Zitat von redox

Ach das ist ja wieder diese ewige Diskussion.

Und als Argument wird immer angeführt, dass die Verschachtelung beim Tabellendesign zu unübersichtlich wird. Dabei ist in einigen Fällen genau das Gegenteil der Fall. Fünf Verschachtelte DIV sind mit Sicherheit schwerer lesbar, als eine Tabelle mit 10 Zellen und meinetwegen 5 Spalten...

Tabellen werden nur von Pseudo-Professionellen verteufelt, genau wie der Einsatz von JS und Cookies (bzgl. Barrierefreiheit usw.)

Was für ein Mega Blödsinn!
Tabellen haben beim Layout einfach nichts zu suchen. Barrierefreiheit hin oder her. Wenn man nicht weiß wie es geht, dann ist die Sache mit den <div> natürlich doof.
Ganz davon abgesehen, geht es beim Thema Barrierefreiheit nicht um die Lesbarkeit des Source-Codes. Wer sich mal damit beschäftigt hat, weiß, dass es ein ebenso sensibles, wie auch wichtiges Thema ist. Zumal es z.T. auch gesetzlich vorgeschrieben ist.

redox · 26.08.2009, 09:04

Jaja moment einmal. Ich sage nichts gegen die Barrierefreiheit (die allerdings nur in bestimmten Bereichen gesetzlich vorgeschrieben ist), sondern nur dagegen, dass viele Leute meinen, aus diesen sowie aus mutmaßlich sicherheitsrelevanten Aspekten auf bestimmte Möglichkeiten und Technologien zu verzichten.

Per Definition gebe ich dir Recht, dass Tabellen nicht zum layouten da sind.

Aber soll man nur aus Spezifikationstreue, Eitelkeit und dem Wissen, dass "ich mich 100% an die W3C-Konventionen halte - egal wie sinnvoll sie auch für mein momentanes Projekt sind", eine Lösung ablehnen, die in manchen Fällen einfacher, performanter und besser les- und korrigierbar ist?

Ich denke, es kommt auf den Kontext an - und eine allgemeine Verteufelung von Elementen ist in jedem Fall unangebracht. Wenn selbst modernste Browser das verstehen, was man schreibt, kann es nicht so falsch sein - da es den Zweck erfüllt

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Mehrere MySQL Tabellen mit PHP abfragen	DonMuchacho	Datenbanken	7	27.07.2009 19:47
Tabellen miteinander verknüpfen	Suzi	Datenbanken	12	27.05.2009 11:40
Gebäude Tabellen	Dominik	Datenbanken	26	12.02.2009 22:07
in einer abfrage ermitteln ob mehrere tabellen existieren?	litterauspirna	Datenbanken	7	28.10.2008 19:33
[Erledigt] Limit auf Ergebnissumme mehrerer Tabellen	Frank	Datenbanken	8	02.09.2008 11:33
Tabellen für Vokabeltrainer anlegen...	anonym01	PHP Tipps 2008	9	03.03.2008 21:18
PHP Array in MYSQL Tabellen schreiben	Matt	Datenbanken	1	26.02.2008 19:43
5 tabellen miteinander verknüpfen.	miwo	Datenbanken	2	22.09.2007 11:17
Tabellen Limit?	thefaxx	Datenbanken	2	02.10.2006 17:06
Join-Abfrage über mehrere Tabellen	sinai	Datenbanken	3	04.02.2006 13:05
einträge aus 2 tabellen sortieren	Tschuu	Datenbanken	11	20.12.2005 08:21
[Erledigt] abfrage mehrere tabellen		PHP Tipps 2005-2	3	31.10.2005 21:57
eine spalte von 2 tabellen vergleichen	Sclot	PHP Tipps 2005	2	22.03.2005 19:00
[Erledigt] Selectanfrage an eine Datenbank,aber aus mehreren Tabellen		Datenbanken	2	26.10.2004 07:23
[Erledigt] fulltext suche priorität von tabellen setzen		Datenbanken	1	09.08.2004 15:26

25.08.2009, 22:47
SteiniKeule Erfahrener Benutzer Registriert seit: 09.07.2008 Beiträge: 577 PHP-Kenntnisse: Anfänger	tabellen oder div Hallo also ich arbeite i.d.R. immer mit div´s. steht jetzt doch vor eine Aufgabe wo ich mir die Frage stelle ob es nicht sinnvoller wär mit tabellen zu artbeiten. Die ausgabe sieht so aus: Name \| Eigenschaft \| Bild Name \| Eigenschaft \| Bild Name \| Eigenschaft \| Bild Name \| Eigenschaft \| Bild Es wär natürlich mit div´s machbar, jedoch mit tabellen einfacher. Ist das coden mit Tabellen "schlecht" oder macht das einen schlechten Eindruck? Sind Tabellen allgemein ungut oder sind sie durchaus auch ok wie in meinem fall? möchte nicht dass es billig wirkt


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

25.08.2009, 22:57
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.269	Ist doch eigentlich recht simpel: Code: // css div.name, div.property, div.image { float:left; } br.clear { clear: both; } // html <div class="name">name</div> <div class="property">property</div> <div class="image">image</div> <br class="clear" /> // .. Alternativ kannst du den CSS-Klassen feste Breiten zuordnen (width:33%, ..). Bin heute wieder über ein unlösbares Containerproblem gestossen und da es ein Backendsystem ist, gehe ich wieder einen Schritt zurück und benutze Tabellen. Irgendwo kann ichs nicht verstehen, dass Browser noch derart dumm bei Floatingboxen agieren und eine Tabelle macht nunmal meistens genau das, was man von ihr erwartet, auch wenn es semantisch nicht korrekt ist. Ich würde also sagen, wenn man es mit <div> nicht einigermaßen flott hinkriegt (und man sollte sich schonmal angucken, was alles damit möglich ist, float/clear reicht ja meistens), dann <div>, aber sch*** drauf wenns jetzt ne halbe Stunde kostet das so hinzupflücken, dann wirds halt ne Tabelle. __________________ "Nuschel ich?" - "Was?"

25.08.2009, 22:59
SteiniKeule Erfahrener Benutzer Registriert seit: 09.07.2008 Beiträge: 577 PHP-Kenntnisse: Anfänger	ok die frage ist nur für was sind tabellen da wenn man sie nicht verwenden sollte

25.08.2009, 23:04
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.269	Für tabellarische Auflistungen, sprich Daten (kein Text, eher Werte, Stichwortauflistungen, ..). Sobald du Tabellen benutzt, um normalen Fließtext zu layouten ist es eigentlich nicht korrekt (semantisch). Einfache Listen oder Menüs (1-dimensionale Tabellen sozusagen) kannst du allerdings die Listen <ul>/<ol> benutzen. __________________ "Nuschel ich?" - "Was?"

25.08.2009, 23:30
SteiniKeule Erfahrener Benutzer Registriert seit: 09.07.2008 Beiträge: 577 PHP-Kenntnisse: Anfänger	also hab jetzt mal deinen ansatz verwendet und da kommt etwas raus, womit ich wirklich nichts anfangen kann. PHP-Code: `<?php $wert = 0; while($wert != 3) { echo '<div class="border"> <div class="name">name</div> <div class="property">property</div> <div class="image">image</div></div> <br class="clear" />'; $wert++; } ?>` HTML-Code: div.border{margin-left:150px; float:left; border:solid 2px red; width:430px;} div.name{ float:left; border:none; width:270px; } div.property{ float:left; border:none; width: 130px;} div.image { float:left; border:none; width: 30px} br.clear { clear: both; } wie man sieht ist wert 0 somit müssen 3 Zeilen ausgegeben werden. Es sind auch 3 Zeilen. Jedoch ist die erste viel höher als die anderen 2. genauer gesagt ist unter der ersten viel mehr abstand als eigentlich sein sollte. seitenquelltext sieht so aus: HTML-Code: <div class="border"> <div class="name">name</div> <div class="property">property</div> <div class="image">image</div></div> <br class="clear"><div class="border"> <div class="name">name</div> <div class="property">property</div> <div class="image">image</div></div> <br class="clear"><div class="border"> <div class="name">name</div> <div class="property">property</div> <div class="image">image</div></div> <br class="clear"> Miniaturansicht angehängter Grafiken

26.08.2009, 08:11
redox Erfahrener Benutzer Registriert seit: 25.08.2009 Beiträge: 100 PHP-Kenntnisse: Fortgeschritten	Ach das ist ja wieder diese ewige Diskussion. Und als Argument wird immer angeführt, dass die Verschachtelung beim Tabellendesign zu unübersichtlich wird. Dabei ist in einigen Fällen genau das Gegenteil der Fall. Fünf Verschachtelte DIV sind mit Sicherheit schwerer lesbar, als eine Tabelle mit 10 Zellen und meinetwegen 5 Spalten... Tabellen werden nur von Pseudo-Professionellen verteufelt, genau wie der Einsatz von JS und Cookies (bzgl. Barrierefreiheit usw.)

26.08.2009, 08:15
dennis81 Erfahrener Benutzer Registriert seit: 13.05.2009 Beiträge: 1.166 PHP-Kenntnisse: Fortgeschritten	Du brauchst kein 'clear' zu machen, wenn du overflow: hidden; verwendest. PHP-Code: <html> <head> <style type="text/css"> div.border{margin-left:150px; border:solid 2px red; width:440px; margin-bottom: 0.5em; padding: 0.2em;} div.container { overflow: hidden; } div.name{ float:left; border:none; width:270px; } div.property{ float:left; border:none; width: 130px;} div.image { float:left; border:none; width: 30px} </style> <title></title> </head> <body> <div class="border container"> <div class="name">name</div> <div class="property">property</div> <div class="image">image</div> </div> <div class="border container"> <div class="name">name</div> <div class="property">property</div> <div class="image">image</div> </div> <div class="border container"> <div class="name">name</div> <div class="property">property</div> <div class="image">image</div> </div> </body> </html> btw: Das ist kein PHP Problem!

26.08.2009, 09:04
redox Erfahrener Benutzer Registriert seit: 25.08.2009 Beiträge: 100 PHP-Kenntnisse: Fortgeschritten	Jaja moment einmal. Ich sage nichts gegen die Barrierefreiheit (die allerdings nur in bestimmten Bereichen gesetzlich vorgeschrieben ist), sondern nur dagegen, dass viele Leute meinen, aus diesen sowie aus mutmaßlich sicherheitsrelevanten Aspekten auf bestimmte Möglichkeiten und Technologien zu verzichten. Per Definition gebe ich dir Recht, dass Tabellen nicht zum layouten da sind. Aber soll man nur aus Spezifikationstreue, Eitelkeit und dem Wissen, dass "ich mich 100% an die W3C-Konventionen halte - egal wie sinnvoll sie auch für mein momentanes Projekt sind", eine Lösung ablehnen, die in manchen Fällen einfacher, performanter und besser les- und korrigierbar ist? Ich denke, es kommt auf den Kontext an - und eine allgemeine Verteufelung von Elementen ist in jedem Fall unangebracht. Wenn selbst modernste Browser das verstehen, was man schreibt, kann es nicht so falsch sein - da es den Zweck erfüllt