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>.

Sintaxis

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

Ejemplo de la etiqueta HTML `<colgroup>`:

Etiqueta HTML <colgroup>

html

<!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>

Try it Yourself »

Resultado

colgroup example

Atributos

Nota: Los atributos de presentación como align, valign y width están obsoletos en HTML5. Utilice propiedades CSS (text-align, vertical-align, width) en su lugar.

Atributo	Valor	Descripción
`align`	`left` \| `right` \| `center` \| `justify` \| `char`	Establece la alineación del contenido de la columna. No es compatible con HTML5.
`char`	carácter	Alinea el contenido de la columna con el carácter especificado. Se utiliza solo si `align="char"`. No es compatible con HTML5.
`charoff`	número	Desplaza el contenido de la celda en relación con el carácter especificado. Se utiliza solo si `align="char"`. No es 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 es compatible con HTML5.
`width`	`%` \| `pixels` \| `relative_length`	Establece el ancho de la columna. No es compatible con HTML5.

La etiqueta <colgroup> también es compatible con los Atributos Globales y los Atributos de Eventos.

Práctica

¿Cuál es la representación y el caso de uso correctos de la etiqueta HTML <colgroup>?

La etiqueta <colgroup> define un grupo de una o más columnas en una tabla para su formato.<colgroup> es una etiqueta de cierre automático.No se pueden usar estilos con <colgroup> en HTML5.La etiqueta <colgroup> no admite el atributo span.La etiqueta <colgroup> se utiliza para agrupar el contenido del encabezado en una tabla.

Etiqueta HTML <colgroup> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <colgroup>: ​

Resultado ​