|
|
Mork vom Ork
: 08.07.2008
: 2568
: Aufm Friedhof.
|
| : 08.02.2010, 11:03 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| Pfauli hat Folgendes geschrieben: |
| Würdet ihr dann bei solch eine Seite (bitte nicht code ansehen) - ist (noch) nicht optimiert, die Bilder als Liste setzen? |
Bezüglich der Bilder ist da eigentlich nichts, was selbst im Tabellenlayout eine Tabelle erfordern würde - und im Grunde auch keine Liste. Du hast drei Zeilen à sechs Bilder. Setzt du bei einem dreizeiligen Text aus 18 Wörtern auch jedes Wort in eine Tabellenzelle?
| : |
| bei so etwas lande ich ganz schnell wie Alda schreibt in einer DIVterie, oder nicht? |
Nein. Wenn überhaupt, dann landest du als DIVterie-Geschädigter in einer <div>-Wüste :> Sowas produzieren Leute, die glauben, wenn sie <table><tr><td><table><tr><td>bla</td><td>fasel</td></tr></table></td></tr></table> durch <div><div><div>bla</div><div>fasel</div></div></div> ersetzen, wäre das „modernes Webdesign“, und die dann auch noch ganz stolz darauf verweisen, der Code wäre „valide“, am Besten noch mit einer W3C-Plakette druff. Das ist Bockmist. Diese Leute haben nicht verstanden, wie HTML funktioniert und wie HTML gedacht ist, deren Arbeit ist von standardkonformer, sinngemäßer HTML-Nutzung so weit entfernt wie das 1er-Diktat eines Drittklässlers vom Literatur-Nobelpreis.
Das Problem fängt meines Erachtens auch schon im Vorfeld an, noch vor der technischen Umsetzung in HTML, nämlich damit, dass eine Webseite eben nicht wie ein Blatt Papier mit seinen festen Abmessungen funktioniert. Es hat schließlich nicht die ganze Welt den gleichen Monitor auf dem Tisch stehen, benutzt ihn mit der exakt gleichen Auflösung, einem exakt gleich großen Browserfenster und der exakt gleich großen Browseranzeigefläche. HTML kann mit diesen vielfältigen Ausgabeformaten leicht umgehen, dafür wurde es erdacht - wenn man es denn lässt.
Nur mal grob zusammengeschustert, nicht in allen Details identisch:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://deine.domain/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style>
body {
background:url("index_daten/hg_sm_7-09_1.gif") #FFFFFF;
color:#494949;
font-family:Verdana,sans-serif;
}
body > * {
max-width:900px;
margin-left:auto;
margin-right:auto;
}
a[href] {
color:#666;
text-decoration:none;
}
a[href]:visited {
color:#000;
}
a img {
border:none;
}
div#inhalt {
box-shadow: 0 0 15px #888;
-moz-box-shadow:0 0 15px #888;
}
div#inhalt > * {
margin:0;
}
h1 {
clear:both;
background-image:url("index_daten/hg3_70ob.png");
padding:0;
color:#CCC;
font-family:Calibri,sans-serif;
font-weight:bold;
font-size:x-small;
line-height:20px;
text-transform:uppercase;
text-shadow:0 0 0.5em #333;
}
#galerie {
background-image:url("index_daten/hg4_tapete.jpg");
text-align:center;
}
#galerie img {
padding:15px;
}
div#inhaltende {
background:url("index_daten/hg3_70un.png");
height:20px;
}
#fusszeile p {
text-align:right;
font-size:small;
margin:0;
}
#fusszeile p:first-child{
float:left;
}
</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"> </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> |
Keine einzige Tabelle und auch keine <div>-Wüste (trotz des etwas unschönen div#inhaltende). Funktioniert in aktuellen Browsern, der einzige Abstrich ist der Schatten um den Inhalt, der funktioniert nur bei Browsern, die damit umgehen können.
PS: Das Hintergrundbild enthält anscheinend eine Gamma-Korrektur. Im Firefox hat es einen ungesunden Stich ins Grün-Gelbe, bei Opera ist es farblos:
Mit <meta http-equiv="expires" content="0"> und <meta http-equiv="cache-control" content="no-cache"> tust du, mal abgesehen davon, dass die redundant sind, deinen Besuchern keinen Gefallen. Falls du die Seiten nicht jede Sekunde änderst, warum zwingst du den Besucher, sie bei jedem Aufruf komplett neu übertragen? |
|
| Nach oben |
|
 |
mgutt
: 08.03.2005
: 3135
|
| : 08.02.2010, 13:03 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
Ein table ist nicht überflüssig, weil ein div in allen Browsern folgendes nicht kann:
Nebeneinander zentriert und dabei dynamisch breit sein.
D.h. ein div kann nicht nebeneinander ohne feste width-Angaben platziert werden und sich dazu noch dynamisch auf eine enthaltene Zeichenkette anpassen. Stichwort display:inline-block.
Das mag zwar in modernen Browsern möglich sein und es mag auch mit umfangreichen Crossbrowser-Lösungen zu einem Ergebnis kommen. Allerdings ist der Code, der dafür notwendig ist, wiederrum umfangreicher als ein table mit passenden css-Klassen.
Und wo ich meine, dass die meisten ihren Augen vor verschließen ist die Performance. Man muss einfach nur mal WBB3, vBulletin4 und phpBB3 mit ihren jeweiligen Vorgängern vergleichen. Sehen alle schick aus, keine Frage. Der Quelltext ist auch soweit sauber. Aber die Darstellungszeit und der ausgelöste Prozess auf dem Anwender-PC sind für mich untragbar.
Bei der Entwicklung fängt man dann noch an und schließt Browser aus. Und das in Zeiten, wo mobile Browser selber noch Performance-Krüppel sind.
Ein Beispiel für inline-block ist z.B. dieses Projekt von mir:
http://www.maxrev.de/t041.html
Eine dynamisch anpassbare Navigation. Ohne table bekam ich sie nicht in allen Browsern mittig. Keine Chance. Und selbst jetzt habe ich noch Probleme in alten Browsern, wenn das erste Subelement nicht die volle Breite ausmacht. 
Also unter dem Strich alles gar nicht so einfach. Und wir haben nun mal nur ein Leben und unendlich viele Browser 
» Adsense & Vibrant Alternative
» Ankauf von Communities und Forendomains |
|
| Nach oben |
|
|
ishmael
: 18.04.2009
: 102
|
| : 08.02.2010, 14:53 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| depp ich hat Folgendes geschrieben: |
Bestimmte Dinge gehen überhaupt nur mit Tabellen. Solange man Tabellen mit Bedacht verwendet, gibt es auch keine Probleme. |
Richtig. Tabellarsische Daten als solche Auszeichnen. Das geht und sollte so gemacht werden. Aber genau das sagt auch der Artikel.
Mein Blog |
|
| Nach oben |
|
|
ishmael
: 18.04.2009
: 102
|
| : 08.02.2010, 15:00 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| mgutt hat Folgendes geschrieben: |
Und wo ich meine, dass die meisten ihren Augen vor verschließen ist die Performance. Man muss einfach nur mal WBB3, vBulletin4 und phpBB3 mit ihren jeweiligen Vorgängern vergleichen. Sehen alle schick aus, keine Frage. Der Quelltext ist auch soweit sauber. Aber die Darstellungszeit und der ausgelöste Prozess auf dem Anwender-PC sind für mich untragbar. |
Kannst Du das noch mal präzisieren? Was genau ist nun schneller, die neuen oder die alten Versionen?
| : |
Eine dynamisch anpassbare Navigation. Ohne table bekam ich sie nicht in allen Browsern mittig. |
Was meinst Du mit dynamisch anpassbar?
Mein Blog |
|
| Nach oben |
|
|
mgutt
: 08.03.2005
: 3135
|
| : 08.02.2010, 15:20 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| ishmael hat Folgendes geschrieben: |
| Kannst Du das noch mal präzisieren? Was genau ist nun schneller, die neuen oder die alten Versionen? |
Die alten sind schneller. Sorry, hätte eigentlich gedacht, dass das klar wäre ^^
Wobei das natürlich subjektiv ist. Ein Benchmark habe ich noch nicht gemacht. Aber im Grunde wäre das eigentlich mal eine Idee. Die Seite cachen und als reines HTML/CSS benchmarken.
Vor allen Dingen fällt mir WBB3 immer wieder negativ auf. Ich kenne sogar Nutzer von vBulletin Foren, die im visuellen Modus nur jeden zweiten Buchstaben reinbekommen, weil deren Rechner so stark ruckelt. Allerdings dürfte das eher auf Javascript zu schieben sein.
| : |
| Was meinst Du mit dynamisch anpassbar? |
Dynamisch heißt ohne width. Die Zellen nehmen sich den Platz den sie brauchen und tendieren nicht von alleine zu 100% Bildschirmbreite. Im Grunde das was ich in meinem Navigationsscript realisiert habe. Das kommt auch ohne width aus (ok in manchen Browsern musste man mit 1px fuschen ^^).
Für mich ist dieser Umstand in der Navigation wichtig, weil ich durch die Mehrsprachigkeit sonst keine Alternative sehe (ok, außer man zählt die Buchstaben vorher in PHP oder sowas). Aber dies ist nun mal das Hauptproblem, was man beim inline-block hat.
» Adsense & Vibrant Alternative
» Ankauf von Communities und Forendomains |
|
| Nach oben |
|
|
Pheidippides
: 29.08.2007
: 652
|
| : 08.02.2010, 16:42 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| mgutt hat Folgendes geschrieben: |
Ein table ist nicht überflüssig, weil ein div in allen Browsern folgendes nicht kann:
Nebeneinander zentriert und dabei dynamisch breit sein.
.
.
.
Also unter dem Strich alles gar nicht so einfach. Und wir haben nun mal nur ein Leben und unendlich viele Browser |
GENAU! Ich lege i.A. einen passenden Rahmen mit den benötigten Spalten mittels einer Tabelle fest. Wenn es nicht eine 08/15 Seite werden soll, kann man mit der Methode "Ich bin toll und verwende nur DIVs" unglaublich viel Zeit verplempern.
Keep on Running
Pheidippides |
|
| Nach oben |
|
|
mgutt
: 08.03.2005
: 3135
|
| : 08.02.2010, 17:23 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| Pfauli hat Folgendes geschrieben: |
| nur kriege ich Hintergrundbilder in Tabellenzellen nicht W3C-valide und nun bin ich überfragt, wie ich das in ein zusammenhängendes DIV-Konstrukt kriege. |
Da ich gerade gut drauf bin ^^
Fang gar nicht erst an valide zu arbeiten. Wer sowas macht, hat offensichtlich kein Privatleben oder aber Kunden, die ihm diesen Spaß gerne bezahlen. Wenn ich LOL schreibe, dann ist das auch nicht valides Deutsch. Trotzdem werde ich verstanden. Darauf kommt es an und nichts anderes.
» Adsense & Vibrant Alternative
» Ankauf von Communities und Forendomains |
|
| Nach oben |
|
|
800XE
: 02.12.2004
: 5121
: XENEVU
|
| : 08.02.2010, 21:06 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| mgutt hat Folgendes geschrieben: |
| ishmael hat Folgendes geschrieben: |
| Kannst Du das noch mal präzisieren? Was genau ist nun schneller, die neuen oder die alten Versionen? |
Die alten sind schneller. Sorry, hätte eigentlich gedacht, dass das klar wäre ^^ |
Wenn ich das richtig verstanden habe, dan waren die BBs früher reines Table und nun sind da DIVs reingebaut worden
Ich glaube, bei Table kann man die Seite relativ einfach "runterrendern" ....
da die Y-Linien sich ja nach unten vererben ...
stellt man fest das links oder rechts mehr Platz gebraucht wird, dann sind eben über die ganze höhe die Werte anzupassen
......
Bei Div wird rumgefloatet ....
.... die sind alle eigenständig ....
... eine entdeckte Änderungsnotwendigkeit kann nicht einfach auf "alle" darüberliegenden Objecte übernommen werden, da die ja nicht zwingend dafon betroffen sein müßen
Fazit
Bei DIV-Design muß wahrscheinlich viel öffter "neuGerendert" werden bis die Seite "vertigGerendert" ist
aber nur ... /Affilitiv/ ... innovativ |
|
| Nach oben |
|
|
Mork vom Ork
: 08.07.2008
: 2568
: Aufm Friedhof.
|
| : 08.02.2010, 22:57 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| Pheidippides hat Folgendes geschrieben: |
| Ich lege i.A. einen passenden Rahmen mit den benötigten Spalten mittels einer Tabelle fest. Wenn es nicht eine 08/15 Seite werden soll, kann man mit der Methode "Ich bin toll und verwende nur DIVs" unglaublich viel Zeit verplempern. |
Es ist immer wieder amüsant, wie die Tabellen- und divalide-Fraktionen sich doch in ihren Extremen gleichen ;) Bloß nichts von der anderen Seite akzeptieren, das ist das Böse schlechthin, untauglich, nutzlos, Zeitverschwendung, ibäh.
Wenn du mit CSS-Layout Zeit verplemperst, dann musst du einfach noch ein wenig üben (oder mal was anderes bauen als 08/15-Dreispalten-mit-Titelzeile-Seiten). Wer Auto fahren kann, kann ja auch nicht automatisch genauso gut einen LKW steuern. Daraus kann man aber nicht schließen, dass LKWs nutzlos sind. |
|
| Nach oben |
|
|
ishmael
: 18.04.2009
: 102
|
| : 09.02.2010, 12:53 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| mgutt hat Folgendes geschrieben: |
Die alten sind schneller. Sorry, hätte eigentlich gedacht, dass das klar wäre ^^
Wobei das natürlich subjektiv ist. Ein Benchmark habe ich noch nicht gemacht. Aber im Grunde wäre das eigentlich mal eine Idee. Die Seite cachen und als reines HTML/CSS benchmarken.
|
Genau so wie Du, habe ich keine Fakten zur Hand, behaupte aber mal, dass die Performance hauptsächlich durch Serverskripte, Datenbank-Einstellungen und Hardwareleistung beeinflusst wird. Das Rendering im Browser macht da nur ein Bruchteil von aus. Fakt ist, dass Tabellen erst vollständig geladen angezeigt werden, was für mich klar gegen Tabellen spricht.
| mgutt hat Folgendes geschrieben: |
Dynamisch heißt ohne width. Die Zellen nehmen sich den Platz den sie brauchen und tendieren nicht von alleine zu 100% Bildschirmbreite. Im Grunde das was ich in meinem Navigationsscript realisiert habe. Das kommt auch ohne width aus (ok in manchen Browsern musste man mit 1px fuschen ^^).
|
Gefloatete Blockelemente verhalten sich auch ohne Breitenangabe so und „nehmen sich den Platz“ den sie „brauchen“. Wenn das ganze dann Zentriert sein soll, gibt man dem umschließenden Element auch eine Eigenschaft, die das „shrink-to-fit“-Verhalten auslöst. (Z.B. display:table).
| Pheidippides hat Folgendes geschrieben: |
GENAU! Ich lege i.A. einen passenden Rahmen mit den benötigten Spalten mittels einer Tabelle fest. Wenn es nicht eine 08/15 Seite werden soll, kann man mit der Methode "Ich bin toll und verwende nur DIVs" unglaublich viel Zeit verplempern. |
Tabellenlose CSS-Layouts zu erstellen kann man lernen. Das hat nichts mit der Komplexität der Seite zu tun. Tabellenlayouts sind seit Jahren obsolet und das nicht vorrangig, weil sie nicht „barrierefrei“ waren.
Mein Blog
Zuletzt bearbeitet von ishmael am 09.02.2010, 12:55, insgesamt einmal bearbeitet |
|
| Nach oben |
|
|
ishmael
: 18.04.2009
: 102
|
| : 09.02.2010, 12:54 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
Sorry, Doppelpost. 
Mein Blog |
|
| Nach oben |
|
|
mgutt
: 08.03.2005
: 3135
|
| : 09.02.2010, 16:14 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| ishmael hat Folgendes geschrieben: |
| Gefloatete Blockelemente verhalten sich auch ohne Breitenangabe so und „nehmen sich den Platz“ den sie „brauchen“. Wenn das ganze dann Zentriert sein soll, gibt man dem umschließenden Element auch eine Eigenschaft, die das „shrink-to-fit“-Verhalten auslöst. (Z.B. display:table). |
Ein div mit style="display:table;margin:0 auto" ist nicht shrinkt to fit im IE 5.5 bis 7.
Dazu musst man dann zusätzlich wieder mit display:inline und zoom:1 ein display:inline-block simulieren. Allerdings ist das div dann noch nicht zentriert.
Dazu braucht man dann wieder ein zusätzliches div mit text-align:center.
Kennst Du noch andere shrink-to-fit Funktionen? Für alte Browser kenne ich sonst nur width:1px in Kombination mit einem white-space:nowrap.
» Adsense & Vibrant Alternative
» Ankauf von Communities und Forendomains |
|
| Nach oben |
|
|
fairsand
: 07.02.2005
: 1133
: Niederhofen
|
| : 09.02.2010, 21:40 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
Da fummel ich wochenlang an einer Page ohne Tabellen. Diese funktioniert nun auch mit allen Browsern und Bildschirmeinstellungen.
Und jetzt muss ich so etwas lesen.....
arghhhhhhhhhhhh
Ich gestehe: Habe auch die "Valid" Buttons eingebaut.
Gruß
Peter |
|
| Nach oben |
|
|
Mork vom Ork
: 08.07.2008
: 2568
: Aufm Friedhof.
|
| : 09.02.2010, 22:13 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
| fairsand hat Folgendes geschrieben: |
| Ich gestehe: Habe auch die "Valid" Buttons eingebaut.;-) |
Wirf sie raus und ersetze sie durch „Optimiert für Internet Explorer 6.0 oder größer bei 800x600 Pixeln“ – damit zeigst du dann wenigstens Profil ;) |
|
| Nach oben |
|
|
fairsand
: 07.02.2005
: 1133
: Niederhofen
|
| : 09.02.2010, 22:23 : Warum sind Tabellen eigentlich "unhandlich"? |
|
|
@Mork vom Ork es geht soweit ich testen konnte in allen gängigen Browsern und allen Breiten.
Man braucht halt nur genug Text bei einer zu großen Auflösung.
Sonst verhagelt es meine Container......
http://www.pm-fairsand.de/demo.jpg
Gruß
Peter |
|
| Nach oben |
|
|
