Tabelle-Ausrichtung
B-18Plus
- html
Moinsen allerseits,
ich möchte ein bestimmtes Design für einen Artikel haben und habe mir dafür die folgende Tabellenkostruktion ausgedacht:
Die 1: Header
Die 2: Texte
Die 3: Äusseres Design
Mein Problem ist zunächst einmal dass ich es nicht schaffe dass die verschiedenen Textfelder (2) untereinander erscheinen, iwie wende ich rowspan falsch an...im folgenden mal mein bisheriger Entwurf, ich bitte um die Verbesserung dessselben:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title></title>
<meta name="" content="">
</head>
<body bgcolor="#F4F4F4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table width="610" cellspacing="0">
<tr>
<th><!-- Design_oben_links!--></th>
<th><!-- Design_oben_mitte!-->
<img src="Design_oben_mitte.jpg" width="600" height="5" border="0" alt="">
</th>
<th><!-- Design_oben_rechts!--></th>
</tr>
<tr>
<th rowspan="19"><!-- Design_mitte_links !--></th>
<th><!--Header!-->
<img src="http://img527.imageshack.us/img527/2010/2bundesligavi1.png" width="600">
</th>
<th rowspan="19"><!-- Design_mitte_rechts !--></th>
</tr>
<tr>
<th><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
<th><!-- Spiel_1!--></th>
<th><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
<th><!-- Spiel_2!--></th>
<th><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
<th><!-- Spiel_3!--></th>
<th><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
<th><!-- Spiel_4!--></th>
<th><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
<th><!-- Spiel_5!--></th>
<th><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
<th><!-- Spiel_6!--></th>
<th><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
<th><!-- Spiel_7!--></th>
<th><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
<th><!-- Spiel_8!--></th>
<th><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
<th><!-- Sonstiges!--></th>
</tr>
<tr>
<th><!-- Design_unten_links!--></th>
<th><!-- Design_unten_mitte!-->
<img src="Design_unten_mitte.jpg" width="600" height="5" border="0" alt="">
</th>
<th><!-- Design_unten_rechts!--></th>
</tr>
</table>
</center>
</body>
</html>
------------------
lg benni
Schöne Ostertage euch allen!
Sooo..ich habe mal weiterprobiert und bin nun soweit:
Das Problem ist nun dass ich nicht weiss wie ich die weissen lücken zwischen den verschiedenen Teilen wegbekomme:
http://img149.imageshack.us/img149/5219/vorschauzt9.jpg
Hier noch der entsprechende HTML Text...würde mich freuen wenn mir jmd. helfen könnte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title></title>
<meta name="" content="">
</head>
<body bgcolor="#F4F4F4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table width="610" cellspacing="0" border="0">
<tr>
<th><!-- Design_oben_links!-->
<img src="Design_oben_links.jpg" width="5" height="5" border="0" alt="">
</th>
<th><!-- Design_oben_mitte!-->
<img src="Design_oben_mitte.jpg" width="600" height="5" border="0" alt="">
</th>
<th><!-- Design_oben_rechts!-->
<img src="Design_oben_rechts.jpg" width="5" height="5" border="0" alt="">
</th>
</tr>
<tr>
<th rowspan="19"><!-- Design_mitte_links !-->
<img src="Design_mitte_links.jpg" width="5" height="800" border="0" alt="">
</th>
<th bgcolor="#87DB7D"><!--Header!-->
<img src="http://img527.imageshack.us/img527/2010/2bundesligavi1.png" width="600">
</th>
<th rowspan="19"><!-- Design_mitte_rechts !-->
<img src="Design_mitte_rechts.jpg" width="5" height="800" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_1!-->Spiel1</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_2!-->Spiel2</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_3!-->Spiel3</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_4!-->Spiel4</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_5!-->Spiel5</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_6!-->Spiel6</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_7!-->Spiel7</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_8!-->Spiel8</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Sonstiges!--></th>
</tr>
<tr>
<th><!-- Design_unten_links!-->
<img src="Design_unten_links.jpg" width="5" height="5" border="0" alt="">
</th>
<th><!-- Design_unten_mitte!-->
<img src="Design_unten_mitte.jpg" width="600" height="5" border="0" alt="">
</th>
<th><!-- Design_unten_rechts!-->
<img src="Design_unten_rechts.jpg" width="5" height="5" border="0" alt="">
</th>
</tr>
</table>
</center>
</body>
</html>
-----------------------
lg benni
Sooo..ich habe mal weiterprobiert und bin nun soweit:
mit css hättest du 30% des codes und keine probleme die du jetzt hast ;)
versuch mal deine <img src="Design_unten_rechts.jpg" width="5" height="5" border="0" alt=""> usw als hintergrundbilder einzubinden ...
mit css hättest du 30% des codes und keine probleme die du jetzt hast ;)
versuch mal deine <img src="Design_unten_rechts.jpg" width="5" height="5" border="0" alt=""> usw als hintergrundbilder einzubinden ...
»»
Das Problem ist das cih kein CSS kann ;) ...naja, habs mal so gemacht wie du gesagt hast...oben funktioniert das so aber unten ist immernoch ne Lücke :(
Bild:
http://img522.imageshack.us/img522/539/vorschau3jo9.jpg
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title></title>
<meta name="" content="">
</head>
<body bgcolor="#F4F4F4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table width="610" cellspacing="0" border="0" cellpadding="0">
<TR>
<TD COLSPAN="3" cellspacing="0" border="0" cellpadding="0" background="Design_oben_groß.jpg">
<center><img src="Platzhalter.png" width="5" height="5" border="0" alt=""> </center>
</TD>
</TR>
<tr>
<th rowspan="20" cellspacing="0" border="0" cellpadding="0"><!-- Design_mitte_links !-->
<img src="Design_mitte_links.jpg" width="5" height="800" border="0" alt="">
</th>
<th bgcolor="#87DB7D"><!--Header!-->
<img src="http://img527.imageshack.us/img527/2010/2bundesligavi1.png" width="600">
</th>
<th rowspan="20" cellspacing="0" border="0" cellpadding="0"><!-- Design_mitte_rechts !-->
<img src="Design_mitte_rechts.jpg" width="5" height="800" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_1!-->
Ypiel 1
<!--<img src="msvduisburg_spieltaganalyse.png" width="500" height="50" border="0" alt=""> !-->
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_2!-->Spiel2</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_3!-->Spiel3</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_4!-->Spiel4</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_5!-->Spiel5</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_6!-->Spiel6</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_7!-->Spiel7</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Spiel_8!-->Spiel8</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<th bgcolor="#87DB7D"><!-- Sonstiges!-->Sonstiges</th>
</tr>
<tr>
<th bgcolor="#87DB7D" ><!-- Design_Zwischen-Artikel!-->
<img src="design_zwischen-artike.jpg" width="600" height="30" border="0" alt="">
</th>
</tr>
<tr>
<td COLSPAN="3" cellspacing="0" border="0" cellpadding="0" background="Design_unten_groß.jpg">
<!--<img src="Design_unten.jpg" width="610" height="5" border="0" alt=""> !-->
<center><img src="Platzhalter.png" width="1" height="5" border="0" alt=""> </center>
</td>
</tr>
</table>
</center>
</body>
</html>
Das Problem ist das cih kein CSS kann ;) ...naja, habs mal so gemacht wie du gesagt hast...oben funktioniert das so aber unten ist immernoch ne Lücke
beschränke dich auf das wesentliche
nimm ALLE formatierungen aus der tabelle raus und kümmere dich NICHT ums design, wenn der code dann valide ist, kannst du dich ums css kümmern (ist nicht schwer, also zeit das zu lernen)
<table>
<tr>
<th>kopf</th>
</tr>
<tr>
<td>zeile</td>
</tr>
</table>
mehr brauchst du nicht
alternativ sollest du dir noch listen ansehen, ggf ist eine tabelle also das falsch für dich - alle dinge die nur 1 spalte haben sind per definition keine tabellen - 2 spaltige dinge sind ab und an defintionslisten, 3 spaltige fast immer tabellen
Hallo,
warum nutzt Du auch Tabellen, wo keine angebracht sind?
Konzentriere Dich erst einmal nur auf die HTML-Elemente (Text entspricht <p> etc.), danach kümmerst Du Dich um das Aussehen der Seite mit CSS.
Die Spieltabellen sind ja okay.
Gruß, Ich