Salvatore: verschachtelte Zellen

Beitrag lesen

Hallo,

danke für die schnelle Antwort.

Wobei es vermutlich unklug ist, Tabelleninhalte, die keine Links sind, blau darzustellen.

Die Farbe habe ich der Übersichtlichkeit halber beliebt gewählt. Das Bild ist in Paint entstanden :), weil ich die Tabelle in HTML einfach nicht hin bekommen habe.

Ich bin ehrlich gesagt ziemlich durcheinander gekommen, an welcher Stelle nun "colspan" und an welcher "rowspan" stehen sollte. Aber am Ende sah mein Code schon fast so aus, wie der von Dir vorgeschlagene.
Aber wenn ich mir die Zellen jetzt mit "border: solid #000 1px" anzeigen lasse, sieht man, dass diese unterschiedlich groß und "verrückt" sind.

Dau müsste man wissen, was denn in der Tabelle drinsteht. Vielleicht bietet sich ja auch folgendes Markup an: .......

Eher weniger, die tabellarische Form ist schon super.

Ich habe mal wieder etwas gemalt.
Links: ein Screenshot meiner aktuellen Tabelle
Rechts: das gewünschte Ergebnis
Screenshot und Bild vom gewünschten Ergebnis

Mein Markup:
CSS

  
.table_specs {  
	font-family: Arial, Helvetica, sans-serif;  
	border: solid 1px #000000;  
	margin: 5px 3px 5px 25px;  
}  
.table_specs th,td {  
	border: solid 1px #000000;  
	padding: 3px 25px 3px 3px;  
	vertical-align: top;  
}  
.table_specs th {  
	text-align: left;  
	font-weight: 600;  
}  

HTML

  
<table class="table_specs">  
  <tbody>  
    <tr>  
      <th>Bezeichnung</th>  
      <td>QWERTZ-123</td>  
    </tr>  
    <tr>  
      <th>Höhe</th>  
      <td colspan="2">25 mm</td>  
    </tr>  
    <tr>  
      <th rowspan="2">Durchmesser</th>  
      <td>Innen</td>  
      <td>8 mm</td>  
    </tr>  
    <tr>  
      <td>Aussen</td>  
      <td>12 mm</td>  
    </tr>  
    <tr>  
      <th>Menge</th>  
      <td>12 St.</td>  
    </tr>  
  </tbody>  
</table>  

Das CSS Konzept sollte schon so bleiben, lediglich an den Eigenschaften und Werten könnte man noch etwas feilen. Ich arbeite daran, aber ich bekomme die Zellen rechts (mit den Werten) einfach nicht gleich groß.

Die Tabelle wird später mit den richtigen Werten gefüllt. Verschachtelte Zellen, wie für den Durchmesser werden häufiger vorkommen. Das obige Beispiel habe ich kreiert, um nur den für die Tabelle essentiellen Code herauszufiltern und zu experimentieren. Das rechte Bild ist in Paint entstanden, ich habe dafür also noch keinen fertigen HTML Code.

Gruß
Salvatore