Etiqueta HTML <colgroup>

La etiqueta HTML <colgroup> se utiliza para especificar un grupo de columnas con propiedades comunes dentro de una tabla. La etiqueta solo puede contener elementos <col>, que definen las propiedades de las columnas.

La etiqueta <colgroup> se anida dentro de una etiqueta <table>, antes de <thead>, <tbody>, <tfoot> y <tr>, y después de <caption>, si se utiliza (en la etiqueta <caption> se inserta el título de la tabla).

Una sola tabla HTML puede incluir varias etiquetas <colgroup>.

¿Por qué usar `<colgroup>`?

Las celdas de una tabla HTML se escriben fila a fila, por lo que no hay un lugar natural donde aplicar estilos que deban afectar a toda una columna. Los elementos <colgroup> y <col> resuelven esto: describen las columnas de la tabla de una sola vez, al principio, y permiten aplicar propiedades compartidas (anchura, fondo, bordes) a todas las celdas de esas columnas al mismo tiempo.

Dos ventajas prácticas:

Dar estilo a muchas columnas a la vez. Establece una anchura o un fondo en un grupo de columnas y no tendrás que repetirlo en cada <td> de cada fila.
Separar la estructura de la presentación. Las definiciones de columnas se concentran en un bloque pequeño cerca del inicio de la tabla, en lugar de estar dispersas por las celdas, lo que facilita la lectura y el mantenimiento del marcado.

Sintaxis

La etiqueta <colgroup> viene en pares. El contenido se escribe entre las etiquetas de apertura (<colgroup>) y de cierre (</colgroup>).

Ejemplo de la etiqueta HTML `<colgroup>`:

Etiqueta HTML <colgroup>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Result

Comprender el atributo `span`

span controla cuántas columnas consecutivas cubre un elemento, pero su significado varía ligeramente según dónde se coloque:

span en <colgroup> declara que el grupo en sí abarca ese número de columnas. Úsalo cuando quieras tratar varias columnas consecutivas como un bloque con estilo único y no necesites elementos <col> hijos independientes. Por ejemplo, <colgroup span="3"> agrupa las tres primeras columnas.
span en un <col> hijo declara a cuántas columnas se aplica ese <col> en particular. Esto permite que un solo <colgroup> describa varias columnas con reglas distintas, como en el ejemplo anterior donde <col span="2"> cubre las dos primeras columnas y el siguiente <col> cubre la tercera.

Si un <colgroup> contiene elementos <col> hijos, los hijos describen las columnas y no debes añadir también span en el <colgroup>.

Usar varios elementos `<colgroup>`

Una tabla puede contener más de un <colgroup>. Cada grupo reclama el siguiente conjunto de columnas en orden, lo que resulta muy útil para separar visualmente secciones lógicas de una tabla:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="background-color:#eee;" />
      </colgroup>
      <colgroup span="2" style="background-color:#cde6a5;"></colgroup>
      <tr>
        <th>Product</th>
        <th>Q1 Sales</th>
        <th>Q2 Sales</th>
      </tr>
      <tr>
        <td>Widgets</td>
        <td>120</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Gadgets</td>
        <td>90</td>
        <td>110</td>
      </tr>
    </table>
  </body>
</html>

Result

El primer <colgroup> aplica estilo a la columna más a la izquierda; el segundo, con span="2", aplica estilo a las dos columnas de ventas como un único grupo.

Aplicar estilos a columnas con CSS

El enfoque moderno más limpio es mantener el marcado mínimo y trasladar la presentación a una hoja de estilos, apuntando a los elementos <col> y <colgroup> con CSS en lugar de usar los atributos obsoletos align, valign y width. Un conjunto limitado pero útil de propiedades CSS se aplica a través de estos elementos: background-color, background, border, width y visibility.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
      .highlight {
        background-color: #8ebf42;
      }
      col.narrow {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="narrow" />
        <col class="highlight" />
      </colgroup>
      <tr>
        <th>Code</th>
        <th>Item</th>
      </tr>
      <tr>
        <td>A1</td>
        <td>Notebook</td>
      </tr>
    </table>
  </body>
</html>

Un detalle práctico a tener en cuenta: el background-color de una columna solo se ve donde las propias celdas son transparentes. Si un <td> o <tr> define su propio fondo, ese color a nivel de celda prevalece sobre el de la columna.

Accesibilidad

<colgroup> y <col> son exclusivamente presentacionales: afectan al aspecto visual pero no aportan ningún significado semántico para las tecnologías de asistencia. Los lectores de pantalla no anuncian los grupos de columnas y su uso no asocia encabezados con celdas de datos. Para hacer una tabla accesible, usa celdas de encabezado reales (<th>) con los atributos scope apropiados; no dependas de <colgroup> para transmitir la estructura.

Atributos

Nota: Los atributos de presentación como align, valign y width están obsoletos en HTML5. Aplica estilos a las columnas con CSS (text-align, vertical-align, width) apuntando a los elementos <col> y <colgroup>.

Atributo	Valor	Descripción
`align`	`left` \| `right` \| `center` \| `justify` \| `char`	Establece la alineación del contenido de la columna. No compatible con HTML5.
`char`	carácter	Alinea el contenido de la columna con el carácter especificado. Solo se usa si `align="char"`. No compatible con HTML5.
`charoff`	número	Desplaza el contenido de la celda respecto al carácter especificado. Solo se usa si `align="char"`. No compatible con HTML5.
`span`	número	Establece el número de columnas a las que se aplica el elemento `<col>`. El valor predeterminado es 1.
`valign`	`top` \| `middle` \| `bottom` \| `baseline`	Alinea el contenido verticalmente. No compatible con HTML5.
`width`	`%` \| `pixels` \| `relative_length`	Establece la anchura de la columna. No compatible con HTML5.

La etiqueta <colgroup> también admite los Atributos Globales y los Atributos de Evento.

Práctica

¿Cuál es la descripción correcta y el caso de uso de la etiqueta HTML colgroup?

La etiqueta <colgroup> define un grupo de una o más columnas en una tabla para aplicar formato.<colgroup> es una etiqueta de cierre automático.Propiedades CSS como background-color y width nunca se aplican a través de <colgroup>.La etiqueta <colgroup> no admite el atributo span.La etiqueta <colgroup> se usa para agrupar el contenido del encabezado en una tabla.

¿Por qué usar <colgroup>?