Impostazione del file di righe su colgroup?
https://stackoverflow.com/questions/1006089
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Semplice (spero), domanda HTML.
Diciamo che ho un gruppo di colonne che si estende su 3 colonne. Ma si estende anche su 9 righe. Ma in realtà, voglio che ci siano 3 livelli di colonne (quindi, in pratica, 3 colonne, divise su 9 righe). Gli unici obiettivi sono davvero:
a) evitare l'incorporamento delle tabelle (per vari motivi) b) mantenere modulari le sezioni. c) consentire lo styling delle aree semanticamente modulari.
Quindi alla fine, avrei qualcosa di simile visivamente:
| 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 |
Sono stato in grado di far funzionare i gruppi di colonne per mantenere insieme le 3 colonne, ma un tentativo di aggiungere " rowpan " Il tentativo di avvolgere i gruppi di righe nei tag tr non è stato affatto positivo. e per quanto ne so, non esiste un vero " rowgroup " tag.
Aggiornamento:
Dopo aver ricevuto un feedback, mi sono reso conto che avrei dovuto fornire maggiori dettagli su ciò che ho in mente.
Userò il termine quad, super-colonna, super-riga per fare riferimento a gruppi di dati. Quindi prendi questo esempio:
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 |
Per semplicità, immagina solo che in cima ho scritto super-col 1 - 6.
Quindi, i dati in quad 1 sono tutti correlati, e i dati in super-riga 1 sono tutti correlati, e i dati in super-col 1 sono tutti correlati. Quindi, utilizzando i dati di cui sopra,
'a' ha una relazione diretta con 'f', 'C' e 'G', ma 'f', 'C' e 'G' non hanno una relazione diretta tra loro.
Un altro modo di pensarci è il Sudoku, in cui ogni quadrupolo, colonna e riga contiene l'insieme 1-9, rendendo uno degli 81 punti dati direttamente collegati a qualsiasi altro punto dati che condivide una riga, colonna quadruplo con, ma non per nessun punto dati.
Aggiornamento rapido:
Un'ultima cosa, scusa. È importante che queste relazioni siano raggruppate semanticamente nell'HTML in modo che, se qualcuno sta usando uno screen reader o un browser non tradizionale, possano sapere dove si trovano nella tabella in un dato punto, ad esempio & Quot; Quad 1, Super Col 1, Colonna 4, Super riga 1, riga 1. I dati sono 'Ohio'. & Quot;
Ciò semplifica notevolmente lo stile, la compatibilità tra browser, l'accessibilità, nonché spostarsi come AccessKeys, Scope, ecc.
Soluzione
Dato che <colgroup> è l'unico metodo semantico di raggruppare le colonne e <tbody> è l'unico mezzo semantico di raggruppare le righe, consiglio di attenersi a qualcosa di semplice:
<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>
Questo ti permetterà di modellare i quad mantenendo una struttura semantica e pulita. Non sono sicuro di quanta flessibilità avrai nello stile, ma hai alcune opzioni:
<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>
Altri suggerimenti
Un <table> può avere più <tbody> figli, che rappresentano gruppi di righe. Non ho mai usato l'elemento <colgroup> prima, quindi lo lascerò per qualcun altro da aggiungere, ma ecco una soluzione che ti permetterà di raggiungere le tue esigenze di stile mantenendolo semantico:
<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>
Ho basato questo sulle informazioni dalla HTML 5 spec , ma dovrebbe essere valido anche HTML 4.
Se ricordo bene, il tag <colgroup> non funziona correttamente in nessun browser (bene, forse Opera). Lo eviterei a tutti i costi.
Se fossi in te, farei semplicemente una tabella in cui ogni <td> rappresenta un " quad " ;, quindi creerei una tabella all'interno di quella cella per il resto dei dati.
Il modo semanticamente corretto sono le tabelle nidificate, in realtà. Il tuo esempio ha una tabella 2x2 di quad e ogni quad è una tabella di valori 3x3. Non c'è nulla di semanticamente sbagliato nell'usare una tabella nidificata per questo. Non confonderti con la folla anti-nested-html-table. Ciò ha a che fare con l'uso di tabelle nidificate per il layout di pagina.
L'uso di tabelle nidificate offre anche un maggiore controllo sullo stile CSS. L'uso di cols e colgroups ti dà solo un controllo di stile molto limitato. Le uniche proprietà CSS che puoi impostare su un col o colgroup sono border, background, with e visible.
Penso che il modo più semplice sia quello di saltare l'elemento colgroup tutti insieme e andare invece con uno stile di classe semplice:
<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>
Quindi, puoi indirizzare facilmente i diversi colgroup in CSS:
.colgroup1 th {
// Styles here
}
.colgroup2 th {
// Styles here
}
.colgroup3 th {
// Styles here
}
// Same for tds.
Modifica: Mi piace come Rory Fitzpatrick utilizza più corpi di tabella. Se questo è davvero valido, allora sceglierei quella soluzione e metterei semplicemente un nome di classe su ogni tag del corpo della tabella. Il CSS rimarrà lo stesso
