Grupo de columnas de tabla HTML
El <colgroup>elemento se utiliza para diseñar 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 los elementos <colgroup>
y <col>
.
| LUN | MAR | CASARSE | RECOGER | VIE | SE SENTÓ | SOL |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | dieciséis | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
El <colgroup>elemento debe utilizarse como contenedor para las especificaciones de la columna.
Cada grupo se especifica con un <col>elemento.
El spanatributo especifica cuántas columnas recibe el estilo.
El styleatributo especifica el estilo para dar a las columnas.
Nota: Hay una selección muy limitada de propiedades CSS legales para colgroups .
Ejemplo
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Nota: La <colgroup>etiqueta debe ser secundaria de un <table>elemento y debe colocarse antes de cualquier otro elemento de la tabla, como <thead>,
<tr>, <td>
etc., pero después del <caption>elemento, si está presente.
Propiedades CSS legales
Solo hay una selección muy limitada de propiedades CSS que se pueden usar en el grupo col:
widthpropiedad
visibilitypropiedad
backgroundpropiedades
borderpropiedades
Todas las demás propiedades de CSS no tendrán efecto en sus tablas.
Múltiples elementos de columna
Si desea diseñar más columnas con diferentes estilos, use más
<col>elementos dentro de
<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>
...
Grupos de columnas vacíos
Si desea diseñar columnas en el medio de una tabla, inserte un
<col>elemento "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>
...
Ocultar columnas
Puede ocultar columnas con la visibility: collapsepropiedad:
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>
...