Etiqueta HTML `<col>`

La etiqueta <col> define las propiedades de una o más columnas en la tabla HTML definida por la etiqueta <table>. La etiqueta <col> se usa a menudo con la etiqueta <colgroup>, que especifica un grupo con propiedades comunes. Nota: los elementos <col> solo afectan a las columnas dentro del primer <colgroup> o del primer grupo implícito.

La etiqueta <col> se coloca dentro de la etiqueta <table>, antes de las etiquetas <thead>, <tbody>, <tfoot> y <tr>, y después de la etiqueta <caption> si se usa (en la etiqueta <caption> insertamos el nombre de la tabla).

Sintaxis

La etiqueta <col> es vacía, lo que significa que no se requiere la etiqueta de cierre. Pero en XHTML, la etiqueta <col> debe ser autocerrada (<col />). En HTML5 moderno, se omite la barra de cierre (<col>).

Ejemplo de la etiqueta HTML `<col>`:

Etiqueta HTML <col>

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

col example

Atributos

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`	`character`	Alinea el contenido relacionado con un elemento `<col>` en un carácter. Solo se usa si el atributo es `align="char"`. No es compatible con HTML5.
`charoff`	`number`	Desplaza el contenido de la celda en relación con el carácter especificado como valor del atributo hacia la derecha (valores positivos) o hacia la izquierda (valores negativos). Solo se usa si el atributo es `align="char"`. No es compatible con HTML5.
`span`	`number`	Establece la cantidad de columnas cuyas propiedades son determinadas por el elemento `<col>`. El número debe ser un entero positivo. Si no se especifica el parámetro, 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 <col> también admite los Atributos Globales y los Atributos de Eventos.

Práctica

¿Qué hace la etiqueta HTML <col> en un documento HTML?

Especifica las propiedades de la columna para cada columna dentro de un elemento <colgroup>Define una sección de cabecera en un documento HTMLIndica el inicio de un nuevo párrafoProporciona estilos a columnas individuales

Etiqueta HTML <col> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <col>: ​

Resultado ​