Elemento col en HTML

Un elemento html col define una columna dentro de una tabla, se utiliza para dar una estructura organizativa a celdas similares y está contenido dentro de un elemento <colgroup>.

Un ejemplo de una tabla con un conjunto de columnas (el elemento <colgroup>) y definimos una columna (el elemento <col>) con un color de fondo verde:

< table > 
  < colgroup > 
    < col  style = "background-color: # 0f0" > 
  </ colgroup > 
  < tr > 
    < th > manzana </ th > 
    < th > limón </ th > 
    < th > naranja </ th > 
  </ tr > 
  < tr > 
    < td > rojo </ td >
    < td >amarillo </ td > 
    < td > naranja </ td > 
  </ tr > 
</ table >

Etiqueta html col

Clasificaciones de contenido	No hay.
Contenido permitido	No hay, es un elemento vacío.
Acrónimo	La etiqueta inicial debe estar presente y la etiqueta final debe omitirse.
Elementos del padre	Solo elemento <colgroup> y no debe ser un elemento `<colgroup>` de propiedad `span`.
Interfaz DOMO	`HTMLTableColElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Características

En este elemento html col se pueden utilizar propiedades globales.

`align`

Esta propiedad se utiliza para especificar cómo se alinea cada celda de columna y acepta uno de los siguientes valores:

left: Muestra el contenido a la izquierda de la celda
center: centra el contenido en la celda
right: Muestra el contenido a la derecha de la celda
justify: Muestra el contenido de la línea completa.

Vale la pena señalar que esta característica se ha descuidado en HTML 4 y se ha eliminado en HTML5, y no está permitido su uso, pero el elemento debe formatearse <col> con CSS, tenga en cuenta las siguientes ideas al formatear este elemento:

No intente usar la propiedad text-align en un selector para ese elemento <col> porque los elementos <td> no son hijos de ese elemento y <col> no heredarán este formato.
Si no muestra los elementos de la propiedad en la tabla colspan, use el especificado td:nth-child(an+b)‎y establezca a en cero yb en la posición de la columna en la tabla, por ejemplo , td:nth-child(2) ‎{ text-align: right; }‎para alinear el contenido de la segunda columna a la derecha.
Si los elementos de la tabla tienen la propiedad colspan, los selectores CSS se pueden usar de manera similar a [colspan=n].

`bgcolor`

Esta propiedad define el color de fondo de cada celda de la columna y puede aceptar valores hexadecimales sRGB, precedidos por un carácter #. Se pueden utilizar los siguientes nombres de colores predefinidos:

`black` = «# 000000»	`green` = «# 008000»
`silver` = «# C0C0C0»	`lime` = «# 00FF00»
`gray` = «# 808080»	`olive` = «# 808000»
`white` = «#FFFFFF»	`yellow` = «# FFFF00»
`maroon` = «# 800000»	`navy` = «# 000080»
`red` = «# FF0000»	`blue` = «# 0000FF»
`purple` = «# 800080»	`teal` = «# 008080»
`fuchsia` = «# FF00FF»	`aqua` = «# 00FFFF»

Cabe señalar que esta función no es estándar y solo la utilizan algunas versiones de Internet Explorer, pero el elemento debe formatearse <col> con CSS. Se puede aplicar un efecto similar a esta propiedad utilizando una propiedad background-color en las celdas de <td> captura.

`span`

Esta propiedad contiene un número positivo que indica el número de columnas que abarca el elemento <col>. El valor predeterminado para esta propiedad, si no se especifica, es 1.

Un ejemplo de una tabla con un conjunto de columnas (el elemento <colgroup>) y <col> definimos el elemento en ella que se extiende sobre dos columnas, y su color de fondo es amarillo verdoso:

< table > 
  < colgroup > 
    < col  span = "2"  style = "background-color: # adff2f" > 
  </ colgroup > 
  < tr > 
    < th > manzana </ th > 
    < th > limón </ th > 
    < th > Naranja </ th > 
  </ tr > 
  < tr > 
    < td >verde </ td> 
    < td > amarillo </ td > 
    < td > naranja </ td > 
  </ tr > 
</ table >

`valign`

Esta propiedad se utiliza para especificar cómo es la alineación vertical de cada celda de columna y acepta uno de los siguientes valores:

baseline: Muestra el contenido lo más cerca posible de la parte inferior de la celda, pero la alineación estará en la línea de base de los caracteres en lugar de en la parte inferior, y si los caracteres son del mismo tamaño, este valor tendrá el mismo efecto que el valor bottom.
bottom: Muestra el contenido lo más cerca posible de la parte inferior de la celda.
middle: Centra el texto en la celda verticalmente.
top: Muestra el contenido lo más cerca posible de la parte superior de la celda.

No intente usar la propiedad vertical-align en un selector para <col> ese elemento porque los elementos <td> no son hijos de ese elemento y <col> no heredarán este formato.
Si no muestra los elementos de la propiedad en la tabla colspan, use el especificado td:nth-child(an+b)‎ y establezca a en cero y b en la posición de la columna en la tabla, por ejemplo , td:nth-child(2) ‎{ vertical-align: top; }‎para alinear el contenido de la segunda columna a la derecha.
Si los elementos de la tabla tienen la propiedad colspan, los selectores CSS se pueden usar de manera similar a [colspan=n].

`width`

Esta propiedad especifica la visualización predeterminada para cada columna en las columnas del conjunto actual, y además de aceptar píxeles y porcentajes valiosos, esta propiedad puede tomar la forma privada 0*, lo que significa que el ancho de la columna debe ser igual al ancho mínimo requerido para mostrar el contenido de la columna.

Se puede utilizar, como valores relativos 0.5*‎. Tenga en cuenta que esta función se ha omitido en HTML5.

Formato predeterminado

La mayoría de los navegadores muestran el elemento <col> con la propiedad establecida display en table-column:

col {
  display: table-column;
}