Probs mit Tabelle (HTML)

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/probs_mit_tabelle_html_82416/page_1 - zur Vollversion wechseln!

valentin schrieb am 15.06.2003 um 23:13

Ich bin gerade dabei mich nach langer Zeit wieder einmal ein bißchen mit HTML herumzuspielen und hab dabei ein typisches N00b Problem.( :bash: ) Und zwar mit der Tabelle. Sorry, aber ich weiß das es ein Problem ist das durch meine Unfähigkeit bedingt ist.

Und zwar zerreisst der IE irgendwie das Layout während Mozilla alles korrekt darstellt.

IE: Mozilla:

Code:

Code:

<body>

 <table width="100%" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<td colspan=2 style='background-image:
		url("images/topthin.gif")'><IMG alt="" border=0 height=70 
      		src="images\logo.gif" width=320></TD>
	</TR>

	<tr>
		<td valign="top" width="160" height="35"><IMG alt="" border=0 height=35 
		src="images\bspacer.gif" width=160></TD>
    
 <td rowspan=9>

	<h1>Computer</h1>

	<h2>Meine Systeme</h2>

	<h3>Main</h3>

	<p>Mainboard: Elitegroup ECS-K7S6A (SiS745) mit Sound onboard<br><br>
	Prozessor: AMD Athlon XP 1600+ AGOIA<br><br>
	Kühler: Wasserkühlung (Zern Delta, Aquacomputer Airplex Evo
240, Eheim 1048...; mehr Info folgt...)<br><br>
	RAM: 768MB DDR-SDRAM (512MB + 256MB)<br><br>
	Grafikkarte: Chaintech GeForce3 Ti200 64MB DDR-SDRAM<br><br>
	Festplatte: Maxtor D540X 60GB (5400 U/min.)<br><br>
	Brenner: Lite-On LTR-48246S (48x/24x/48x CD-R/CD-RW/CD-ROM)<br><br>
	DVD-ROM: Toshiba SD-M1612<br><br>
	Netzwerk: Surecom EP-320X-R1 10/100Mbit<br><br>
	Sonstiges: Teac Floppy, 250W CWT Netzteil
	</p>

	<h3>Mobile</h3>

	<p>Sony Vaio PCG-FX502 (Mobile Duron 1000, 256MB SDRAM, 14.1" TFT)</p>

	<p><a href="index.html">Zurück zu Hauptseite</a></p>


 </TD>

	</TR>

	<tr>
		<td valign="top" width="160" style="height:30px"><a 
href="index.html"><IMG alt="" border=0 height=30 
		src="images\home.gif" width=160></a></TD>
	</TR>

	<tr>
    		<td valign="top" width="160" style="height:7px"><IMG 
alt="" border=0 height=7 
      		src="images\contspacer.gif" width=160></TD>
	</TR>

	<tr>
    		<td valign="top" width="160" style="height:30px"><a 
href="index.html"><IMG alt="" border=0 height=30 
      		src="images\computer.gif" width=160></a></TD>
	</TR>

	<tr>
    		<td valign="top" width="160" style="height:7px"><IMG 
alt="" border=0 height=7 
      		src="images\contspacer.gif" width=160></TD>
	</TR>

	<tr>
    		<td valign="top" width="160" style="height:30px"><a 
href="index.html"><IMG alt="" border=0 height=30 
      		src="images\links.gif" width=160></a></TD>
	</TR>

	<tr>
    		<td valign="top" width="160" style="height:35px"><IMG 
alt="" border=0 height=35 
      		src="images\bspacer.gif" width=160></TD>
	</TR>

	<tr>
    		<td valign="top" width="160" style="height:30px"><a 
href="index.html"><IMG alt="" border=0 height=30 
      		src="images\kontakt.gif" width=160></a></TD>
	</TR>

	<tr>
    		<td valign="top" width="160"><IMG alt="" border=0 height=1 
      		src="images\blank.gif" width=1></TD>
	</TR>


 </TABLE>

</body>

Wo liegt das Problem, was ist zuviel, was zu wenig?

XeroXs schrieb am 15.06.2003 um 23:21

Aus eigener Erfahrung weiß ich, dass es mit verbundenen Zellen immer wieder zu Problemen kommt bei verschiedenen Browsern (funktioniert imma nur teilweise... vor allem die ausrichtung nervt da ziemlich)

deshalb: einfach nicht verbinden, sondern mit 'table im table' arbeiten.... gilt in dem fall vor allem für dein menü.. machst einfach 2 spalten, in einer einen eigenen table NUR mit dem menü, in der anderen der content-Table..

atrox schrieb am 16.06.2003 um 05:02

ja, ist eine typische angewohnheit von IE und NS4, zellen-dimensionen noch großzügiger anzupassen als vorgesehen - gerade bei verbundzellen.
einer der workarounds ist es, unsichtbar oben und ganz links eine reihe bzw spalte mit zellen anzulegen, die die richtigen höhe bzw breite fix eingetragen haben, um kein resizen mehr zu ermöglichen, aber keinen sichtbaren content enthalten.

Rektal schrieb am 16.06.2003 um 07:02

Hi,

ich wuerde das mit weniger HTML und mehr CSS machen. Das macht das ganze uebersichtlicher und weniger Fehleranfaellig.

Du brauchst z.b. nicht fuer jedes IMG eine eigene Zeile in der Tabelle. Du kannst diese, da sie alle die gleiche Breite haben, einfach im Code hintereinanderschreiben. Bilder verhalten sich wie Text und brechen um, d.h. nach jedem Bild wird automatisch in die naechste Zeile gebrochen. Du kannst auch die Blind-spacer eliminieren (weniger bilder laden) und mit CSS machen.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
			/* Kein border um verlinkte images */
			a img {
				border: 0;
			}
			#top {
				background-image: url(images/topthin.gif);
			}
			#left {
				width: 160px;
				vertical-align: top;
			}
			#right {
				vertical-align: top;
			}
			#left img {
				padding-bottom: 7px;
			}
			#left img.first {
				padding-top: 30px;
			}
		</style>
	</html>
	<body>
		<div id="top">
			<img src="" width="320" height="70">
		</div>
		<table cellspacing="0" cellpadding="0" border="0">
			<tr>
				<td id="left">
					<a href=""><img class="first" width="160" height="30" src="images/home.gif" alt="Home"></a>
					<a href=""><img width="160" height="30" src="images/computer.gif" alt="Computer"></a>
					<a href=""><img width="160" height="30" src="images/links.gif" alt="Links"></a>
					<a href=""><img width="160" height="30" src="images/kontakt.gif" alt="Kontakt"></a>
				</td>
				<td id="right">

					<!-- Content -->
					<h1>Computer</h1>

					<h2>Meine Systeme</h2>

					<h3>Main</h3>

					<p>Mainboard: Elitegroup ECS-K7S6A (SiS745) mit Sound onboard<br><br>
					Prozessor: AMD Athlon XP 1600+ AGOIA<br><br>
					Kühler: Wasserkühlung (Zern Delta, Aquacomputer Airplex Evo 240, Eheim 1048...; mehr Info folgt...)<br><br>
					RAM: 768MB DDR-SDRAM (512MB + 256MB)<br><br>
					Grafikkarte: Chaintech GeForce3 Ti200 64MB DDR-SDRAM<br><br>
					Festplatte: Maxtor D540X 60GB (5400 U/min.)<br><br>
					Brenner: Lite-On LTR-48246S (48x/24x/48x CD-R/CD-RW/CD-ROM)<br><br>
					DVD-ROM: Toshiba SD-M1612<br><br>
					Netzwerk: Surecom EP-320X-R1 10/100Mbit<br><br>
					Sonstiges: Teac Floppy, 250W CWT Netzteil
					</p>

					<h3>Mobile</h3>

					<p>Sony Vaio PCG-FX502 (Mobile Duron 1000, 256MB SDRAM, 14.1" TFT)</p>

					<p><a href="index.html">Zurück zu Hauptseite</a></p>
								
				</td>
			</tr>
		</table>
	</body>
</html>

alexsb schrieb am 16.06.2003 um 07:13

ja, vorschlag von rectal ist gut, ganz besonders würd ich auch drauf schaun dass du wenigstens html 4.1 transitional schreibst, also keine tags in blockbuchstaben, keine Unmengen an attribute im <td> ....

Rektal schrieb am 16.06.2003 um 08:27

Noch besser ist natuerlich eine Variante ohne Tabelle. Tabellen sind ja primaer gedacht fuer tabellarische Daten (Excel-style eben) und nicht fuer Layout. Layoutierung ("Presentation") ist primaer die Aufgabe von CSS:

(die Hintergrundfarben sind zur Veranschaulichung der Bereiche)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			a img {
				border: 0;
			}
			#top {
				background: url(images/topthin.gif) red;
				height: 70px;
			}

			#navigation {
				position: absolute;
				top: 70px;
				left: 10px;
				width: 160px;
				background-color: blue;
			}
			#navigation img {
				margin-bottom: 7px;
			}
			#navigation img.first {
				margin-top: 30px;
			}

			#content {
				padding: 1em;
				margin-left: 180px;
				background-color: green;
			}

			h1 {
				margin: 0;
				padding-top: 0.5em;
			}
		</style>
	</html>
	<body>
		<div id="top"><img src="" width="320" height="70" alt="Logo"></div>
		<div id="navigation">
			<a href=""><img class="first" width="160" height="30" src="" alt="Home"></a>
			<a href=""><img width="160" height="30" src="" alt="Computer"></a>
			<a href=""><img width="160" height="30" src="" alt="Links"></a>
			<a href=""><img width="160" height="30" src="" alt="Kontakt"></a>
		</div>
		<div id="content">

			<!-- Content -->
			<h1>Computer</h1>

			<h2>Meine Systeme</h2>

			<h3>Main</h3>

			<p>Mainboard: Elitegroup ECS-K7S6A (SiS745) mit Sound onboard<br><br>
			Prozessor: AMD Athlon XP 1600+ AGOIA<br><br>
			Kühler: Wasserkühlung (Zern Delta, Aquacomputer Airplex Evo 240, Eheim 1048...; mehr Info folgt...)<br><br>
			RAM: 768MB DDR-SDRAM (512MB + 256MB)<br><br>
			Grafikkarte: Chaintech GeForce3 Ti200 64MB DDR-SDRAM<br><br>
			Festplatte: Maxtor D540X 60GB (5400 U/min.)<br><br>
			Brenner: Lite-On LTR-48246S (48x/24x/48x CD-R/CD-RW/CD-ROM)<br><br>
			DVD-ROM: Toshiba SD-M1612<br><br>
			Netzwerk: Surecom EP-320X-R1 10/100Mbit<br><br>
			Sonstiges: Teac Floppy, 250W CWT Netzteil
			</p>

			<h3>Mobile</h3>

			<p>Sony Vaio PCG-FX502 (Mobile Duron 1000, 256MB SDRAM, 14.1" TFT)</p>

			<p><a href="index.html">Zurück zu Hauptseite</a></p>
								
		</div>

	</body>
</html>

Ganz perfekt ist es natuerlich noch immer nicht. Navigationen sollten zwecks Accessability mit Listen gemacht werden. Per CSS kann man die Listen so stylen das sie nicht als solche zu erkennen sind, fuegen dem Dokument aber eine bessere Struktur hinzu.

CSS fuer Liste

Code:

			#navigation ul, #navigation li {
				list-style: none;
				margin: 0;
				padding: 0;
			}

HTML fuer Liste

Code:

		<div id="navigation">
			<ul>
				<li><a href=""><img class="first" width="160" height="30" src="" alt="Home"></a></li>
				<li><a href=""><img width="160" height="30" src="" alt="Computer"></a></li>
				<li><a href=""><img width="160" height="30" src="" alt="Links"></a></li>
				<li><a href=""><img width="160" height="30" src="" alt="Kontakt"></a></li>
			</ul>
		</div>

Aendert nichts am Layout der Seite aber eine bessere, logische Dokumentstruktur.

alexsb schrieb am 16.06.2003 um 08:34

Zitat von Rektal
Noch besser ist natuerlich eine Variante ohne Tabelle. Tabellen sind ja primaer gedacht fuer tabellarische Daten (Excel-style eben) und nicht fuer Layout. Layoutierung ("Presentation") ist primaer die Aufgabe von CSS:

Ich habe ja schon oft gehört das man Tabellen nicht zum layouten nehmen soll, dazu ein paar Fragen:

*) Wie layoute ich sonst komplexere Strukturen (wie z.b. Oc.at)
*) Was ist eigentlich an tabellen schlecht?

erlgrey schrieb am 16.06.2003 um 08:40

oc.at = tables+css

was soll an tabellen schlecht sein?

alexsb schrieb am 16.06.2003 um 08:45

nicht an tabellen ansich sondern an tabellen als Layout instrument.
ich habs bisher immer so gemacht das das grobe layout mit tabellen gemacht wird und die details (genaue positionen, farben usw. ) mit css
das auf oc.at die threads usw tabellen sind ist eh klar, aber die Navigation z.B. ...

kleinerChemiker schrieb am 16.06.2003 um 08:45

schlecht ist nix dran, nur waren sie dafür gedacht
aber die meisten nutzen heute schon tables für layout

MIK

Rektal schrieb am 16.06.2003 um 08:48

Zitat von alexsb
Zitat von Yeahman
Zern Modded NPPS
Svr Raddi

Idle: 34-36°C
Load: 37-40°C

Im Prinzip genau so mittels CSS. OC.AT besteht ja eigentlich nur aus Foren, und da ist es auch nicht falsch Tabellen zu nehmen da das ganze ja tabellarische Daten sind (threads, posts, user, etc). Navigation und restlichen content bereich einfach mit CSS layouten.

Zitat
*) Was ist eigentlich an tabellen schlecht?

Zum einen das rendern von Tabellen fuer Browser. Tabellen zu berechnen sind aufwendiger als Inhalt der mit CSS praesentiert wird. Bei einer Tabelle machts keinen Unterschied, aber wenn du anfaengst wie wild Tabellen zu verschachteln (wie auch hier ein Vorschlag in die Richtung war) das ist das a) mehr Arbeit das Layout fuer die Browser zu dimensionieren und b) wird auch dein Code unuebersichtlicher. Dann waere da noch der Punkt des ungeschraenkten Zugriffes. Menschen mit besonderen Beduerfnissen (aka. "Behinderungen") verwenden nicht unbedingt einen grafischen Browser sondern andere Geraete. Div. Geraete koennen z.B. keine Tabellen richtig darstellen oder sie praesentieren sie dem jeweiligen Benutzer falsch (z.b. Lynx kann bis heut keine Tabellen; anderen consolen browser schon. Trotzdem hat sich lynx etabliert).

Der Vorteil von CSS ist auch, das du nicht unbedingt den Inhalt des Dolumentes so anlegen musst, wie du ihn in einem grafischen Browser praesentieren willst. Z.B. kannst du ohne weiteren den DIV "navigation" nach ganz unten ruecken. Oder ganz oben. Bei einer Tabelle hast du die Flexibilitaet nicht. Du kannst nicht einfach die Navigationslinks "wegschieben".

Wenn du meine Code Beispiele nimmst, dann das CSS in ein externes Stylesheet auslagers wird schon alleine zum Bearbeiten die Seite um ein zigfaches Uebersichtlicher und du kannst dich viel mehr auf die Struktur konzentrieren. HTML ist eine "Mark up"-Language; sie gibt dem Dokument nur die Struktur. CSS ist fuer die Praesentation zustaendig.

Wenn du CSS auslagerst in eine externe Datei (macht man ja meistens) dann werden die Seiten um einiges schlanker. Du kannst den Webserver so konfigurieren das die CSS dokumente gecachet werden. Die aendern sich nicht; nur der Inhalt des "Mark up" -> schnellere Ladezeiten.

CSS ist nicht die Loesung fuer alle Probleme. Aber bei diesem Beispiel kann man sie einfach wegeliminieren (die Tabellen).

Rektal schrieb am 16.06.2003 um 08:52

Zitat von kleinerChemiker
schlecht ist nix dran, nur waren sie dafür gedacht
aber die meisten nutzen heute schon tables für layout

MIK

Das kommt vom Netscape4. Der konnte es damals nicht besser. Da hat natuerlich jeder mit Tables fuer Layout gearbeitet. Dadurch wurden alle Tutorials mit Tabellen fuer Layout geschrieben und somit bekommen die, die NS4 noch nicht direkt erlebt haben, diese altlasten Information weitergereicht.

Das die 5er Browsergeneration CSS schon so weit unterstuetzt das man auf Tabellen fuer Layout verzichten kann, ist den wenigsten klar.

IMHO geht unter den Professionellen Designern der Trend zu CSS Layouts ueber (Prominentes Beispiel: http://www.wired.com ). Googlen nach "CSS layout" bringt einige Fruechte an den Tag.

alexsb schrieb am 16.06.2003 um 09:57

ok, ich verwende jetzt konkret eine Seite (index.php)
mach da eine Tabelle mit vier Zellen und includiere in die jeweiligen td's nur andere Dateien.
Damit ist alles was ich in den anderen Dateien mach schon mal fix einigeramssen richtig positioniert.
Sollte ich das anders machen?

Rektal schrieb am 16.06.2003 um 10:20

Zitat von alexsb
ok, ich verwende jetzt konkret eine Seite (index.php)
mach da eine Tabelle mit vier Zellen und includiere in die jeweiligen td's nur andere Dateien.
Damit ist alles was ich in den anderen Dateien mach schon mal fix einigeramssen richtig positioniert.
Sollte ich das anders machen?

Da gibts keine schwarz/weiss Antwort wie ja/nein.

Wenn du die Dinge nutzen moechtest wie sie urspruenglich gedacht waren, oder wenns dich einfach interessiert, oder wenn es eine Anforderung deiner Arbeit ist (z.B. Seiten WAI-Konform zu erstellen), dann vielleicht.

Nehmen wir OC.at. Indexseite (main.php) hat nach kurzem Ueberfleigen 24 tables bei mir; teilweise verschachtelt. Wenn da jetzt 24 mal Daten darzustellen waeren, die tabellarisch sind, wuerd ich sagen "Ok, paszt".
Da ich mit einem groben Blick aber nur 5 Bereiche sehe wo wirklich Daten tabellarisch Praesentiert werden, wuerd ich sagen da "koennte" man wegoptimieren (praktisch wahrscheinlich net wegen der Ineinandergreifenden Software usw.) und mehr in reinen Mark-Up/CSS zerlegen. Forensoftware sind aber meist so komplex das das zerlegen (nachtraeglich) nicht lustig ist. OC.AT wuerd ich nicht auf Teufel komm raus umkrempeln. Vor allem nicht im hachinein.

Anderes Beispiel: http://www.eltern-bildung.at/ . Ok, sicher nicht was der durchschnittliche OC.AT user ansurft

Ich wette aber fuer die meisten ists auf den ersten Blick ein klarer Fall fuer Tables. Tatsache ist das fuers Layout mit zwei Ausnahmen kein Table verwendet wird. Eine Ausnahme sind die Formulare, die andere das dortige Forum.

alexsb schrieb am 16.06.2003 um 10:32

ok, meine Seite ist einem Forum sehr ähnlich, sie beinhaltet auch eines, aber hauptsächlich stellt sie interaktiv Listen von Filmen zur Verfügung. Villeicht überleg ichs mir noc und werd ein wenig umbaun, ich hab bisher eh nur das rechenwerk, ohen eine einzige Farbe oder ein einziges Bild