MEJOR SITIO PARA DESARROLLADORES WEB
HTML5 Lecciones para principiantes

Ua En De

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 »


Comentarios