verschachtelte Zellen

[salvatore]

Hallo allerseits!

Ich würde gerne wissen, wie ich folgendes Layout erreiche.

Speziell geht es um den rot umrandeten Bereich im Bild.
Dieser muss nicht zwingendermassen in Form einer Tabelle erreicht werden.
Ziel ist es, daß zwischen "Wert" und "Zusatz" jeweils einen gleich großer Abstand ist.
Nur viel mir als einzige Methode ein Zellenverbund mittels "colspan" und "rowspan" ein, aber ich bekomme es damit einfach nicht hin.

Könnte mir jemand weiterhelfen?

Wenn es eine bessere Lösung gibt, würde ich die auch gerne wissen.

Gruß
Salvatore

[Gunnar Bittersmann]

@@salvatore:

nuqneH

Nur viel mir als einzige Methode ein Zellenverbund mittels "colspan" und "rowspan" ein, aber ich bekomme es damit einfach nicht hin.

Warum nicht?

Markup:

<table>  
	<tbody>  
		<tr>  
			<th>Text</th>  
			<td colspan="2">Wert</td>  
		</tr>  
		<tr>  
			<th rowspan="2">Text</th>  
			<td>Wert</td>  
			<td>Zusatz</td>  
		</tr>  
		<tr>  
			<td>Wert</td>  
			<td>Zusatz</td>  
		</tr>  
	</tbody>  
</table>

Stylesheet:

th, td  
{  
	text-align: left;  
	vertical-align: top;  
	border: 1px solid black;  
	color: blue;  
	padding: 0.2em;  
	font-weight: normal;  
}

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

Wenn es eine bessere Lösung gibt, würde ich die auch gerne wissen.

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

<dl>  
	<dt>Text</dt>  
	<dd>Wert</dd>  
	<dt>Text</dt>  
	<dd>  
		<dl>  
			<dt>Wert</dt>  
			<dd>Zusatz</dd>  
			<dt>Wert</dt>  
			<dd>Zusatz</dd>  
		</dl>  
	</dd>  
</dl>

Qapla'

[Salvatore]

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

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

[Gunnar Bittersmann]

@@Salvatore:

nuqneH

Es ist also ein Unterschied zwischen den 'td' bei „Bezeichnung“ und „Menge“ einerseits und „Höhe“ andererseits.

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

Findest du ihn?

Qapla'

[salvatore]

Es ist also ein Unterschied zwischen den 'td' bei „Bezeichnung“ und „Menge“ einerseits und „Höhe“ andererseits.
Findest du ihn?

Qapla'

Ich sehe keinen. Ausser, daß "Höhe" gefolgt wird von:
<td colspan="2">

Ich bin ja der Meinung, wer Probleme mit Row- und Colspan-Angaben bekommt, hat entweder zuviele oder zuwenige Tabellen.

Gar keine, ich meide sie.

Für mich sieht das nach einem Anwendungsfall für verschachtelte Tabellen aus (Alternativ die innere Ebene mit Definitionslisten aufbauen).

Hab ich auch gedacht, aber wollte den Code knapp wie möglich haltenund dachte, es lässt sich auch mittels Zellenverbund lösen.

Wenn ich wüsste, wie das zu lösen ist, hätte ich nicht gefragt.
Ich habe mir die Anleitungen zum verbinden von Zellen bei SelfHTML angesehen, aber ich konnte die Beispiele nicht auf meine Tabelle anwenden. Tut mir leid.

[Gunnar Bittersmann]

@@salvatore:

nuqneH

Es ist also ein Unterschied zwischen den 'td' bei „Bezeichnung“ und „Menge“ einerseits und „Höhe“ andererseits.
Findest du ihn?

Qapla'

Ich sehe keinen. Ausser, daß "Höhe" gefolgt wird von:
<td colspan="2">

Und bei „Bezeichnung“ und „Menge“ nicht. Siehste, du hast den Unterschied gefunden.

Qapla'

[salvatore]

Wahnsinn!

Dann habe ich wohl nicht genau gelesen oder was falsch verstanden. Ich dachte, "colspan" und "rowspan" braucht man bloß ein Mal pro Tabelle.

Danke schön. Jetzt kann ich mein CSS noch weiter anpassen.

[Harlequin]

Yerf!

Ich will hier auch mal meine Meinung zu dem thema loswerden...

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.

Ich bin ja der Meinung, wer Probleme mit Row- und Colspan-Angaben bekommt, hat entweder zuviele oder zuwenige Tabellen.

Die Tabelle wird später mit den richtigen Werten gefüllt. Verschachtelte Zellen, wie für den Durchmesser werden häufiger vorkommen.

Für mich sieht das nach einem Anwendungsfall für verschachtelte Tabellen aus (Alternativ die innere Ebene mit Definitionslisten aufbauen).

Gruß,

Harlequin