Définition de rowspan sur colgroup?
https://stackoverflow.com/questions/1006089
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Simple (j'espère), question HTML.
Disons que j'ai un groupe de colonnes qui s'étend sur 3 colonnes. Mais il s'étend également sur 9 lignes. Mais en réalité, je veux qu'il y ait 3 niveaux de colonnes (donc, en gros, 3 colonnes, réparties sur 9 lignes). Les seuls objectifs sont vraiment:
a) éviter d’incorporer des tables (pour diverses raisons) b) garder les sections modulaires. c) permettre le style des zones modulables sémantiquement.
Donc, au final, j'aurais quelque chose comme:
| 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 |
J'ai réussi à faire en sorte que les groupes de colonnes conservent les 3 colonnes ensemble, mais une tentative d’ajout de & "RowSans &"; Échec. Essayer d’envelopper les groupes de lignes dans les balises tr n’était pas bon du tout et pour autant que je sache, il n’existe pas de " rowgroup " tag.
Mise à jour:
Après avoir eu des retours, j'ai compris que je devais donner plus de détails sur ce que j'avais en tête.
Je vais utiliser le terme quad, super-colonne, super-ligne pour désigner des groupes de données. Alors prenons cet exemple:
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 |
Par souci de simplicité, imaginez qu’au sommet, j’ai écrit le super-col 1 - 6.
Ainsi, les données du quadrant 1 sont toutes liées, et les données de la super-ligne 1 sont toutes liées, et les données du super-col 1 sont toutes liées. Donc, en utilisant les données ci-dessus,
"a" a une relation directe avec "f", "C" et "G", mais "f", "C" et "G" n'ont pas de relation directe entre eux.
Sudoku est une autre façon de penser. Chaque quadrilatère, colonne et rangée contient la série de 1 à 9, ce qui fait que l’un des 81 points de données est directement lié à tout autre point de données pour lequel il partage une ligne, une colonne ou une autre. quad avec, mais pas à des points de données.
Mise à jour rapide:
Une dernière chose, désolé. Il est important que ces relations soient regroupées sémantiquement dans le code HTML afin que, si une personne utilise un lecteur d'écran ou un navigateur non traditionnel, elle puisse savoir où elle se trouve dans le tableau, c.-à-d. & "Vous êtes dans Quad 1, Super Col 1, Colonne 4, Super Row 1, Row 1. Les données sont «Ohio». & Quot;
Cela facilite considérablement le style, la compatibilité entre navigateurs, l'accessibilité, ainsi que les déplacements tels que AccessKeys, Scope, etc.
La solution
Etant donné que <colgroup> est la seule méthode sémantique de regroupement de colonnes et que <tbody> est le seul moyen sémantique de regrouper des lignes, je vous recommande de vous en tenir à quelque chose de simple:
<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>
Cela vous permettra de styler les quads tout en conservant une structure sémantique et propre. Je ne sais pas combien de souplesse vous aurez en matière de style, mais vous avez quelques options:
<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>
Autres conseils
Un <table> peut avoir plusieurs <tbody> enfants, qui représentent des groupes de lignes. Je n'ai pas utilisé l'élément <colgroup> auparavant, je le laisserai donc à quelqu'un d'autre, mais voici une solution qui vous permettra de répondre à vos besoins en matière de style tout en le gardant sémantique:
<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>
Je me suis basé sur les informations de la spécification HTML 5 , mais il devrait aussi être valide en HTML 4.
Si je me souviens bien, la balise <colgroup> ne fonctionne pas dans tous les navigateurs (enfin, Opera peut-être). Je l'éviterais à tout prix.
Si j'étais vous, je créerais simplement un tableau où chaque <td> représente un & "quad &"; puis un tableau dans cette cellule pour le reste des données.
La manière sémantiquement correcte est constituée de tables imbriquées. Votre exemple a une table 2x2 de quads et chaque quad est une table de valeurs 3x3. Il n'y a rien de mal sémantiquement à utiliser une table imbriquée pour cela. Ne soyez pas dérouté par la foule anti-imbriquée-html-table. Cela concerne l'utilisation de tableaux imbriqués pour la mise en page.
L'utilisation de tableaux imbriqués vous permet également de mieux contrôler le style CSS. L'utilisation de cols et de colgroups ne vous donne qu'un contrôle de style très limité. Les seules propriétés CSS que vous pouvez définir sur un col ou un colgroup sont bordure, arrière-plan, avec et visibilité.
Je pense que le plus simple consiste à ignorer l'élément colgroup et à utiliser un style de classe simple:
<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>
Ensuite, vous pouvez cibler facilement les différents groupes de colonnes en CSS:
.colgroup1 th {
// Styles here
}
.colgroup2 th {
// Styles here
}
.colgroup3 th {
// Styles here
}
// Same for tds.
Modifier: j'aime bien la façon dont Rory Fitzpatrick utilise plusieurs corps de table. Si cela est vraiment valable, alors j'opterais pour cette solution et je mettrais simplement un nom de classe sur chaque balise de corps de tableau. Le CSS restera le même
