html - column - ¿Establecer rowspan en colgroup?
table group html (5)
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) evitar la inclusión de tablas (por diversas 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 trabajaran para mantener las 3 columnas juntas, pero falló un intento de agregar "rowspan". Tratar de envolver los grupos de filas en etiquetas tr no era bueno en absoluto. y hasta donde yo sé, no hay una etiqueta real de "grupo de fila".
Actualizar:
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, superruta para referirme a grupos de datos. Entonces 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, imagina que en la parte superior escribí supercol 1 - 6.
Entonces, los datos en el quad 1 están relacionados, y los datos en la superfila 1 están relacionados, y los datos en supercol 1 están relacionados. Entonces, usando los datos anteriores,
''a'' tiene una relación directa con ''f'', ''C'' y ''G'', pero ''f'', ''C'' y ''G'' no tienen ninguna relación directa entre sí.
Otra forma de pensar es Sudoku, donde cada cuadrante, columna y fila contienen 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 con el que comparte una fila, columna o cuadrante, 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, si alguien está usando un lector de pantalla o un navegador no tradicional, puedan saber dónde están en la mesa en cualquier punto dado, es decir, "Estás en el Quad 1, Super Col 1, Columna 4, Super Fila 1, Fila 1. La información es ''Ohio''. "
Esto hace que el estilo, la compatibilidad entre navegadores y la accesibilidad sean mucho más fáciles, además de un movimiento como AccessKeys, Scope, etc.
Una <table> puede tener múltiples hijos <tbody> , que representan grupos de filas. No he utilizado antes el elemento <colgroup> , así que lo dejo para que alguien más lo agregue, pero aquí hay una solución que le permitirá alcanzar sus necesidades de estilo y mantenerlo 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 la especificación HTML 5 , pero también debería ser válida HTML 4.
Si recuerdo correctamente, la etiqueta <colgroup> no funciona correctamente en ningún navegador (bueno, Opera tal vez). Lo evitaría a toda costa.
Si yo fuera tú, crearía una tabla simple donde cada <td> represente un "quad", luego crearía 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 2x2 de quads y cada quad es una tabla de valores de 3x3. No hay nada semánticamente mal con el uso de una tabla anidada para esto. No te confundas con el grupo 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 da un control de estilo muy limitado. Las únicas propiedades de CSS que puede establecer en un col o colgroup son border, background, with y visibility.
Dado que <colgroup> es el único método semántico para 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 cuadrículas mientras mantiene una estructura semántica limpia. No estoy seguro de cuánta flexibilidad tendrá en el diseño, pero tiene 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>
Creo que lo más fácil es omitir el elemento colgroup todos juntos y optar por 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>
Luego, puede orientar los diferentes grupos de columnas fácilmente 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 elegiría esa solución y solo pondría un nombre de clase en cada etiqueta corporal de la tabla. El CSS seguirá siendo el mismo