erste Seite mit Tabellen

ineluki · 01.03.2005, 22:51

Hallo,
ich habe gerade begonnen, mich mit Tabellen als Gestaltungsmittel für Websites zu befassen. Habe bisher keine vernünftige Einführung dazu gefunden und deshalb einfach mal drauf los geschrieben. Ich poste im folgenden mal meinen Quelltext, der wahrscheinlich recht dilettantisch ist. Vielleicht könnt ihr mir ja sagen, was ich falsch gemacht habe und was richtig.

<html>
<head>
<meta http-equiv="Content-Language" content="de">
<title>Tabellen-Test</title>
</head>
<body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" bgproperties="fixed" text="#FFFFFF" bgcolor="white" topmargin="0" leftmargin="0">



<table align=center cellSpacing="0" cellPadding="0" style="border-collapse: collapse" width="970" border="0" height="120">
<tr>
<td width="970" height="120">
<table align=center cellSpacing="0" cellPadding="0" style="border-collapse: collapse" width="970" border="0" height="120" background=banner.gif>
<tr>
<td width="970" height="120" bgcolor="purple">
 
</td>
</tr>

</table>

</td>
</tr>

</table>




<table align=center cellSpacing="0" cellPadding="0" style="border-collapse: collapse" width="970" border="0" height="500">
<tr>
<td vAlign="top">


<table align=left cellSpacing="0" cellPadding="0" style="border-collapse: collapse" width="120" border="0" height="275">

<tr>
<td vAlign="top" height="25" width="120" bgcolor="green">

</td>
</tr>

<tr>
<td vAlign="top" height="75" width="120" bgcolor="red">
<img border="0" src="zwischenbutton.gif" width="120" height="25"><br>
<font face="Verdana" size="1">
<a style="text-decoration: none" target="_top" href="test.htm">erster Button</a><br>
<a style="text-decoration: none" target="_top" href="test.htm">zweiter Button</a><br>
</font>
</td>
</tr>

<tr>
<td vAlign="top" height="175" width="120" bgcolor="blue">
<img border="0" src="zwischenbutton.gif" width="120" height="25"><br>
<font face="Verdana" size="1">
<a style="text-decoration: none" target="_top" href="test.htm">dritter Button</a><br>
<a style="text-decoration: none" target="_top" href="test.htm">vierter Button</a><br>
</font>
</td>
</tr>

</table>


</td>
<td vAlign="top">


<table align=left cellSpacing="0" cellPadding="0" style="border-collapse: collapse" width="730" border="0" height="275">

<tr>
<td height="15" bgcolor="white">
</td>
</tr>

<tr>
<td vAlign="top">


<table align=center cellSpacing="0" cellPadding="0" style="border-collapse: collapse" width="660" border="0" height="60">
<tr>
<td vAlign="top" bgcolor="white">
<table align=center cellSpacing="0" cellPadding="0" style="border-collapse: collapse" width="468" border="0" height="60">
<tr>
<td height="15" background=werbebanner.gif bgcolor="yellow">
</td>
</tr>
</table>
</td>
</tr>

</table>


</td>
</tr>

<tr>
<td height="15" bgcolor="white">
</td>
</tr>

<tr>
<td vAlign="top">


<table align=center cellSpacing="0" cellPadding="0" style="border-collapse: collapse" width="700" border="0" height="575">

<tr>
<td bgcolor="black">
</td>
</tr>

</table>


 
</td>
</tr>

</table>


</td>
<td vAlign="top">


<table align=right cellSpacing="0" cellPadding="0" style="border-collapse: collapse" width="120" border="0" height="275" background=menuback.gif bgcolor="green">
<tr>
<td vAlign="top">
 
</td>
</tr>

</table>


 
</td>
</tr>


</table>

</body>
</html>

Rinaldo · 01.03.2005, 23:17

Dreamweaver auf -> Code per STRG-C + STRG-V eingefügt -> Ergebnis siehe Anhang

.

Am besten wäre es aber trotzdem, Du würdest die Seite auf Deinen Server legen, damit wir sie richtig online betrachten können. Da wären dann auch die Grafiken dabei

.

Boris · 01.03.2005, 23:33

Zitat:

Hallo,
ich habe gerade begonnen, mich mit Tabellen als Gestaltungsmittel für Websites zu befassen.

Sehr gut, dann hör sofort wieder damit auf. Dies wurde vor Jahren (gezwungenermaßen) so gemacht, mittlerweile ist es nicht mehr zu gebrauchen und unnötig.

Wenn Du schon "anfängst", dann fang gleich richtig an

Mehr dazu: http://seybold.jan-andresen.de/index.php

Zu Deinem Code - er ist falsch, missbraucht Tabellen zu Layoutzwecken, ist nicht valide und ein totaler Mischmasch aus alten und neuen HTML/CSS Elementen.

ineluki · 01.03.2005, 23:35

Ok, hier der Link zu der Seite...
Das von Rinaldo angehängte Bild schockt mich jetzt aber bereits. Eigentlich sollte die Seite so aussehen:

Boris · 01.03.2005, 23:41

Auch eine Antwort ...

Rinaldo · 01.03.2005, 23:45

@Boris:

@ineluki: Keine Ahnung, was da passiert ist, der im ersten Post eingefügte Code ist anders als der Deiner Seite

. Hab ich jetzt nicht mehr angesehen, wo es hakt.
Aber bitte beachte, was Boris geschrieben hat. Ich dachte zwar ähnlich, aber wollte Dich vorerst mal auf den (jetzt nicht mehr vorhandenen) Darstellungsfehler hinweisen

.

ineluki · 02.03.2005, 00:06

tschuldigung,... hatte die antwort getippt, während boris das auch tat.
Ok, mag ja sein, dass Tabellen Quatsch sind und ich bin auch gerne bereit, mich mit allem möglichen auseinanderzusetzen, was neuer, besser und überhaupt DER standart ist. Nur leider weiß ich halt nich so ganz, wo ich anfangen soll. Was ich bräuchte, wäre eine Einführung, die mit den Worten beginnt "Ok, du hast dich ein wenig mit html beschäftigt, weißt zwar nicht genau, was eigentlich "valide" bedeutet aber kannst Seiten zusammenbauen, die ihren Zweck erfüllen. Nu sagen dir alle, dass Frames voll veraltet sind, du wolltest auf Tabellen umsteigen, aber die sind noch viel schlimmer, also erklären wir dir jetzt, wie dus jetzt genau angehst, Seiten zu basteln, die von den meisten Browsern korrekt angezeigt werden, die keinen überlüssigen Code enthalten und darüber hinaus auch noch super aussehen..."
Das Bild zeigt, wie ich mir die erdachte Website vom Aufbau her vorstelle und bisher hätt ich da halt jetzt die entsprechenden Frames definiert. Weiß halt grad so garnicht, wie ich überhaupt anfangen soll, das anders zu lösen.

cooper · 02.03.2005, 00:16

Die elegante und W3C konformste (gibt es dieses Wort überhaupt?

) Lösung ist mit DIVs und CSS zu arbeiten.
Boris hat weiter oben einen sehr guten link angegeben, der dir die Materie nahe bringt und auch auf viele weiter führende tutorials verlinkt.

Gruß
Cooper