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

Tabelle oder Div

W

walnuss

Neues Mitglied
Hallo,

ich möchte eine Website für unterschiedliche Kunstgewerke, z. B. Maler, Schmuckdesigner, Restaurator, Bildhauer...... erstellen. Insgesamt werden es 9 Gewerke sein, die in einem 3-Spalten-Layout im mittleren Container in 3 x 3 Rechtecken mitttels Bild, Gewerk und Namen vorgestellt werden sollen. Ich habe bereits erste Erfahrungen in HTML/CSS. Trotzdem bin ich mir unschlüssig, ob ich zur Darstellung der 9 Rechtecke eine Tabelle oder Divs nehmen soll. Was würdet Ihr mir raten?
 
Hallo,

3 x 3 hört sich nach Tabelle an. Du könntest auch 9 Divs nehmen und die innerhalb eines Containers nach links floaten lassen. Der Container müsste halt nur so breit sein, dass nur 3 divs nebeneinander reinpassen, sonst haste auf einmal 4 nebeneinander wenn der viewport zu gross wird oder die mittlere Spalte.

Kommt halt darauf an wie es dir am sympathischsten ist. Semantisch korrekt wäre wohl die Div-Variante, obwohl ich mich hier nicht festlegen will.
 
Danke für die Rückmeldung.

Ich hatte auch die Div-Variante im Auge, bin aber ins Überlegen gekommen, weil im Netz einige Meinungen gelesen habe, die sich über die Divteritis beklagt haben.
 
Wustersoss schrieb:
Kommt halt darauf an wie es dir am sympathischsten ist. Semantisch korrekt wäre wohl die Div-Variante, obwohl ich mich hier nicht festlegen will.
Zum Vergrößern anklicken....

Oder eine Liste.

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>

        <style type="text/css">

            /**
             * new clearfix
             *
             * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
             */
            .clear:after {
                visibility: hidden;
                display: block;
                font-size: 0;
                content: " ";
                clear: both;
                height: 0;
                }
            * html .clear             { zoom: 1; } /* IE6 */
            *:first-child+html .clear { zoom: 1; } /* IE7 */


            * {
                margin: 0;
                padding: 0;
            }

            body {
                padding: 20px;
            }

            ul {
                width: 600px;
                list-style: none;
                border: 3px solid red;
            }

            li {
                float: left;
            }

            li a {
                display: block;
                width: 200px;
                height: 200px;
                color: white;
                text-decoration: none;
            }

            #nav-maler {
                background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Lascaux%2C_horse.JPG/220px-Lascaux%2C_horse.JPG');
            }

            #nav-schmuckdesigner {
                background: url('http://upload.wikimedia.org/wikipedia/commons/7/7b/Keltenschmuck_im_Augsburger_Museum.jpg');
            }

            #nav-restaurator {
                background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Restauratoren_im_Handwerk_Holz.jpg/800px-Restauratoren_im_Handwerk_Holz.jpg');
            }

            #nav-bildhauer {
                background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Bidhauer_0311.png/220px-Bidhauer_0311.png');
            }
        </style>

    </head>

    <body>

        <ul class="clear">
            <li id="nav-maler"><a href="#">Maler</a></li>
            <li id="nav-schmuckdesigner"><a href="#">Schmuckdesigner</a></li>
            <li id="nav-restaurator"><a href="#">Restaurator</a></li>
            <li id="nav-bildhauer"><a href="#">Bildhauer</a></li>
        </ul>

    </body>

</html>

Bei deaktivierten Stylesheets ergibt das dann einfach eine Liste von Links.

Die Tabelle halte ich für falsch, da es sich nicht um tabellarische Daten handelt. Tabelle wäre:

Code: 
+-----------------+----------+-------------+----------+
| Gewerk          | Bild     | Angestellte | Gründung |
+-----------------+----------+-------------+----------+
| Maler           | <Grafik> |           5 |     1921 |
| Schmuckdesigner |     "    |           2 |     2002 |
| Bildhauer       |     "    |           3 |     1982 |
| ...             | ...      |         ... |      ... |
+-----------------+----------+-------------+----------+
 
Zuletzt bearbeitet:
Ich will mermshaus Lösung nicht anfechten. Priorisieren würde ich sie auch.
Der Vollständigkeit halber sei aber erwähnt, dass es im zweifel auch mit jedem anderen Blockelement geht.
z.B. mit <p>
Erwähnen tu ich das nur, um den von Wusstersos angeführten ungewollten Umbruch als Grund für den Tabellenmissbrauch zu wiederlegen. Um einen Umbruch bei kleinerem Viewport zu unterbinden, muss nur, wie bei der Liste auch, ein Wrapper mit fester Breite um die anderen Elemente gelegt wird.
Tabelle halte ich ebenso für falsch!

Beispiel: test

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<style type=text/css>
*{
	margin:0;
	padding:0;
}

.my_clear{
	clear:left;
}

.element{
	float:left;
	width:100px;
	height:100px;
	margin:5px;
	background-color:red;
}

.wrapper{
	width:330px;
	background-color:green;
	margin:0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
	<p class="element">Feld 1</p>
	<p class="element">Feld 2</p>
	<p class="element">Feld 3</p>
	
	<br class="my_clear">
	
	<p class="element">Feld 4</p>
	<p class="element">Feld 5</p>
	<p class="element">Feld 6</p>
	
	<br class="my_clear">
</div>

</body>
</html>

EDIT:
Anmerkung zum Schluss:
Die Frage ob "Tabelle oder Div" ist müßig, da grundsätzlich beides falsch ist.
Ein Div ist immer nur Mittel zum Zweck, wenn keine anderen semantischen Optionen zur Verfügung stehen.
Wie du an den Beispielen von mermshaus und mir siehst, sind einer Div-Suppe aber noch einige Optionen vorzuziehen! ;)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben