Sind <table>-Tags unprofessionell?

Physically · 2. Oktober 2011

Hey Community,

ich habe jetzt mein Websitedesign in PS CS5 fertig, und auch gesliced. Nun habe ich es als eine .html-Dateie abgespeichert und in Dreamweaver CS4 geöffnet.

Bei der Code-Ansicht sehe ich nun überall die <td> und <tr>-Tags. Jetzt wollte ich mal fragen, ob das unprofessionell ist, wenn man seine Website in ein <table> Tag angepasst hat und nciht in DIV-Tags?

Ich meine, wer geht denn im Netz auf "Rechtsklick --> Quellcode anzeigen"?^^

(Jedenfalls bei den "normalen" Besuchern)

Schroeerg

Yuuri · 2. Oktober 2011

Ja ist es. Es ist einfach schlechter Stil, wo doch CSS heutzutage fast jede Möglichkeit öffnet. Zumal es mit Semantik überhaupt nichts am Hut hat. Eine Tabelle beschreibt tabellarische Daten und kein Design.

chriz0101 · 2. Oktober 2011

Bei den normalen Nutzern sicher nicht viele.

Aber unschön sind Tabellen im Layout alle mal.

Ich bin der Meinung PS CSS5 hat schon die möglichkeit das ganze mit CSS zu exportieren, aber dann hoffentlich ohne absoluten Position (weil das ist genauso mist), wenn das aber auch nicht der Fall ist, dann heisst es das Layout mit div-Tags und CSS selbst zu schreiben

MrStools · 2. Oktober 2011

Ich komme auch immer wieder auf Tabellen als Designmittel zurück, kann natürlich mein Unvermögen sein. Unprofessionell ist es im Grunde schon. Stören wird es allerdings kaum einen "User".

Physically · 2. Oktober 2011

Hey,

danke für die Antworten.

Aber wenn ich so in den Quelltext reinschaue ist es doch ganz schön Arbeit. Und ich weiß halt auch nciht wie ich damit anfangen soll, da ich es sowas noch nie gemacht habe.

Kennt ihr Anleitung zum umändern von table in divs?

Schroeerg

Jojo_44 · 2. Oktober 2011

http://www.youtube.com/watch?v=gAXxJ_BUBww

Vor allem den Teil mit google anschauen

mfg Jojo

feuse8 · 2. Oktober 2011

Sobalds Richtung Barrierefreiheit geht wird ein Table Design aber jeden "User" stören. Würd nach und nach die Tables durch DIVs ersetzen, da Tables wie Yuuri beschreibt, zur Darstellung von Daten verwendet werden.

morritza · 2. Oktober 2011

Also wenn das "design" schon aus PS kommt, sind Tabellen mist. Tabellen benutze ich nur für Listenansichten oder um eine Grundstruktur zu erstellen (wenns sein muss), lieber floating divs.

Versuch lieber die Bilder als Backgroundimages einzubinden und positionier png drüber(wenn es sein muss). Und das slices gedöhns find ich jetzt auch nicht wirklich toll, sieht für mich unprofessionell aus.

Raybeez · 2. Oktober 2011

Tabellen haben einige Nachteile gegenueber divs.

- Sie erhoehen das Datenvolumen (Tabellen brauchen mehr Code als divs mit css-datei. Zudem wird eine Stylesheetdatei nur einmal uebertragen)
- Sie sind nicht barrierefrei (Leute mit bestimmten Behinderungen (z.B. Rot-Gruen-Blinde) lassen sich Webseiten haeufig mit einem eigenen Stylesheet anzeigen (durch das dann bestimmte Farben ersetzt werden) oder ganz ohne Styleformatierungen).
- Der Quellcode laesst sich bei Tabellendesigns kaum noch manuell bearbeiten, da er sehr unuebersichtlich ist. Man braucht fast zwingend ein WYSIWYG-Editor.
...

Edit: Wer bisher mit Tabellen gearbeitet hat und von CSS-Design keine Ahnung hat koennte sich mal das Buch "Little Boxes" anbgucken. In meinen Augen ein sehr gutes Buch um CSS zu lernen (und zudem ist es auch noch kostenlos lesbar)
http://little-boxes.de/little-boxes-teil1-online.html

Physically · 2. Oktober 2011

Ah okay gut jetzt bin ich schlauer. Barrierefreiheit ist schon was wichtiges finde ich. Kennt ihr denn Tutorials wie man einen table-tag in ein div-tag "umwandelt" ohne da alles verrutscht?

fel1x. · 2. Oktober 2011

MrStools schrieb:
Ich komme auch immer wieder auf Tabellen als Designmittel zurück, kann natürlich mein Unvermögen sein.

Lass ich jetzt mal unkommentiert :-P (kleiner Spaß!

)

MrStools schrieb:
Stören wird es allerdings kaum einen "User".

Kaum beschreibt es recht gut - 95% der Seitenbesucher wirds nicht stören, aber was ist mit 5% der Nutzer, z.B. Leute mit Screenreader & co?
Die können mit Tabellen als Layout rein gar nix anfangen.

feuse8 schrieb:
Sobalds Richtung Barrierefreiheit geht wird ein Table Design aber jeden "User" stören.

Korrekt.
Nicht nur Barrierefreiheit, sondern auch SEO (soweit ich das mal gelesen hatte).

Yuuri schrieb:
Ja ist es. Es ist einfach schlechter Stil, wo doch CSS heutzutage fast jede Möglichkeit öffnet. Zumal es mit Semantik überhaupt nichts am Hut hat. Eine Tabelle beschreibt tabellarische Daten und kein Design.

/sign!

e//

morritza schrieb:
Und das slices gedöhns find ich jetzt auch nicht wirklich toll, sieht für mich unprofessionell aus.

Wie zerlegst Du sonst ein Design in Einzelteile für Grafiken o.ä.?

e2// PS: Nicht alle Smartphones mögen Tabellenlayouts

... um mal deine Signatur aufzugreifen

Mr. Snoot · 2. Oktober 2011

Das kann man nicht einfach so 1:1 übersetzen (natürlich könnte man anstelle jeder Tabellenzelle ein Div platzieren, aber das ist nicht Sinn der Sache).

Schau dir die Grundlagen zu CSS basierten Layouts an; danach musst du dir überlegen wie du es für dich einsetzt. Je nach Design kann das weniger oder sehr viel Aufwand sein.

Jojo_44 · 2. Oktober 2011

Man kann aber pauschal nicht sagen das tables schlecht sind. Natürlich sollte man nicht das ganze Layout der Website auf tables aufbauen, aber es gibt Situtationen da muss man tables nehmen, weil mans mit divs nicht umsetzen kann. Google benutzt auch tables, weil sie damit 100% sicher gehen das die Seite in allen Browsern gleich aussieht.

mfg Jojo

Mr. Snoot · 2. Oktober 2011

Naja, Google würd ich jetzt mal nicht als Anschauungsobjekt für Einsteiger empfehlen. Da würden sich so einige Zehennägel hochrollen, wenn ein Anfänger aus einem Grundkurs über HTML & Co. kommt und sieht, was Google so treibt

Physically · 2. Oktober 2011

ja also ich möchte zB das erste bild einfügen das ich geslicet habe, dann benutze ich <div style="background-image: ...."></div> oder sollte ich ein richtiges bild einfügen mit <img...?

chriz0101 · 2. Oktober 2011

Du kannst das schon mit dem background-image machen. Aber ich würde es auslagern. Sprich du hast z.B. deine index.html und deine style.css

Bindest die style.css im head-tag mit
<link type="text/css" href="style.css" rel="stylesheet" />
ein.

In der style.css steht dann sowas wie
.header {
background-image: url("images/header.png");
}
[weitere puntke...]

Wenn etwas mit einem Punkt beginnt ist es in CSS eine Klasse.
In der HTML-Datei machst du dann <div class="header"></div>

Physically · 2. Oktober 2011

ja ist aber dann nur so ca. 10px groß der container...kann ich ja dann die maße manuell eingeben, die der div haben soll odeR?

chriz0101 · 2. Oktober 2011

In der CSS
machst dann sowas wie

.header {
background-image: url("images/header.png");
width: 200px;
height:50px;
}

Yuuri · 2. Oktober 2011

Jojo_44 schrieb:
Google benutzt auch tables, weil sie damit 100% sicher gehen das die Seite in allen Browsern gleich aussieht.

Google nutzt aber keine Tabellen für das Layout, sondern für einzelne Elemente. Für Navigationen nutze ich auch gern Tabellen, aber das wars dann auch schon. Das komplette Andere Layout wird nur in CSS umgesetzt.

Jojo_44 · 2. Oktober 2011

Yuuri schrieb:
Google nutzt aber keine Tabellen für das Layout, sondern für einzelne Elemente. Für Navigationen nutze ich auch gern Tabellen, aber das wars dann auch schon. Das komplette Andere Layout wird nur in CSS umgesetzt.

Jo das stimmt, hab ich auch in dem Satz vor dem zitierten geschrieben. Ich wollte damit nur sagen das man nicht von vorne herein tables vergessen soll, weil wie du selber sagst, machen sie manchmal Sinn.

Edit: Stimmt war schlecht ausgedrückt, ich meinte natürlich nicht das ganze Layout

mfg Jojo

Sind <table>-Tags unprofessionell?

Lt. Commander

Fleet Admiral

Lt. Junior Grade

Lt. Commander

Lt. Commander

Lt. Junior Grade

Lt. Junior Grade

Cadet 2nd Year

Lt. Junior Grade

Lt. Commander

Lt. Commander

Mr. Snoot

Gast

Lt. Junior Grade

Mr. Snoot

Gast

Lt. Commander

Lt. Junior Grade

Lt. Commander

Lt. Junior Grade

Fleet Admiral

Lt. Junior Grade

Ähnliche Themen