Etiqueta col de HTML - Aprende HTML

La etiqueta <col> define las propiedades de una o más columnas en la tabla HTML definida por la etiqueta <table>. Permite aplicar estilos a columnas enteras de una sola vez, en lugar de dar estilo a cada celda <td> individualmente. La etiqueta <col> se usa casi siempre dentro de la etiqueta <colgroup>, que agrupa una o más columnas con propiedades comunes.

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> se inserta el nombre de la tabla).

¿Por qué usar `<col>`?

Una celda de tabla se representa en la intersección de una fila y una columna, pero la estructura de HTML es por filas: <tr> agrupa celdas horizontalmente, y no existe ningún elemento que agrupe celdas verticalmente fila a fila. El elemento <col> cubre esa carencia. En lugar de añadir el mismo width, background-color o border a cada <td> de una columna, se declara una sola vez en un <col> y el navegador lo aplica a toda la columna.

Esto resulta especialmente útil cuando se desea:

Dar a una columna un ancho fijo o proporcional (por ejemplo, que la primera columna sea estrecha y la última ancha).
Resaltar una columna con un color de fondo para atraer la atención del lector.
Aplicar un borde a una columna para separarla visualmente.

Hay una limitación que conviene tener en cuenta desde el principio: un elemento <col> no contiene contenido y no puede estilizarse libremente. Los navegadores solo aplican un pequeño conjunto de propiedades CSS a través de <col>: background, border, width y visibility. Propiedades como padding, color o font-size se ignoran en <col>; para esas es necesario dar estilo directamente a las celdas <td>/<th>.

Sintaxis

La etiqueta <col> es vacía, lo que significa que no se requiere etiqueta de cierre. Sin embargo, en XHTML, la etiqueta <col> debe cerrarse por sí misma (<col />). En HTML5 moderno, la barra de cierre se omite (<col>).

Ejemplo de la etiqueta HTML `<col>`:

Etiqueta HTML <col>

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

El atributo `span`

El atributo span indica a un elemento <col> que abarque varias columnas consecutivas. Esto evita repetir el mismo <col> para columnas adyacentes que deben tener el mismo aspecto. El valor debe ser un entero positivo; el valor predeterminado es 1.

En el siguiente ejemplo, un único <col span="3"> aplica estilos a las tres primeras columnas a la vez, mientras que un segundo <col> aplica estilo a la cuarta columna por separado:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="3" style="background-color: #eee;" />
        <col style="background-color: #8ebf42;" />
      </colgroup>
      <tr>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>120</td>
        <td>98</td>
        <td>143</td>
        <td>361</td>
      </tr>
    </table>
  </body>
</html>

Dar estilo a columnas con CSS

Los atributos align, valign y width están obsoletos en HTML5 — fueron eliminados de la especificación y no se debe depender de ellos. El enfoque moderno consiste en establecer anchos y otras propiedades compatibles con CSS en lugar de usar atributos de presentación en línea.

Es posible apuntar a un <col> directamente, o asignarle una class y dar estilo a esa clase. Como width es una de las propiedades que sí se aplica a través de <col>, esto funciona bien:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
      /* Style the column directly */
      col.label {
        width: 60%;
      }
      /* Or use the column index */
      col.value {
        width: 40%;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="label" />
        <col class="value" />
      </colgroup>
      <tr>
        <th>Product</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>Keyboard</td>
        <td>$29</td>
      </tr>
      <tr>
        <td>Mouse</td>
        <td>$15</td>
      </tr>
    </table>
  </body>
</html>

Advertencia

Solo un conjunto limitado de propiedades CSS tiene efecto cuando se aplican a <col>: background, border, width y visibility (por ejemplo, visibility: collapse para ocultar una columna). Propiedades como padding, color, text-align y font-size se ignoran en la columna y deben establecerse en las celdas <td> o <th> en su lugar.

Accesibilidad

Los elementos <col> y <colgroup> son puramente presentacionales: agrupan columnas visualmente, pero no crean una relación semántica que los lectores de pantalla anuncien. Un lector de pantalla navega por una tabla celda a celda usando las asociaciones de fila (<tr>) y encabezado (<th>), no por grupos de columnas.

Para que una tabla de datos sea comprensible cuando se lee fuera de orden:

Usa celdas de encabezado <th> correctas con el atributo scope (scope="col" para encabezados de columna) de modo que cada celda de datos esté vinculada a su encabezado.
Proporciona un <caption> para darle un nombre a la tabla.
No uses background-color en un <col> como el único modo de transmitir significado (por ejemplo, columnas "válidas" frente a "inválidas"), porque el color es invisible para los usuarios de lectores de pantalla y para las personas que no pueden distinguirlo. Combínalo con texto o un icono.

Atributos

Atributo	Valor	Descripción
`span`	`number`	Establece la cantidad de columnas cuyas propiedades son determinadas por el elemento `<col>`. El número debe ser un entero positivo. Si el parámetro no se especifica, el valor predeterminado es `1`.
`align`	`left`, `right`, `center`, `justify`, `char`	Establece la alineación horizontal del contenido de la columna. Obsoleto en HTML5 — usa la propiedad CSS `text-align` en las celdas `<td>`/`<th>` en su lugar.
`char`	`character`	Alinea el contenido de la columna con un carácter. Solo se usa con `align="char"`. Obsoleto en HTML5.
`charoff`	`number`	Desplaza el contenido respecto al carácter de alineación. Solo se usa con `align="char"`. Obsoleto en HTML5.
`valign`	`top`, `middle`, `bottom`, `baseline`	Alinea el contenido verticalmente. Obsoleto en HTML5 — usa la propiedad CSS `vertical-align` en las celdas en su lugar.
`width`	`%`, `pixels`, `relative_length`	Establece el ancho de la columna. Obsoleto en HTML5 — usa la propiedad CSS `width` en el `<col>` (p. ej., `col { width: 40%; }`) en su lugar.

span es el único atributo que sigue estando definido para <col> en HTML5. Todo lo que antes se hacía con align, valign y width ahora se hace con CSS, como se muestra en la sección "Dar estilo a columnas con CSS" anterior.

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

Práctica

¿Qué hace la etiqueta col de HTML en una tabla?

Define las propiedades de una o más columnas dentro de un elemento colgroupDefine la sección de encabezado del documento HTMLInicia una nueva fila de la tablaDa estilo directamente al texto y al relleno de cada celda de una columna

¿Por qué usar <col>?