PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Tabellen Problem


Corvin
17.07.2004, 12:28:28
Hallo,

ich habe diesen Code:
<table width="500" border="1" bordercolor="#000000" cellpadding="2" cellspacing="0">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>


Die Ausgabe sieht so aus:
http://www.pc-guides.de/t1.jpg

Nun möchte ich es mit HTML realisieren können, dass die Tabelle so aussieht:
http://www.pc-guides.de/t2.jpg
(Diese Tabelle habe ich mit MS Word gemacht)


Kann mir jemand helfen?

xabbuh
17.07.2004, 13:26:13
Wo soll denn zwischen den beiden Tabellen bitte schön ein Unterschied sein?

Corvin
17.07.2004, 13:33:23
Wo soll denn zwischen den beiden Tabellen bitte schön ein Unterschied sein?
Der border von Tabelle 2 ist nur halb so dünn wie der von Tabelle 2.

Jürg
17.07.2004, 13:40:31
Die Frage ist aber für einen "Senior Member" mehr als sehr bescheiden!
Also:
<table class="stand">
<tr>
<td>   </td>
</tr>
<tr>
<td>   </td>
</tr>
<tr>
<td>   </td>
</tr>
<tr>
<td>   </td>
</tr>
<tr>
<td>   </td>
</tr>
<tr>
<td>   </td>
</tr>
</table>Um dem Ganzen docn noch etwas mehr Gehalt zu geben: Verwende nicht mehr "& n bsp;" für Leerschläge, sondern besser nach UTF-8 "& # 160;" (Leerschläge dazwischen zur Darstellung). Diese Formatierung können auch in Zukunft alle Browser lesen und zurück geht es sicher bis NN 4.7.
Dazu sollte im table-Tag auf alles ausser einer Classe verzichtet werden, das Ganze gehört in eine CSS-Datei. Zudem, cellpadding und cellspacing sind nicht W3C validiert!
Das CSS etwa so:table.stand { width:500px; empty-cells:show; border-width:1px; border-color:#000000; margin:0px; padding:2px; }

Jürg
17.07.2004, 13:49:24
Mein Gott,aber das sind ja Bildchen die Du uns zeigst, die Strichdicke könnt ja bei ca. 1,5 Pixel sein und der Browser kann das so nicht richtig anzeigen. Es wäre nett, wenn Du mit Deiner Frage auch die effektive Frage mitgegeben hättest.

Corvin
17.07.2004, 14:03:22
Ich bin noch nicht weiter ...
Es wäre nett, wenn Du mit Deiner Frage auch die effektive Frage mitgegeben hättest.
Meine Frage: Wie kann ich im HTML Code eine Tabelle erstellen, die genauso aussieht, wie in der zweiten Grafik? Ich möchte auch, dass der Rand so dünn ist.

vt1816
17.07.2004, 14:05:33
table.stand { width:500px; empty-cells:show; border-width:1px; border-color:#000000; margin:0px; padding:2px; }


Erfüllt nicht seinen Wunsch, da um jede Zelle ein Rahmen der Stärke 1px gezeichnet wird (zwei Zellen nebeneinander = 2px!) und damit die Strichstärke mehr dem ersten Bild entspricht. CSS ja - aber differenzierter.

Hier auf die Schnelle ohne CSS:


<table width="500" border="1" bordercolor="#000000" cellpadding="2" cellspacing="0">
<tr>
<td colspan="2" style="border-right: #000000 0px solid; border-top: #000000 0px solid; border-left: #000000 0px solid; border-bottom: #000000 1px solid; ">&nbsp;</td>
</tr>
<tr>
<td style="border-right: #000000 1px solid; border-top: #000000 0px solid; border-left: #000000 0px solid; border-bottom: #000000 1px solid; ">&nbsp;</td>
<td style="border-right: #000000 0px solid; border-top: #000000 0px solid; border-left: #000000 0px solid; border-bottom: #000000 1px solid; ">&nbsp;</td>
</tr>
<tr>
<td style="border-right: #000000 1px solid; border-top: #000000 0px solid; border-left: #000000 0px solid; border-bottom: #000000 1px solid; ">&nbsp;</td>
<td style="border-right: #000000 0px solid; border-top: #000000 0px solid; border-left: #000000 0px solid; border-bottom: #000000 1px solid; ">&nbsp;</td>
</tr>
<tr>
<td colspan="2" style="border-right: #000000 0px solid; border-top: #000000 0px solid; border-left: #000000 0px solid; border-bottom: #000000 1px solid; ">&nbsp;</td>
</tr>
<tr>
<td style="border-right: #000000 1px solid; border-top: #000000 0px solid; border-left: #000000 0px solid; border-bottom: #000000 1px solid; ">&nbsp;</td>
<td style="border-right: #000000 0px solid; border-top: #000000 0px solid; border-left: #000000 0px solid; border-bottom: #000000 1px solid; ">&nbsp;</td>
</tr>
<tr>
<td style="border-right: #000000 1px solid; border-top: #000000 0px solid; border-left: #000000 0px solid; border-bottom: #000000 0px solid; ">&nbsp;</td>
<td style="border-right: #000000 0px solid; border-top: #000000 0px solid; border-left: #000000 0px solid; border-bottom: #000000 0px solid; ">&nbsp;</td>
</tr>
</table>



Gruss vt1816

Corvin
17.07.2004, 14:11:06
Hier auf die Schnelle ohne CSS:
Also für mich ist das auch CSS du weist ja über das style-Atribut ja auch Formattierungen aus dem Funktionsumfang von CSS zu ...

Jedenfalls VIELEN DANK für deine Antwort! Das funktioniert wunderbar so!

Ich hatte es vorher so versucht, nur hatte ich da das Problem, dass es zu Darstellungsfehlern kam, wenn man in einer Tabellezelle noch eine Tabelle erstellt hatte:

table {
border-width: 1px 0px 0px 1px;
border-style: solid;
}

table td {
border-width: 0px 1px 1px 0px;
border-style: solid;
}

Corvin
17.07.2004, 14:24:30
Och nö! Es kommt dich wieder zu Darstellungsfehlern, es sieht so aus:
http://www.pc-guides.de/t3.jpg.
Sollte eigentlich so aussehen:
halt nur über all mit dünnem border:
http://www.pc-guides.de/t4.jpg.

vt1816
17.07.2004, 14:30:45
Original geschrieben von Corvin Gröning
[B]Och nö! Es kommt dich wieder zu Darstellungsfehlern, es sieht so aus: ...



Quelltext ???

Corvin
17.07.2004, 14:43:34
<table width="800" border="1" align="center" bordercolor="#FFFFFF" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2" height="60" bordercolor="#666666" bgcolor="#EEE6E6"><div align="center"><a href="include.php?path=main.php"><img src="" height="60" width="468" alt="" border="0"></a></div></td>
</tr>
<tr>
<td colspan="2" valign="top" bordercolor="#666666"><?php include("inc/nav.top.php"); ?></td>
</tr>
<tr>
<td width="170" valign="top" bordercolor="#666666"><?php include("inc/nav.left.php"); ?></td>
<td width="630" valign="top" bordercolor="#666666"><?php include($_GET["path"]); ?></td>
</tr>
<tr>
<td colspan="2" height="30" bordercolor="#666666">&nbsp;</td>
</tr>
</table>

und die CSS Datei:
td {
border-right: #000000 0px solid;
border-top: #000000 0px solid;
border-left: #000000 0px solid;
border-bottom: #000000 1px solid;
}

vt1816
17.07.2004, 15:09:59
Original geschrieben von Corvin Gröning

und die CSS Datei:
td {
border-right: #000000 0px solid;
border-top: #000000 0px solid;
border-left: #000000 0px solid;
border-bottom: #000000 1px solid;
}

Ohne genauere Kenntnis der includierten Daten/Dateien, mit dem Inhalt der CSS-Datei dürften keine senkrechten Linien erscheinen. Daher folgender Vorschlag zu Testzwecken
td {
border-right: #000000 0px solid;
border-top: #000000 0px solid;
border-left: #000000 0px solid;
border-bottom: #000000 0px solid;
}
um dann zu sehen woher die restlichen Linien kommen.

Eine Differenzierung der CSS-Datei wäre auch nicht schlecht, zum Beispiel
td.l {
border-right: #000000 0px solid;
border-top: #000000 0px solid;
border-left: #000000 1px solid;
border-bottom: #000000 0px solid;
}
td.r {
border-right: #000000 1px solid;
border-top: #000000 0px solid;
border-left: #000000 0px solid;
border-bottom: #000000 0px solid;
}
td.rl {
border-right: #000000 1px solid;
border-top: #000000 0px solid;
border-left: #000000 1px solid;
border-bottom: #000000 0px solid;
}
usw.