Einstellen rowspan auf colgroup?
https://stackoverflow.com/questions/1006089
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Simple (hoffe ich), HTML Frage.
Lassen Sie uns sagen, dass ich eine Spaltengruppe, die 3 Spalten erstreckt. Aber es reicht auch 9 Reihen. Aber in Wirklichkeit, ich will es 3 Ebene der Spalten sein (also im Grunde, 3 Spalten, über 9 Zeilen aufgeteilt). Die einzigen Ziele wirklich sind:
a) vermeiden Einbettung Tabellen (aus verschiedenen Gründen) b) halten die Abschnitte modular. c) erlauben für das Styling der semantisch modularen Bereichen.
Also am Ende, würde ich etwas visuell wie:
| col 1 | col 2 | col 3 |
| row 1 | row 1 | row 1 |
| row 2 | row 2 | row 2 |
| row 3 | row 3 | row 3 |
| col 4 | col 5 | col 6 |
| row 4 | row 4 | row 4 |
| row 5 | row 5 | row 5 |
| row 6 | row 6 | row 6 |
| col 7 | col 2 | col 3 |
| row 7 | row 7 | row 7 |
| row 8 | row 8 | row 8 |
| row 9 | row 9 | row 9 |
Ich konnte die Spaltengruppen erhalten zu arbeiten, um die drei Säulen zusammen zu halten, aber ein Versuch, „rowspan“ hinzufügen failed.Trying die Zeilengruppen in tr-Tags zu wickeln war überhaupt gut nicht. und soweit ich eine sagen, es gibt keinen wirklichen „rowgroup“ Tag.
Update:
Nach dem Feedback bekommen, erkannte ich, sollte ich mehr geben, was ich im Sinn haben.
Ich werde den Begriff Quad, super-Säule, super-Reihe an Gruppen von Daten zu verweisen verwenden. So dieses Beispiel nehmen:
Quad 1 Quad 2
super-row1 | a | b | c || d | e | f |
super-row2 | 1 | 2 | 3 || 4 | 5 | 6 |
super-row3 | A | B | C || D | E | F |
Quad 3 Quad 4
super-row4 | g | h | i || j | k | l |
super-row5 | 7 | 8 | 9 || 0 | 1 | 2 |
super-row6 | G | H | I || J | K | L |
Der Einfachheit halber nur vorstellen, dass am oberen Rand schrieb ich super-col. 1 - 6
So werden die Daten in Quad 1 alle verwandt, und die Daten in der Super-Reihe 1 ist alle verwandt, und die Daten in der Super-col 1 alle miteinander verwandt. Also, unter Verwendung der obigen Daten,
'a' hat eine direkte Beziehung mit 'f', 'C' und 'G', sondern 'f', 'C' und 'G' hat keine direkte Beziehung zueinander.
Eine andere Art des Denkens über sie ist Sudoku, wo jeder Quad, Spalte und Zeile den Satz von 1-9 enthalten, so dass jeder der 81 Datenpunkte direkt zu anderen Datenpunkten im Zusammenhang es eine Reihe teilt, Spalte oder Quad mit, aber nicht beschränkt auf Datenpunkte.
Quick Update:
Eine letzte Sache, sorry. Es ist wichtig, dass diese Beziehungen semantisch in der HTML gruppiert werden, so dass, sollte jemand einen Screenreader oder nicht-traditionellen Browser verwenden, können sie wissen, wo sie in der Tabelle zu einem bestimmten Zeitpunkt, dh „Sie sind in Quad 1, Super Spalte 1, Spalte 4, Super Zeile 1, Zeile 1. Die Daten sind 'Ohio'. "
Das macht Styling, Cross-Browser-Kompatibilität, Zugänglichkeit alles viel einfacher, sowie eine bewegen wie Accesskeys, Scope, etc.
Lösung
Da <colgroup> die einzige semantische Verfahren von Gruppierungsspalten und <tbody> ist die einzige semantische mittels Gruppierung Reihen, würde ich mit etwas empfehlen kleben einfach:
<table>
<colgroup id="colgroup1">
<col id="colA" />
<col id="colB" />
</colgroup>
<colgroup id="colgroup2">
<col id="colC" />
<col id="colD" />
</colgroup>
<tbody id="rowgroup1">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr id="row1">
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr id="row2">
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
</tbody>
<tbody id="rowgroup2">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr id="row3">
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr id="row4">
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</tbody>
</table>
Dies ermöglicht Ihnen, Quads, Stil, während immer noch eine saubere, semantische Struktur beibehalten wird. Ich bin mir nicht sicher, wie viel Flexibilität, die Sie in Styling haben werden, aber Sie haben einige Möglichkeiten:
<style type="text/css">
table { border-collapse:collapse; font-family:sans-serif; font-size:small; }
td, th { border:solid 1px #000; padding:2px 10px; text-align:center; }
th { background-color:#000; color:#fff; font-size:x-small; }
colgroup { border:solid 3px #000; }
tbody { border:solid 3px #000; }
</style>
table {
border-collapse: collapse;
font-family: sans-serif;
font-size: small;
}
td,
th {
border: solid 1px #000;
padding: 2px 10px;
text-align: center;
}
th {
background-color: #000;
color: #fff;
font-size: x-small;
}
colgroup {
border: solid 3px #000;
}
tbody {
border: solid 3px #000;
}<table>
<colgroup id="colgroup1">
<col id="colA" />
<col id="colB" />
</colgroup>
<colgroup id="colgroup2">
<col id="colC" />
<col id="colD" />
</colgroup>
<tbody id="rowgroup1">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr id="row1">
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr id="row2">
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
</tbody>
<tbody id="rowgroup2">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr id="row3">
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr id="row4">
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</tbody>
</table>
Andere Tipps
Ein <table> können mehrere <tbody> Kinder haben, die Zeilengruppen darstellen. Ich habe nicht das <colgroup> Element, bevor sie verwendet, so werde ich für jemand anderen verlassen hinzufügen, aber hier ist eine Lösung, die Sie Ihre Styling-Wünsche unter Beibehaltung es semantisch erreichen können:
<table>
<tbody>
<tr>
<th scope="col">col 1</th>
<th scope="col">col 2</th>
<th scope="col">col 3</th>
</tr>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="col">col 4</th>
<th scope="col">col 5</th>
<th scope="col">col 6</th>
</tr>
<tr>
<td>row 4</td>
<td>row 4</td>
<td>row 4</td>
</tr>
<tr>
<td>row 5</td>
<td>row 5</td>
<td>row 5</td>
</tr>
<tr>
<td>row 6</td>
<td>row 6</td>
<td>row 6</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="col">col 7</th>
<th scope="col">col 8</th>
<th scope="col">col 9</th>
</tr>
<tr>
<td>row 7</td>
<td>row 7</td>
<td>row 7</td>
</tr>
<tr>
<td>row 8</td>
<td>row 8</td>
<td>row 8</td>
</tr>
<tr>
<td>row 9</td>
<td>row 9</td>
<td>row 9</td>
</tr>
</tbody>
</table>
I basiert diese auf Informationen der HTML 5-Spezifikation , aber es sollte gültige HTML 4 als gut.
Wenn ich mich richtig erinnere, das <colgroup> Tag nicht richtig funktioniert in jedem Browser (na ja, Opera vielleicht). Ich würde vermeiden Sie es um jeden Preis.
Wenn ich Sie wäre, würde ich nur eine einfache Tabelle machen, wo jeder <td> ein „Quad“ steht, dann eine Tabelle für den Rest der Daten innerhalb dieser Zelle machen.
Die semantisch korrekte Art und Weise ist verschachtelte Tabellen, eigentlich. Ihr Beispiel hat eine 2x2 Tabelle von Quads und jedes Quad ist eine 3x3-Tabelle von Werten. Es gibt nichts semantisch falsch mit einer verschachtelten Tabelle für diese verwenden. Nicht verwirren lassen über die anti-verschachtelten HTML-Tabelle Menge. Das hat mit der Verwendung von verschachtelten Tabellen für das Seitenlayout zu tun.
verschachtelte Tabellen verwenden auch gibt Ihnen mehr Kontrolle über CSS Styling. Bei Verwendung nur der cols und colgroups gibt Ihnen sehr begrenzte Styling Kontrolle. Die einzigen CSS Eigenschaften, die Sie auf einem col oder colgroup sind Grenze, Hintergrund, mit und Sichtbarkeit festlegen.
Ich denke, die einfachste ist das colgroup-Element alle zusammen und gehen mit einer einfachen Klasse Styling zu überspringen statt:
<table>
<tr class="colgroup1">
<th>col1</th><th>col2</th><th>col3</th>
</tr>
<tr class="colgroup1">
<td>row1</td><td>row1</td><td>row1</td>
</tr>
<tr class="colgroup1">
<td>row2</td><td>row2</td><tr>row2</td>
</tr>
<tr class="colgroup2">
<th>col4</th><th>col5</th><th>col6</th>
</tr>
<tr class="colgroup2">
<td>row3</td><td>row3</td><td>row3</td>
</tr>
<tr class="colgroup2">
<td>row4</td><td>row4</td><td>row4</td>
</tr>
<tr class="colgroup3">
<th>col7</th><th>col8</th><th>col9</th>
</tr>
<tr class="colgroup3">
<td>row5</td><td>row5</td><td>row5</td>
</tr>
<tr class="colgroup3">
<td>row6</td><td>row6</td><td>row6</td>
</tr>
</table>
Dann können Sie die verschiedenen colgroups leicht in CSS Ziel:
.colgroup1 th {
// Styles here
}
.colgroup2 th {
// Styles here
}
.colgroup3 th {
// Styles here
}
// Same for tds.
Edit: Ich mag, wie Rory Fitzpatrick verwendet mehrere Tabellenkörper. Wenn dies tatsächlich gültig ist, dann würde ich mit dieser Lösung gehen und nur einen Klassennamen auf jeden Tisch Body-Tag gesetzt. Die CSS wird das gleiche bleiben
