Unidad 6. Tablas (VII)

6.7. Agrupar columnas con colgroup y col

Dar formato a una fila es sencillo ya que basta con asignar el formato a la etiqueta tr correspondiente, sin embargo dar formato a una columna es un poco más complicado pues no tenemos una etiqueta que defina las columnas.

Una columna está formada por las celdas que ocupan la misma posición, por ejemplo, la segunda columna la forman todas las celdas que están en la segunda posición, una forma de dar formato a la columna segunda sería asignar una clase a todas las celdas que están en la segunda posición, esto puede servir para tablas pequeñas pero para tablas grandes hay otra solución mediante las etiquetas colgroup y col.

Con la etiqueta <colgroup> se especifica un grupo de una o más columnas, y con la etiqueta <col> se especifican las columnas concretas, con el atributo span podemos agrupar columnas contiguas, en este caso lo más claro es verlo con un ejemplo.

Para dar color gris (lightgrey) a la primera columna y color verde claro (aquamarine) a las dos siguientes columnas escribimos este código:

<colgroup >
  <col  style="background-color: lightgrey">
  <col span="2" style="background-color: aquamarine">
</colgroup>

El resultado es este:

El código completo de la tabla es este:

<table>
<colgroup >
   <col  style="background-color: lightgrey">
   <col span="2" style="background-color: aquamarine">
</colgroup>
<tr>
<td> fila 1. col.1</td>
<td> fila 1. col.2</td>
<td> fila 1. col.3</td>
<td> fila 1. col.4</td>
</tr>
<tr>
<td> fila 2. col.1</td>
<td> fila 2. col.2</td>
<td> fila 2. col.3</td>
<td> fila 2. col.4</td>
</tr>
<tr>
<td> fila 3. col.1</td>
<td> fila 3. col.2</td>
<td> fila 3. col.3</td>
<td> fila 3. col.4</td>
</tr>
</table>

 Cursos Informática Gratuitos