Login

skifan · 24.10.2009, 00:15

Hallo,

wenn du eine ordentliche kompatible Seite erstellen willst, dann beschäftige dich ein wenig, oder besser intensiv, mit modernem Web-Layot. Tabellen dienen eigentlich dem Vergleich von Informationen und nicht dem Erstellen von Web-Layouts. Mit CSS erstellte Sites vereinfachen viele Arbeitsschritte. Mit CSS kann eine Trennung zwischen Seitenlayout und Seiteninhalt wirksam und zweckmäßig umgesetzt werden.
Warum Tabellen als Layoutgrundlage schlecht sind, findest du z.B. hier

Besonders die Barrierefreiheit ist mit Tabellen nicht zu realisieren.

PS:
schau mal in den Quellcode meiner Seite

Gruß HaJö

Beagle · 24.10.2009, 01:13

22 Antworten und eine simple Tabelle steht nicht...Auweia...

Grüße, Beagle

Unkraut · 25.10.2009, 00:19

Beagle schrieb:22 Antworten und eine simple Tabelle steht nicht...Auweia...

Hallo Beagle,
jaaaaa, und warum hast Duuuuu :haue: nicht???

Die Antwort ist relativ einfach: Weil es hunderttausend Tabellen-Layouts gibt, die auch irgendwie in die Umgebung und zum Inhalt passen müssen. Und einfach so in Blaue hinein, ist auch die simpelste Tabelle nicht einfach. Aber ich traue mich mal trotzdem.....
im Firefox sieht sie so aus:

[Bild: 3129414.gif]

Im I.E 8:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

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

<title>Tabelle</title>

<style type="text/css">

table.dat {width: 60%; font:12px Verdana, Arial, helevetica, sans-serif; color:#8A654B;line-height:120%; border: 2px solid #800000; }

.one {background:#F0F0F0;}

.two {background:white;}

.re {text-align:right}

th {font-weight: bold; text-align:center}

</style></head><body><div align="center">

<table class="dat" cellspacing="O" cellpadding="10px" border="2" >

<colgroup><col width="25%">

<col width="25%"> 

<col width="25%">

<col width="25%"></colgroup>

<thead>

    <tr>

       <th colspan="2">Damen</th>

     <th colspan="2">Herren</th>

    </tr>

  </thead>

<tr class="one">

        <td> text</td>

        <td class="re">text</td>

        <td>text</td>

        <td class="re">text</td>

<tr class="two">

        <td> text</td>

        <td class="re">text</td>

        <td>text</td>

        <td class="re">text</td>

<tr class="one">

        <td> text</td>

        <td class="re">text</td>

        <td>text</td>

        <td class="re">text</td>

</table></div></body></html>

Viele Grüße vom Unkraut

[SIZE="1](P. S. hier ist mir wohl mal eine ganz hübsche Tabelle gelungen. Möglichst mit Firefox anschauen, für I. E fehlt noch die neuste hover.htc[/SIZE]

Helmut · 25.10.2009, 00:46

...

Zitat:(P. S. hier ist mir wohl mal eine ganz hübsche Tabelle gelungen. Möglichst mit Firefox anschauen, für I. E fehlt noch die neuste hover.htc

CSS reicht auch

Code:
tr { background: red; }

tr:hover { background: yellow; }

Cu Helmut

Unkraut · 25.10.2009, 12:34

Helmut schrieb:CSS reicht auch

Code:
tr { background: red; } tr:hover { background: yellow; }

Hallo Helmut,

der Haken des Hovers: nicht background, sondern background-image. funktioniert im Fox, nicht aber im I.E.

Liebe Grüße vom Unkraut

Helmut · 25.10.2009, 13:48

...
wieso nimmst Du da ein Bild? Die Reihen/Zellenhintergründe sind doch einfarbig?

Cu Helmut

Unkraut · 25.10.2009, 15:50

Helmut schrieb:...
wieso nimmst Du da ein Bild? Die Reihen/Zellenhintergründe sind doch einfarbig?

Lieber Helmut, das background-imgage ist nicht ganz einfarbig, es hat einen 1px großen Rand.

Helmut: "Unkraut, meinst Du, ein 1px großer Rand, den man kaum oder nicht wahrnimmt, rechtfertigt den ganzen Konstrukt mit dem background-imgage-hover?"

Unkraut: "nein, natürlich nicht!, lieber Helmut."

Helmut: "Warum hast Du es noch nicht geändert??":haue:

Unkraut: "die Faulheit, lieber Helmut, nur die Faulheit hindert mich. MrGreen

Und dagen ist immer noch kein Kraut gewachsen. "

:smiley-blume:

skifan · (Dieser Beitrag wurde zuletzt bearbeitet: 25.10.2009, 20:59 von Helmut.)

Naja,

ich würde die Tabelle trotzdem mit CSS formatieren...und nicht Transitional sondern Strict

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta name="author" content="HaJö">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<title>Tabelle</title>
<style type="text/css">

</style>
</head>
<body>
<div align="center">
<table>
<colgroup><col width="25%">
<col width="25%">
<col width="25%">
<col width="25%">
</colgroup>
<thead>
<tr>
<th colspan="2">Damen</th>
<th colspan="2">Herren</th>
</tr>
</thead>
<tbody>
<tr>
<td> text</td>
<td class="re">text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td> text</td>
<td class="re">text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td> text</td>
<td class="re">text</td>
<td>text</td>
<td >text</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
[/HTML]

Gruß HaJö

Helmut · 25.10.2009, 20:58

Zitat:Unkraut: "die Faulheit, lieber Helmut, nur die Faulheit hindert mich. Und dagen ist immer noch kein Kraut gewachsen. "

...das hat er aber schön gesagt MrGreen

Zitat:Lieber Helmut, das background-imgage ist nicht ganz einfarbig, es hat einen 1px großen Rand.

Es gibt aber ein CSS Kraut das nennt sich border und kann, wie Unkraut auch, verschiedene Eigenschaften annehmen.

Wobei ich sagen muss, in der Tabelle würde ich garnix hovern lassen, solche Effekte suggerieren unerfahrenen Besuchern das da vielleicht was zu klicken ist. Die Hovergeschichten werden ja ansonsten oft bei Links angewendet.

Cu Helmut

Helmut · 25.10.2009, 22:02

...
wegen Hover das mal testen...
[HTML]<style type="text/css">
td {
background-color: #ffcc00;
}

</style>

<script type="text/javascript">
function dogtab(idleft, idmiddle, idright, imgname){
document.getElementById('tab_'+idleft).style.backgroundImage = "url(" + imgname + ")";
document.getElementById('tab_'+idmiddle).style.backgroundImage = "url(" + imgname + ")";
document.getElementById('tab_'+idright).style.backgroundImage = "url(" + imgname + ")";
}

</script>

</head>
<body>

<table cellspacing="2" cellpadding="2" border="0">
<tr onMouseOver="dogtab(1, 2, 3, 'images/hover.png');" onMouseOut="dogtab(1, 2, 3, 'images/transparent.gif')">
<td id="tab_1">asd</td>
<td id="tab_2">bbb</td>
<td id="tab_3">asd</td>
</tr>
<tr onMouseOver="dogtab(4, 5, 6, 'images/hover.png');" onMouseOut="dogtab(4, 5, 6, 'images/transparent.gif')">
<td id="tab_4">zzz</td>
<td id="tab_5">888</td>
<td id="tab_6">uuu</td>
</tr>
</table>[/HTML]

Cu Helmut

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken

Möglicherweise verwandte Themen...
Thema		Verfasser	Antworten	Ansichten	Letzter Beitrag
	Lauftext Problem	greece4	6	2.240	25.10.2009, 21:39 Letzter Beitrag: greece4
	??? Problem bei Newsletter-Gestaltung mit verlinkten Bildern ???	CORELNATOR	1	1.035	27.05.2009, 23:02 Letzter Beitrag: Beagle
	Problem beim Anpassen von Jalbum skin an website!	paula-001	6	3.383	10.11.2008, 22:32 Letzter Beitrag: fotoclown
	> Verstecktes Problem	totefliege	1	855	29.07.2008, 20:02 Letzter Beitrag: prm
	Tabellen anders gestalten	Andreas69	13	2.638	17.04.2008, 15:51 Letzter Beitrag: Andreas69
	Problem mit PHP-Script	benschy	0	703	09.09.2007, 13:15 Letzter Beitrag: benschy
	Firefox-Anzeige-Problem	Ann	6	1.711	16.01.2007, 00:03 Letzter Beitrag: Ann
	Kleines Problem mit Boxen (div)	crazylady	2	1.250	11.12.2006, 20:08 Letzter Beitrag: crazylady
	IE-Problem iframe	red-munich	3	1.012	27.10.2006, 01:04 Letzter Beitrag: red-munich
	layout problem	x30er	12	2.447	21.10.2006, 23:59 Letzter Beitrag: x30er