Warum sind Tabellen eigentlich "unhandlich"?

Beitrag von **Pheidippides** » 10.02.2010, 20:49

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

von **Anzeige von ABAKUS** »

Hochwertiger Linkaufbau bei ABAKUS:

Google-konformer Linkaufbau
nachhaltiges Ranking
Linkbuilding Angebote zu fairen Preisen
internationale Backlinks

Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

Beitrag von **rg1** » 10.02.2010, 20:56

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.

Beitrag von **fairsand** » 10.02.2010, 21:42

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

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **ishmael** » 11.02.2010, 20:15

800XE hat geschrieben: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 &#123;
      display&#58;table;
&#125;
#navi &#123;
      display&#58;table-row;
&#125;
#navi li &#123;
      display&#58;table-cell;
&#125;

<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.

Beitrag von **ishmael** » 11.02.2010, 20:24

800XE hat geschrieben: 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?

Beitrag von **ishmael** » 11.02.2010, 20:25

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

Beitrag von **Mork vom Ork** » 11.02.2010, 22:11

ishmael hat geschrieben:
800XE hat geschrieben: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.

Beitrag von **mgutt** » 12.02.2010, 11:42

ishmael hat geschrieben: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

Beitrag von **Pfauli** » 23.02.2010, 22:41

Mork vom Ork hat geschrieben:

Pfauli hat geschrieben:
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!