Warum sind Tabellen eigentlich "unhandlich"?

[Pheidippides]

Laß man, der hat einen schlechten Tag....

[rg1]

Hihi, wenn SEOs über HTML philosophieren... Wer auf Netscape-Designs festgelegt ist, dem fehlt offenbar die Phantasie, dass es andere Formen der Darstellung gibt, als ein Raster. Das Element DIV ist kein Tabellenzellenersatz und sollte auch nicht so angewendet werden. In einem flexiblen Design ist alles im Fluss. Aber wer sich das nicht vorstellen kann, bleibt halt bei Tabellen, schadet ja dem Ranking nicht. Bleibt dabei. Ja, bleibt dabei.

[fairsand]

Irgendwie ist es ja auch eine Herrausforderung. Tabellen kann doch jeder.

[ishmael]

was ist display:table?
view-source:https://de.selfhtml.org/css/eigenschaft ... splay2.htm
aha

Code: Alles auswählen

<div class="table">
 <div class="tr">
  <div class="td">ich</div>
  <div class="td">bin</div>
  <div class="td">eine</div>
  <div class="td">Tabelle</div>
 </div>
</div>

Damit wird der HTML-TAG4Table in eine CSSclass bzw ins style "Ausgelagert"

Toll ... find ich voll toll

Die CSSler (bzw DIVler, da es ja keine CSS Designs gibt, es gibt nur DIV und TableDesign und beide können ihre Elemente via CSS umvormen) Prädiger sagen doch immer CSSdesign (bzw NichtTableDesign) macht den Quelltext schlanker

Nochmal: Es geht nicht darum, jedes Tabellenelement durch DIVs zu ersetzen sondern um Semantik im Code.

Im Fall von Mgutts Navi würde die Tabelle also durch eine Liste ersetzt:

Code: Alles auswählen

.table {
      display:table;
}
#navi {
      display:table-row;
}
#navi li {
      display:table-cell;
}

<div class="table">
<ul id="navi">
   <li><a href="">Menüpunkt 1</a></li>
   <li><a href="">Menüpunkt 2</a></li>
</ul>
</div>

Dabei ist das Div lediglich eine Rückversicherung für zufällig auftretende Darstellungsfehler im Mozilla und macht die ganze Sache damit 'bulletproof'.
Mit ein paar Handgriffen ist das auch für IE6 und 7 gefixt. Die 'display:table' eigenschaft ist dabei ja nur dazu da, um die Box auf den Inhaltsbreite schrumpfen zu lassen und sie so dynamisch zentrieren zu können.

Ein weiterer Vorteil der in meinen Augen ganz klar gegen Tabellen spricht ist die Darstellung auf kleinen Bildschirmen wie Smartphones etc. Es gibt nix schlimmeres als beim Lesen horizontal hin und her zu scrollen.
Ohne Tabellen setzt man einfach ein Mobile-stylesheet ein und gut.

[ishmael]

Erkläre mir mal warum Serverseitiges das Scrolling langsamer macht?

DivSeiten haben bei mir manchmal arge Probleme beim Scrolling

Mgutt sprach von subjektiv langsameren Seiten. Also nehme ich mir heraus ebenfalls meine subjektiven Erfahrungen zu posten und wage es, vorläufige Behauptungen aufzustellen. Ich lasse mich aber immer gern eines Besseren belehren!

Aus dem 'langsamer' schloss ich, dass es um die Zeit vom Request bis zur fertig gerenderten Seite ging. Und man brauch wohl nicht zu diskutieren, dass das Rendering im Browser den geringsten Teil dieser Zeit ausmacht, oder?
Egal, ich hab noch nie erlebt, dass eine Seite beim Scrollen Ruckeln würde, außer wenn Flashviedeos drin laufen. Vieleicht kannst du mir mal ein Beispiel geben?

[ishmael]

Schon wieder ein Doppelpost. Entschuldigt bitte, die Buttons Quote und Edit liegen hier anders herum als in anderen Foren. Scheiß Automatismen

[Mork vom Ork]

DivSeiten haben bei mir manchmal arge Probleme beim Scrolling

[…]
ich hab noch nie erlebt, dass eine Seite beim Scrollen Ruckeln würde, außer wenn Flashvideos drin laufen.

Dass ein CSS-Layout im Gegensatz zum Tabellenlayout beim Verschieben ruckelt, liegt meiner Beobachtung nach in der Regel schlicht daran, dass Leute, die CSS-Layout nutzen, auch andere schöne Dinge kennen und einsetzen: Grafiken nämlich, die fest auf den Bildschirm geklebt werden, so dass der Rest des Inhalts beim Verschieben unter ihnen hindurch wandert bzw. über sie weg zieht. Sind dabei halbtransparente Grafiken involviert, ruckelt's, je nach Browser und Systemleistung.
Das hat dann aber nichts mit CSS allgemein und schon gar nichts mit <div>s zu tun.

Davon (und den Flash-Spielereien, vielleicht auch übermäßiger Javascript-Einsatz) abgesehen sind mir auch keine Seiten in Erinnerung, die beim Schieben geruckelt hätten.

mal ein Beispiel geben?

So ist es.

[mgutt]

Schon wieder ein Doppelpost. Entschuldigt bitte, die Buttons Quote und Edit liegen hier anders herum als in anderen Foren. Scheiß Automatismen

Wenn Du als letzter in einem Thema gepostet hast, kannst Du Deinen Beitrag wieder löschen

Das kleine x erscheint dann

[Pfauli]

Nur mal grob zusammengeschustert, nicht in allen Details identisch:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<base href="http&#58;//deine.domain/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title></title>

<style>
body &#123;
	background&#58;url&#40;"index_daten/hg_sm_7-09_1.gif"&#41; #FFFFFF;
	color&#58;#494949;
	font-family&#58;Verdana,sans-serif;
&#125;

body > * &#123;
	max-width&#58;900px;
	margin-left&#58;auto;
	margin-right&#58;auto;
&#125;

a&#91;href&#93; &#123;
	color&#58;#666;
	text-decoration&#58;none;
&#125;
a&#91;href&#93;&#58;visited &#123;
	color&#58;#000;
&#125;

a img &#123;
	border&#58;none;
&#125;

div#inhalt &#123;
	box-shadow&#58; 0 0 15px #888;
	-moz-box-shadow&#58;0 0 15px #888;
&#125;

div#inhalt > * &#123;
	margin&#58;0;
&#125;

h1 &#123;
	clear&#58;both;
	background-image&#58;url&#40;"index_daten/hg3_70ob.png"&#41;;
	padding&#58;0;
	color&#58;#CCC;
	font-family&#58;Calibri,sans-serif;
	font-weight&#58;bold;
	font-size&#58;x-small;
	line-height&#58;20px;
	text-transform&#58;uppercase;
	text-shadow&#58;0 0 0.5em #333;
&#125;

#galerie &#123;
	background-image&#58;url&#40;"index_daten/hg4_tapete.jpg"&#41;;
	text-align&#58;center;
&#125;

#galerie img &#123;
	padding&#58;15px;
&#125;


div#inhaltende &#123;
	background&#58;url&#40;"index_daten/hg3_70un.png"&#41;;
	height&#58;20px;
&#125;

#fusszeile p &#123;
	text-align&#58;right;
	font-size&#58;small;
	margin&#58;0;
&#125;
#fusszeile p&#58;first-child&#123;
	float&#58;left;
&#125;

</style>

</head>

<body>

<div id="kopf">
<!-- Logo und Menü wären hier -->
</div>

<div id="inhalt">

<h1>» Fotografie » Post-Produktion » Visagistik</h1>

<p id="galerie">
<img width="100" height="150" src="pics/digital_pics/IMG_8908_bk3a.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC3399_b2ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC1441_bk1a.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC4432_b2ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC6524_b2ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC7424_b2ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC9219_b1ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC9720_b1ka.jpg">
<img width="100" height="150" src="pics/digital_pics/DSC05778_bk1a.gif">
<img width="100" height="150" src="pics/digital_pics/DSC05997_bk3a.gif">
<img width="100" height="150" src="pics/digital_pics/DSC08565_b2ka.gif">
<img width="100" height="150" src="pics/digital_pics/_DSC4094_b1ka.gif">
<br>
<img width="100" height="67"  src="pics/digital_pics/_DSC1545_b1_ka.gif">
<img width="100" height="67"  src="pics/digital_pics/_DSC1788_b1ka.gif">
<img width="100" height="67"  src="pics/digital_pics/_DSC2075_b3ka.gif">
<img width="100" height="67"  src="pics/digital_pics/_DSC5740_b1ka.gif">
<img width="100" height="67"  src="pics/digital_pics/_DSC8591_b1ka.gif">
<img width="100" height="67"  src="pics/digital_pics/_DSC5549_b1ka.gif">
</p>

<div id="inhaltende">&nbsp;</div>
</div>


<div id="fusszeile">

<p><a href="">Presse</a> | <a href="">Referenzen</a> | <a href="">Impressum</a></p>
<p>© 2010</p>

</div>

</body>
</html>

Bevor ich es vergesse zu sagen: Das finde ich mega klasse, Mork. Da sind so viele Details drin, die ich noch nicht kannte und konnte und auch, wenn ich hierzu bislang nichts gesagt habe, daran arbeite ich seitdem Du es gepostet hast.

Total klasse und richtig, richtig nett, dass Du Dir die Mühe gemacht hast.

Vielen, lieben Dank dafür, das ist für mich Gold wert!