Elemento col
Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.
Tabla de contenidos
Descripción
El elemento col
representa una o más columnas en una tabla (table
). Este elemento se vuelve útil cuando se precisa asignar un conjunto de atributos a todas las celdas en una o más columnas. En tales casos, los atributos pueden ser declarados directamente en el elemento col
y sus efectos serán automáticamente transferidos a las columnas que éste representa.
Mediante el atributo span
, los autores pueden especificar cuántas columnas serán afectadas por el elemento col
. El conteo de columnas va de izquierda a derecha, de modo que para tener un elemento col
que represente a la tercera columna de una tabla, debes primero representar con otro elemento col
a las dos primeras.
Ejemplos
El siguiente ejemplo muestra una tabla (table
) con seis columnas. Las primeras tres columnas son agrupadas con un elemento colgroup
y las tres siguientes con otro. Dentro del segundo grupo de columnas, se declaran dos elementos col
, el primero sin atributos (pero necesario como espaciador), representando a la primera columna en el grupo, y el segundo con un color de fondo, representando a las dos últimas columnas del grupo. Este color de fondo se verá relfejado en todas las columnas que el elemento representa, que son las dos últimas de acuerdo a su posición y al valor de su atributo span
.
En este caso particular, el elemento col
se utiliza para resaltar un par de columnas en un intento de llamar la atención del usuario hacia ellas. En muchas suituaciones, los autores podrían usarlo con otros motivos, tales como especificar el lenguaje, la dirección del texto, el ancho o el estilo de fuente.
<table class="default">
<colgroup span="3"></colgroup>
<colgroup>
<col>
<col span="2" style="background: rgba(255, 128, 0, 0.3); border: 1px solid rgba(200, 100, 0, 0.3);">
</colgroup>
<tr>
<th>Ciudad</th>
<th>Lengua</th>
<th>Moneda</th>
<th>Área</th>
<th>Población</th>
<th>Densidad</th>
</tr>
<tr>
<td>Londres</td>
<td>Inglés</td>
<td>GBP</td>
<td>1,572.00 km<sup>2</sup></td>
<td>8,416,535</td>
<td>5,354/km<sup>2</sup></td>
</tr>
<tr>
<td>Washington</td>
<td>Inglés</td>
<td>USD</td>
<td>177.0 km<sup>2</sup></td>
<td>646,449</td>
<td>4,066/km<sup>2</sup></td>
</tr>
<tr>
<td>Moscou</td>
<td>Ruso</td>
<td>RUB</td>
<td>2,511 km<sup>2</sup></td>
<td>11,503,501</td>
<td>4,581.24/km<sup>2</sup></td>
</tr>
</table>
Ciudad | Lengua | Moneda | Área | Población | Densidad |
---|---|---|---|---|---|
Londres | Inglés | GBP | 1,572.00 km2 | 8,416,535 | 5,354/km2 |
Washington | Inglés | USD | 177.0 km2 | 646,449 | 4,066/km2 |
Moscou | Ruso | RUB | 2,511 km2 | 11,503,501 | 4,581.24/km2 |
Nota que, en contraste con el elemento colgroup
, que agrupa las columnas temáticamente, el elemento col
no tiene ningún significado semántico. Su propósito es el de asignar atributos comunes a las columnas que representa, y se vuelve necesario debido a la estructura de las tablas en HTML, que consiste en un conjunto de filas (y no columnas) que contienen celdas.
Atributos
Atributos específicos
span
El número de columnas que abarcará el elemento (desde su posición y hacia la derecha) y que, por lo tanto, serán agrupadas y afectadas por otros atributos suyos. Cuando este atributo no está presente y el elemento no tiene elementos col
como hijos, afecta una sola columna.
Ejemplo
<col span="3" style="color: rgba(255, 128, 0,0.3);">
align
La alineación horizontal del texto en todas las celdas afectadas. Existen cinco valores posibles (insensibles a mayúsculas/minúsculas):
- left: el texto se alinea a la margen izquierda. Este es el valor predeterminado para celdas de datos (
td
). - center: el texto es centrado. Este es el valor predeterminado para celdas de encabezado (
th
). - right: el texto se alinea a la margen derecha.
- justify: el texto es justificado o alineado a ambas márgenes.
- char: el texto se alinea a un carácter específico. Se utiliza en conjunto con el atributo
char
.
Este atributo se ha vuelto obsoleto en HTML5 y, por lo tanto, su uso ya no es válido. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.
Ejemplo
<col span="2" align="center">
char
Un carácter que actuará como eje para la alineación del texto. Está pensado para trabajar junto con el atributo align
cuando presenta el valor "char". En otras situaciones será completamente ignorado.
Este atributo se ha vuelto obsoleto en HTML5 y su uso es consecuentemente inválido. Se aconseja a los autores reemplazarlo con declaraciones de hojas de estilo.
Ejemplo
<col align="char" char="c">
charoff
Un desplazamiento, desde la primera aparición del carácter de alineación (especificado en el atributo char
) y en la dirección del texto. El carácter resultante de este cálculo será el eje para la alineación del texto.
Para que este atributo sea considerado, el valor del atributo align
debe ser "char" y el atributo char
debe estar presente.
Este atributo es considerado obsoleto por HTML5 y su uso ya no es recomendado. Los autores deberían abandonar su uso en favor de las hojas de estilo.
Ejemplo
<col align="char" char="t" charoff="7">
valign
La alineación vertical del texto en todas las celdas afectadas. Existen cuatro valores posibles (insensibles a mayúsculas/minúsculas):
- top: el texto se alinea a la margen superior.
- middle: el texto es centrado verticalmente.
- bottom: el texto se alinea a la margen inferior.
- baseline: todas las celdas en una fila con esta misma alineación deberían tener su primera línea de texto en una línea base común.
Este atributo es obsoleto de acuerdo con el estándar HTML5 y, por lo tanto, inválido. Se aconseja a los autores evitar su uso y reemplazarlo con declaraciones de hojas de estilo.
Ejemplo
<col valign="top">
width
Un ancho para cada una de las columnas afectadas. Puede ser especificado en un número de píxeles, como un porcentaje o como un valor que representa una porción del espacio disponible.
Este atributo se ha vuelto obsoleto de acuerdo al estándar HTML5 y, por lo tanto, su uso ya no es válido. Se alienta a los autores a abandonar su uso en favor de las hojas de estilo.
Ejemplo
<col width="250">
Atributos globales
Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.
Eventos
Eventos globales
Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.