Wie kann ich Zeilen innerhalb von Zeilen in der Tabelle anzeigen?

Question

Ich versuche, die Auswirkungen der allgemeinen Überschriften in dieser Tabelle zu geben und dann diese Überschrift in drei Kategorien zu unterteilen. Die Tabelle sollte diese Unterteilungen bis zum Ende fortsetzen. Ich sehe, dass ich wahrscheinlich eine Tabelle innerhalb einer Zeile Einfügen einfügen kann, aber nicht mit Tabellen sättigen. Gibt es eine Möglichkeit, diesen Effekt auf eine einfachere Weise zu erhalten?

Answer 1

können Sie die Colspan verwenden und rowspan Attribute festlegen, wie weit jede Zelle über Zeilen und Spalten geht.

Zum Beispiel:

<table> 
    <tbody> 
    <tr> 
     <td rowspan="2">Top Left Header</td> 
     <td colspan="3">Call Standard</td> 
    </tr> 
    <tr> 
     <td>Flagged</td> 
     <td>Percent</td> 
     <td>Days</td> 
    </tr> 
    </tbody> 
</table> 

Beachten Sie, dass die Tabelle mit vier Spalten endet. Die erste Zeile definiert eine Spalte, die zwei Zeilen kreuzt, und eine Spalte, die drei Spalten kreuzt.

Die zweite Zeile füllt nur die "fehlenden" Spalten aus; das erste ignorieren, weil es zuvor definiert wurde.

Answer 2

Colspan, Rowspan oder Table-Nesting *.

* Table-Nesting ist abscheulich, aber manchmal ist es einfacher zu arbeiten als komplizierte Reihen von Colspans und Rowspans.

Answer 3

Wie wäre es mit der "Colspan" wie durch die HTML standard definiert? Sie würden es auf die Zelle mit dem Namen "call standard" anwenden und definieren, dass sie sich über 3 Zellen erstrecken sollte.

Answer 4

Sie müssen keine weitere innere Tabelle haben ... Sie können die kurze Zeile als vollständige Tabellenzeile haben und Headerzellen haben, die rowspan nicht aufteilen (und dementsprechend colspan oben und verwenden) unter Zellen).

Answer 5

können Sie rowspan und colspan verwenden, um dies zu erreichen:

<table> 
    <tr> 
     <td rowspan="2">Column 1 Heading</td> 
     <td colspan="3">Call Standard</td> 
     <td rowspan="2">Column 3 Heading</td> 
    </tr> 
    <tr> 
     <td>Flagged</td> 
     <td>Percent</td> 
     <td>Days</td> 
    </tr> 
    <tr> 
     <td>Column 1 Value</td> 
     <td>4</td> 
     <td>1%</td> 
     <td>6</td> 
     <td>Column 3 Value</td> 
    </tr> 
</table>