CSS-BoxSystem contra Tabellendesign

[feyyaz]

Da wir schon in vielen posts, in bezug auf tabellen, gehoert haben was besser sein soll, bin ich der meinung das es Zeit wird, dass mal in einem eigenen thread darueber diskutiert wird

ein zusammenschnitt der pro's

Quelle: cOenesthesia's Homepage

Naja und Tabellendesign....was soll ich da noch grossartig sagen? ueber dieses Thema findest du sicherlich viele Beitraege bei Google.

Quelle: Immobilien-Seite

Du arbeitest mit einem Tabellendesign und ohne Stylesheets, das finde ich ziemlisch schade.

Quelle: Tabellendesign falsche Darstellung im Firefox

wann sehen es alle ein?? tabellen sind kein design mittel!!!
und ausserdem sind sie sehr speicheraufwendig wenn man das mal mit html macht, dann hat man die ganze sache in einem viel kuerzerem code!

Als Pro zaehle ich mal alle die, die es anwenden -> waeren eindeutig zuviele posts zum auflisten ;)

da hatten wir ja noch einen neutralen
Quelle: Tabellendesing falsche Darstellung im Firefox

ich wuerde ganz klar sagen beides ist gut und schlecht zugleich

table:
-- speicheraufwendig
++ sieht immer so aus wie man es sich vorstellt

div:
-- hat noch designtechnische fehler

++ wenig speicherverbrauch

mein statement:

bezueglich der groesse von tabellendesigns:
lol... sag mal schiesst ihr immer mit kannonen auf spatzen?

ein beispiel
1) Das Design

-----------------------------
-   Header                  -
-----------------------------
- menu 1 -  content         -
-        -                  -
-        -                  -
----------                  -
- menu 2 -                  -
-        -                  -
-        -                  -
-----------------------------
-   Fusszeile               -
-----------------------------

Als Anmerkung, viele haben Probleme mit Tabellendesigns, weil sie sie falsch (oder besser zu kompliziert) anwenden. Ich schreibe lieber drei vier Zeilen mehr, verzichte dabei aber komplett auf diese schei... mit colspan und rowspan

2) Der Tabellencode

<table>
 <tr>
  <td> Hier ist der Header </td>
 </tr>
 <tr>
  <td>
   <table>
    <tr>
     <td>
      <table>
       <tr>
        <td>
         <table class="menu">
          <tr>
           <th>Menu 1</th>
          </tr>
          <tr>
           <td>Subnavigation1</td>
          </tr>
          <tr>
           <td>Subnavigation2</td>     
          </tr>
         </table>
         

         <table class="menu">
          <tr>
           <th>Menu 2</th>
          </tr>
          <tr>
           <td>Subnavigation3</td>
          </tr>
          <tr>
           <td>Subnavigation4</td>     
          </tr>
         </table>
        </td>
        <td> Content (wer moechte hier eine neue tabelle fuer das Design</td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td>Hier ist die Fusszeile</td>
 </tr>
</table>

3) Das DIV-Design

<div id="page">
 <div id="header">Hier ist der Header</div>
 <div id="navigation">
  <div class="menu">
   <h1>Menu 1</h1>
   

Subnavigation1</p>
   

Subnavigation2</p>
  </div>
  

  <div class="menu">
   <h1>Menu 2</h1>
   

Subnavigation3</p>
   

Subnavigation4</p>
  </div>
 <div>
 <div id="content">Content (wer moechte weitere DIV's fuer das Design</div>
 <div id="footer">Hier ist die Fusszeile</div>
</div>

in dieser form belegen die dateien folgenden speicher
Tabelle: ca 900 Byte
DIV: ca 450 Byte

wenn ich aber den code auf auf eine zeile packe, dann aendert sich das verhaeltniss zu
Tabelle: 481 byte
DIV: 370 byte

dabei ist zu beachten, das fuer das DIV-Design die groesse des stylsheets ansteigt, wegen positionierung usw.

in diesem beispiel steigt der speicherbedarf nur noch durch inhalte, javascript usw.

ergebniss: 100 Byte unterschied -> *lol* wenn ihr nur ein gut komprimiertes thumbpic auf eurer seite habt, steigert sich die datei groesse um min 1500 byte.

und ihr kommt mir mit laengeren ladezeiten (auf eine 56k Modem betraegt der theoretische unterschied bei 0,9 sec).

kompatibilitaet ist von tabellen zu 100% garantiert von css(box) nicht

meine meinung: tabellen sind vollkommen in ordnung und ich werde sie weiter verwenden. css wird aber mehr und mehr oberhand gewinnen, weil , und das ist der hauptgrund, es einfach um laengen uebersichtlicher ist.

 

[CrackPod]

tabellen sind trotzdem kein designmittel bzw sind nicht dafür gedacht gewesen!!

und wegen der css datei:
Sie wird einmal geladen und dann ab damit in den cache... Ds ist das kein wirkliches pro für die Tabellen

 

[feyyaz]

der cash ist ein argument, aber trotzdem nicht

das mit dem stylesheet war auch nur am rande erwaehnt und ging nicht in die berechnung mit ein.

meine frage: Woher nehmt ihr die informationen, das tabellen nicht auch zum layouten von seiten verwendet werden soll/kann/darf?

hier zwei zitate vom W3C's

das erste was wir ueber tabellen in der definition lesen

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc.

mal meine ungefaehre uebersetzung

Das HTML Tabellen Modell erlaubt es Designern Daten anzuordnen -- Text, vorformatierten Text, Bilderm Links, Formulare, Formfelder, andere Tabellen, usw.

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

mal meine ungefaehre uebersetzung

Tabellen sollten nicht nur pure im sinne des layouten des seiteninhaltes genutzt werden, da dies moeglicherweise zu problemen bei der darstellung auf nicht visuellen medien fuehren kann. Desweiteren kann der Nutzer, wenn grafiken genutzt werden, dazu gezwungen werden horizontal scrollen zu muessen, wenn das layout auf einem groesseren bildschirm designed wurde. Um diese probleme zu minimieren, sollten designer zum layouten auf stylesheets statt auf tabellen zurueckgreifen.

was sollten wir wissen:
1) HTML sowie CSS sind standart's vom W3C
2) Natuerlich wird W3C sagen das ihr CSS zum layouten nehmen solltet
3) die argumente die auf tabellen zutreffen, treffen genauso auf div zu, bezueglich horizontal scrollen.
4) der hinweis auf css liegt auch erst seit der minimalen aenderung der doku von HTML 4.01 bei, da zu HTML 4.0 zeiten noch gar kein CSS gab.

wie ihr sehen koennt wird nirgends gesagt, das tabellen nicht zum layouten genutzt werden sollen, sondern nur halberliche argumente um auf css zu lenken.

also
1) Natuerlich ist mit CSS viel mehr moeglich und wurde allein fuer die darstellung von HTML code konzipiert
2) Das alleine rechtfertigt aber nicht zu sagen das ab 1998 tabellen nie zum layouten gedacht waren, obwohl es die jahre zuvor die einzige moeglichket war.

 

[Prophet]

Wie gesagt grundsätzlich habe ich nichts gegen tabellen benutzte aber lieber divs.

Tabellen: tabellen dienen dazu daten optisch aufzubereiten und für den nutzter leichter ersichtlich zu machen mu was es geht. sprich eine tabellerische auflistung von messergebnissen macht um einiges mehr sinn als mit einer normalen liste oder sonst was.

DIVs: divs hingegen wurden speziel für den bau von seiten layouts konzipiert! sie dienen dazu element zu positionieren und die seite grafisc zu verbessern.

Grundsätzlich: grundsätzlich spricht natürlich nichts gegen tabellen, jedoch sind diese wie gesagt aufwändiger zu schreiben (meist auch schwieriger). divs hingegen kann man leicht dafür nutzten. obige beispiel zeigen dies! ich bin mir sicher alle hier erkennen den aufbau der div-layouts sofort bei der tabelle ist überlegen angesagt!

Speicherverbrauch: Auf die datein an sich betrachtet ist der kontrast minimal da hast du selbstverständlich recht. aber du musst auch sehen das diese paar byte bei server zugriffen auch verarbeitet werden müssen. sprich: auch klein vieh macht mist.

CSS: css ist ganz klar zu verwenden (aus den oben genannten vorteilen). hier kommt jedoch auch das problem kann man kein css so kann man zugleich auch kein div-layout erstellen da dazu wichtige befehle wie float usw. fehlen. dann bleibt einem nichts anderes übrig als tabellen zu nutzten.

Abschluss: wie gesagt ich bleibe auf meinem neutralen standpunkt. mir ist es egal wie man sein layout realisiert. benutzten tue ich jedoch nur noch div als layout-mittel weil:
-> einfacher
-> übersichtlicher
-> kleiner
-> semantik
-> w3c, selfHTML und viele andere seiten emphelen es (beispiel und eine menge gründe gegen tabellen).

 

[feyyaz]

eins habe ich anscheinend noch nicht deutlich genug gesagt:
natuerlich sollten alle die neu anfangen sich mit css beschaeftigen, weil das "the way to go" ist!

mir ging es nur darum vorurteilenden argumente wie: "aber du benutzt tabellendesign, bla" einfuerallemal vorzubeugen.

es ist nicht falsch und auch nicht verboten! andere grosse firmen machen das auch, und die werden mit sicherheit nicht einen ans design gesetzt haben, der gerade anfaengt und noch nie was von css gehoert hat. wie z.B. Microsoft oder SelfHtml.

Und jetzt bitte nicht wieder so einen nutzlosen kommentar wie... bei Microsoft zu erwarten... junge wir alle nutzen (75% der bevölkerung) betriebssystem von microsoft, selbst auf dem apple läuft ein IE.
(das bezieht sich auf einen kommentar aus cOenesthesia post)

dies gilt fuer
@Autoterrorist
@CrackPod
@L.T.M.
ich glaub Rx!y... war auch dabei

wir sind nicht hier um leute zu belehren, sondern ihnen zu helfen. und sind wir auch nicht da anderen unseren eigenen coding style aufzuquatschen.

 

[Anonymous]

Ist ja auch sehr schlau, empfehlen etwas und machen es selbst mit Tabellen, von denen abgeratten wird -> Selfhtml ..

 

[Prophet]

das hast du natürlich recht das ist kein argument um eine seite schlecht zu machen.

 

[flapo]

Zu feyyaz sollte-Post.

Man sollte auch valides HTML schreiben. Man sollte überhaupt in HTML schreiben. Diese sollte-Liste finde ich etwas unsinnig, da Grundsätzlich alles ein "sollen" ist...

Ich bevorzuge CSS-Layouts, da Layout-Änderungen sehr schnell durchzuführen sind. Ich habe noch nie mit Table-Designs gearbeitet, daher kann ich keine Objektive Meinung abgeben.

Nachdem ich den Link von Prophet angesehen habe, muss ich sagen, dass ich nun aber restlos vom CSS-Design überzeugt bin.

 

[feyyaz]

hab mir mal den link von prophet angesehen -> da ist nix was ich nicht schon wusste und was ich nicht schon selbst gesagt habe.

nur finde ich das tabellen gegenueberstellungs beispiel vollkommen grotesk! Sorry, so ist das nicht wirklich ernst zunehmen, wenn wir sachen ins bodenlose ueberziehen 21k markup fuer 9 zeilen *megalol*

 

[Gelöschtes Mitglied 2703]

dein beispiel ist aber auch super. ich moechte mein design nicht wie eine tabelle aufbauen . mit divs kann ich die seite bauen wie ich will - mit tabellen muss ich erstmal 2948 spalten und zeilen machen bis ich irgendwann mal was dort habe wo es hinsoll . ich finde das total unsinnig und unuebersichtlich - guck dir mal dein tabellen design code an. es sind nur wenige abschnitte und du verstehst nur bahnhof wenn du den code liest.
zu microsoft: wie ihr an meiner signatur erkennen koennt bin ich ein microsoft hasser
und ich benutze nicht wie "alle" software von ms oder ueberhaupt software die mit irgendwelchen malizoesen patenten lizenzen usw verseucht ist (schonmal die EULA von windows media player oder die msn messenger AGBS gelesen? ;) )

 

[ingoS]

Und jetzt bitte nicht wieder so einen nutzlosen kommentar wie... bei Microsoft zu erwarten... junge wir alle nutzen (75% der bevölkerung) betriebssystem von microsoft, selbst auf dem apple läuft ein IE.
(das bezieht sich auf einen kommentar aus cOenesthesia post)

Hehe, das mag ich ja, einerseits das Microsoft-Argument (von mir) mit dem Holzhammer entkraeften, aber das pro-Tabellen-Argument "SelfHtml nutzt auch Tabellen" (auch von mir) schoen in die eigene Argumentation einfliessen lassen.
Um es mal klarzustellen: Letztendlich glaube ich, dass dem div-Design die Zukunft gehoert, aber das Anti-Microsoft-Argument habe ich um der leisen Satire willen angefuehrt und sofort wieder entkraeftet.
Leider ist man mit unkommentierter, feinerer (Selbst-)Ironie in diesem Forum fehl am Platze, wie man an dir und auch an einer kleinen, possenspielhaften Unterhaltung mit Prophet innerhalb eines Threads, den zu suchen ich jetzt zu faul bin, welchen ich jedoch noch nachliefern werde, erkennen kann.

 

[feyyaz]

@niklasboelter
nutzt du windows? wenn ja, ende der diskussion

@ingoS
so bin ich halt, aber das naechste mal bekommst deine credits ;)

@all
ich bin kein tabellendesign verfechter und css hasser!
nur haben tabellendesigns einen stellenwert der von vielen unter den teppich gekehrt wird

 

[meise]

Ein gutes hat diese Diskussion hier auf jeden Fall:
Mir persönlich war die css-Version nicht so bekannt aber durch eure Texte wurde das Interesse daran geweckt und der Drang, meine Tabellenversion zumindest Testweise über den Haufen zu schmeissen.
Macht weiter so Jungs

 

[Prophet]

@feyyaz: niklas ist überzeugter linux user (ausschließlich)

was hat mikrosoft in dieser diskussion zu suchen? der ie stellt beide design arten gleichgut an also ist dieser kommentar absolute sinnlos.

das tabellendesign noch viel in gebrauch ist stimmt aber trotzdem sollte man oder der großteil der scripter sich langsam mal gedanken über semantik und meinen link oben machen. es hat wirkliche vorteiel die css-div methode zu nutzen.

 

[ingoS]

Ich wuerde ja recht gerne mal eine Erklaerung von Prophet lesen, was Semantik ist. Mit woanders in dem Zusammenhang verwendeten schoen klingenden Woertern um sich zu werfen ist schoen, sie jedoch zu verstehen ist dann doch ein klitzekleines bisschen besser.

 

[Prophet]

Wikipedia die freie Enzyklopädie zu Semantik:

Die Semantik (Bedeutungslehre) ist das Teilgebiet der Sprachwissenschaft (Linguistik), das sich mit Sinn und Bedeutung von Sprache beziehungsweise sprachlichen Zeichen befasst. Die Semantik kümmert sich um die Frage, wie Sinn und Bedeutung von komplexen Begriffen aus denen von einfachen Begriffen abgeleitet werden können und stützt sich dabei in der Regel auf die Syntax.

http://de.wikipedia.org/wiki/Semantik

Kurz: Damit ist der Sinn / die Bestimmung der Tags gemeint.

 

[lik3.a.star]

Hilfe

HILFE BENÖTIGE HILFE LASST EURE E-MAIL ADRESSEN HIER DANKE SCHÖN LIEST DAS
UNTERE DURCH WAS ICH GESCHRIEBEN HABE NOCHMALS VIELEN DANK AN ALLE​

 

[lik3.a.star]

Hilfe

Also ich bin kein profi wie diese paar personen aber ich benötige hilfe hab ein design von shizoo geholt und hab eine hp bei oyla also ich will dieses design haben

/* CSS Document */
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #636363;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #636363;
text-align: justify;
}
h2 {
color: #eba60d;
font-size: 14px;
}
p {
padding: 10px;}
.dinge {
padding-left: 20px;
}
.profil {
border: 5px solid #fff;
padding: 5px;
background-color: #f9f5f1;
margin: 2px 5px 2px 2px;
float: left;}
a {
text-decoration: none;
color: #e48b2d;
}
a:hover {
font-family: "Courier New", Courier, monospace;
color: #edb373;
text-transform: uppercase;
font-size: 11px;
}
.daisuki {
color: #e6939b;}



Wenn es nicht in Oyla ginge könntet ihr mir paar tipps geben oder eure e-mail adresse drunter lassen? Danke nochmal für alles :cry::cry:​

 

[HittiSan]

@Prophet
Kauf dir mal Umlaute! Kein Geld, oder wieso musst Du Dich hier so seltsam artikulieren?
Wir sind in Teutschland, da gibt es "ä" und "Ö" und so Sachen. Wenn nicht, dann nimm doch "ae" oder "Oe" und schreib nicht so einen Mist.
Danke

@lik3.a.star
Dein Hilfeschrei paßt hier absolut nicht hin, wie ich find.
Mach doch ein neues Thema auf.


@Thema
Also, Tabellen sind eingentlich dafür gedacht, Datensätze wohlgeordnet und mit Hilfe besonderer Spalten-Formatierungen übersichtlich und gut leserlich darzustellen, wobei durch die Formatierung einzelner Zellen natürlich spezielle Akzente quasi als Eye-Catcher gesetzt werden können.

Da die Web-Willis in der Geburtsphase des Zwischennetzes mit vielen Gestaltungsproblemen zu kämpfen hatten, fingen sie an, Tabellen für ihre Layout-Probleme zu mißbrauchen.
Und das hat sich dann so eingebürgert, bis CSS kam...

Das kann man immer noch so machen, klar - aber ein cleverer WebDepp ist doch auf der Höhe der Zeit. Oder nicht?
Ferner spricht der etwas aufgedunsene Kot der HTML-Dateien, in denen Tabellen zu Gestaltungszwecken mißbraucht werden, auch noch gegen den Einsatz von Tabellen. Ferner hat man bei Tabellen Formatierungsprobleme, ich deke mal an einen Header, der rechts am Rand ein Logo hat, die Seiten-Überschrift im Headers soll aber über die ganze Seitenbreite zentriert sein. Wie machst Du das mit einer Tabelle?
Geht nicht. So weit ich weiß.
Mit divs geht das zwar, sieht aber irgendwann auch schlecht aus -wenn man die Seitenbreite so verkürzt, das die Überschrift in den Container, der das Logo aufnimmt, hineinläuft. Doch da kann man mit "min-width" für Abhilfe sorgen.

Das war jetzt nur ein Beispiel, warum Tabellen als Layout-Hilfe eigentlich nicht mißbraucht werden sollten. Sie sind halt zu einem anderen Zweck gemacht. Deswegen können Sie die ihnen zugtragene Aufgabe des Layouts nie ganz erfüllen und bleiben Krücken, mit denen man sich was zurecht kaspert.

Das ist natürlich nur meine Meinung. Ich sprech nicht Ex-Cathreda, wie andere in diesem Forum.

 

[koslowski]

@HittiSan

Das war jetzt nur ein Beispiel, warum Tabellen als Layout-Hilfe eigentlich nicht mißbraucht werden sollten. Sie sind halt zu einem anderen Zweck gemacht. Deswegen können Sie die ihnen zugtragene Aufgabe des Layouts nie ganz erfüllen und bleiben Krücken, mit denen man sich was zurecht kaspert.

Volle Zustimmung!:-)

Noch eine kleine Ergänzung:
Die HTML-Elemente sollten so weit wie möglich semantisch sein, das heißt der Bedeutung des Inhaltes entsprechen, der in ihnen aufbewahrt wird (Zitat: Peter Müller aus seinem Buch "Little Boxes 2").

Tabellen sind also für richtige Tabellen geeignet und für nix anderes.

Das ist natürlich nur meine Meinung. Ich sprech nicht Ex-Cathreda, wie andere in diesem Forum.

Aber eine sehr gut begründete.
Wer versucht dagegenzuhalten, muß sich den Vorwurf der Ignoranz gefallen lassen.