¿Establecer filas en colgroup?
https://stackoverflow.com/questions/1006089
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Simple (espero), pregunta HTML.
Digamos que tengo un grupo de columnas que abarca 3 columnas. Pero también abarca 9 filas. Pero en realidad, quiero que haya 3 niveles de columnas (básicamente, 3 columnas, divididas en 9 filas). Los únicos objetivos realmente son:
a) evite incrustar tablas (por varias razones) b) mantener las secciones modulares. c) permitir el diseño de las áreas semánticamente modulares.
Entonces, al final, tendría algo visualmente como:
| 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 |
Pude hacer que los grupos de columnas funcionen para mantener las 3 columnas juntas, pero intenté agregar " rowspan " falló. Intentar envolver los grupos de filas en etiquetas tr no fue nada bueno. y hasta donde puedo decir, no hay " rowgroup " etiqueta.
Actualización:
Después de recibir comentarios, me di cuenta de que debería dar más detalles sobre lo que tengo en mente.
Usaré el término quad, supercolumna, super fila para referirme a grupos de datos. Así que tome este ejemplo:
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 |
Por simplicidad, imagínense que en la parte superior escribí supercol 1 - 6.
Entonces, los datos en el quad 1 están todos relacionados, y los datos en la super fila 1 están todos relacionados, y los datos en el supercol 1 están todos relacionados. Entonces, usando los datos anteriores,
'a' tiene una relación directa con 'f', 'C' y 'G', pero 'f', 'C' y 'G' no tienen una relación directa entre sí.
Otra forma de pensar es Sudoku, donde cada cuadrante, columna y fila contiene el conjunto de 1-9, lo que hace que cualquiera de los 81 puntos de datos se relacione directamente con cualquier otro punto de datos que comparta una fila, columna o quad con, pero no a ningún punto de datos.
Actualización rápida:
Una última cosa, lo siento. Es importante que estas relaciones se agrupen semánticamente en el HTML para que, en caso de que alguien use un lector de pantalla o un navegador no tradicional, puedan saber en qué punto de la tabla se encuentran, es decir, & "; Quad 1, Super Col 1, Columna 4, Super Fila 1, Fila 1. Los datos son 'Ohio'. & Quot;
Esto hace que el estilo, la compatibilidad entre navegadores, la accesibilidad sea mucho más fácil, así como un movimiento como AccessKeys, Scope, etc.
Solución
Dado que <colgroup> es el único método semántico de agrupar columnas y <tbody> es el único medio semántico de agrupar filas, recomendaría seguir con algo 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>
Esto le permitirá diseñar quads mientras mantiene una estructura semántica limpia. No estoy seguro de cuánta flexibilidad tendrás en el estilo, pero tienes algunas opciones:
<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>
Otros consejos
A <table> puede tener múltiples <tbody> elementos secundarios, que representan grupos de filas. No he usado el elemento <colgroup> antes, así que lo dejaré para que alguien más lo agregue, pero aquí hay una solución que le permitirá lograr sus necesidades de estilo mientras lo mantiene semántico:
<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>
Basé esto en la información de HTML 5 spec , pero también debería ser HTML 4 válido.
Si no recuerdo mal, la etiqueta <colgroup> no funciona correctamente en ningún navegador (bueno, Opera tal vez). Lo evitaría a toda costa.
Si fuera usted, simplemente haría una tabla simple donde cada <td> represente un & "; quad &"; luego haga una tabla dentro de esa celda para el resto de los datos.
La forma semánticamente correcta es tablas anidadas, en realidad. Su ejemplo tiene una tabla de quads de 2x2 y cada quad es una tabla de valores de 3x3. No hay nada semánticamente malo en usar una tabla anidada para esto. No se confunda con la multitud anti-nested-html-table. Eso tiene que ver con el uso de tablas anidadas para el diseño de página.
El uso de tablas anidadas también le brinda más control sobre el estilo CSS. El uso de cols y colgroups solo le brinda un control de estilo muy limitado. Las únicas propiedades CSS que puede establecer en una columna o grupo de colores son borde, fondo y visibilidad.
Creo que lo más fácil es omitir el elemento colgroup por completo e ir con un estilo de clase simple en su lugar:
<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>
Entonces, puede orientar fácilmente los diferentes grupos de col en CSS:
.colgroup1 th {
// Styles here
}
.colgroup2 th {
// Styles here
}
.colgroup3 th {
// Styles here
}
// Same for tds.
Editar: Me gusta cómo Rory Fitzpatrick utiliza múltiples cuerpos de tabla. Si eso es realmente válido, entonces iría con esa solución y simplemente pondría un nombre de clase en cada etiqueta del cuerpo de la tabla. El CSS seguirá siendo el mismo
