HTML Grupo de columnas de tabla
El elemento <colgroup> se utiliza para aplicar estilo a columnas específicas de una tabla.
Grupo de columnas de tabla HTML
Si desea aplicar estilo a las dos primeras columnas de una tabla, utilice <colgroup> y <col> elementos.
| MON | TUE | WED | THU | FRI | SAT | SUN |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
El elemento <colgroup> debe usarse como contenedor para las especificaciones de la columna.
Cada grupo se especifica con un elemento <col>.
El atributo span especifica cuántas columnas obtienen el estilo.
El atributo style especifica el estilo que se dará a las columnas.
Nota: Hay una selección muy limitada de propiedades CSS legales para grupos de col.
Ejemplo
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Inténtalo tú mismo »
Nota: La etiqueta <colgroup> debe ser hija de un elemento <table> y debe colocarse antes de cualquier otro elementos de la tabla, como <thead>,<tr>, <td> etc., pero después del elemento <caption>, si está presente.
Propiedades CSS legales
Solo hay una selección muy limitada de propiedades CSS que pueden usarse en el grupo col:
width propiedad
visibility propiedad
background propiedades
border propiedades
Todas las demás propiedades CSS no tendrán ningún efecto en sus tablas.
Múltiples elementos de columna
Si desea diseñar más columnas con diferentes estilos, use más elementos <col> dentro del <colgroup>:
Ejemplo
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Inténtalo tú mismo »
Grupos de columnas vacíos
Si desea aplicar estilo a las columnas en medio de una tabla, inserte un elemento <col> "vacío" (sin estilos) para las columnas anteriores:
Ejemplo
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Inténtalo tú mismo »
Ocultar columnas
Puedes ocultar columnas con la propiedad visibility: collapse:
Ejemplo
<table>
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Inténtalo tú mismo »
