Juergens-Workshops.de Forum
Tabellen problem - Druckversion

+- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de)
+-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62)
+--- Forum: Rund um HTML (https://forum.juergens-workshops.de/forumdisplay.php?fid=83)
+--- Thema: Tabellen problem (/showthread.php?tid=29390)

Seiten: 1 2 3 4

Tabellen problem - skifan - 24.10.2009

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ö

Tabellen problem - Beagle - 24.10.2009

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


Grüße, Beagle

Tabellen problem - Unkraut - 25.10.2009

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:

[Bild: 3129415.gif]

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]

Tabellen problem - Helmut - 25.10.2009

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

Tabellen problem - Unkraut - 25.10.2009

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

Tabellen problem - Helmut - 25.10.2009

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

Cu Helmut

Tabellen problem - Unkraut - 25.10.2009

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:

Tabellen problem - skifan - 25.10.2009

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">
<!--
table {border: 2px solid black;
width:500px;
margin-left:auto;
margin-right:auto;
text-align:center;
border-collapse:collapse;
font:10px Verdana, Times New Roman, Arial, sans-serif, monospace;
font-size: 100.01%;
}
thead { color:Sienna;font-size:150%,}
tbody { color:Midnightblue; font-size:120%;}
td {padding:5px;
border: 1px solid Palegoldenrod;
vertical-align:middle;
}
th {padding:5px;
border: 2px solid Chartreuse;
vertical-align:middle;
background: Palegoldenrod;
}
.re {background:Mediumorchid
}
td a:hover{background:Olive
}
td { background: Sandybrown; }
td:hover { background: yellow; }
-->
</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ö

Tabellen problem - Helmut - 25.10.2009

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

Tabellen problem - Helmut - 25.10.2009

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