Explicando <col />

Creo que poca gente sabe de la existencia de un elemento muy útil en HTML. Ese elemento es <col />, el cual sirve para asignar estilos a toda una columna en las tablas. Esto nos ahorra un montón de trabajo cuando queremos asignar estilos similares a una sola columna.

Consideremos el siguiente markup:

<table>
      <tr>
          <td>Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
     </tr>
     <tr>
           <td>Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
     <tr>
           <td>Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
</table>

Esto nos hace una tabla así:

Col 1 Col 2 Col 3
Col 1 Col 2 Col 3
Col 1 Col 2 Col 3

Ahora supongamos que queremos que toda la primer columna apareciera con un fondo de color diferente. Si somos como la mayoría de la gente, seguramente empezaríamos a poner una clase al primer elemento de cada tr:

<table>
      <tr>
          <td class="primerCol">Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
     </tr>
     <tr>
           <td class="primerCol">Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
     <tr>
           <td class="primerCol">Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
</table>

y luego en CSS haríamos lo siguiente:

.primerCol{
     background-color: olive;
}

Eso está bien, pero no es la forma más inteligente de hacerlo, ya que puede traer problemas cuando estemos editando nuestras tablas, además de que en una tabla gigante, con un montón de columnas,  donde cada columna tiene que tener sus propios estilos, hacer esto sería una pesadilla.  Es aquí donde el elemento <col /> entra en acción. Primero veamos el resultado que obtenemos con el código de arriba.

Col 1 Col 2 Col 3
Col 1 Col 2 Col 3
Col 1 Col 2 Col 3

Una mejor forma de hacerlo es usando <col />. Para usar col, tienes que tener un elemento col por cada columna en tu tabla, en este caso necesitamos tres elementos col:

<table>
      <col class="primerCol" />
      <col class="segCol" />
      <col class="terCol" />
      <tr>
          <td>Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
     </tr>
     <tr>
           <td>Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
     <tr>
           <td>Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
</table>

Y aplicamos estilos diferentes para cada columna:

.primerCol{
     background-color: olive;
}

Y no tenemos que hacer nada más.

De esta manera es mucho más fácil controlar los estilos de las columnas. Hay algunas cosas interesantes acerca de los elementos col. Por ejemplo, si usas firebug, fíjate en la pestaña de HTML y pon tu mouse sobre alguno de los elementos col y verás que se ilumina la columna a la que dicho elemento hace referencia. Esto resulta muy útil en ocasiones. Otra cosa a tomar en cuenta es que no es necesario poner todos los elementos col. En nuestro caso, por ejemplo, solo necesitamos el primero ya que los otros dos no nos estás siendo útiles para nada.

Espero que les sea de utilidad la información. Conoces algún elemento que crees poca gente sabe de su existencia?

4 thoughts on “Explicando <col />

    • Yo tampoco soy muy de tablas, pero hay momentos en los que son muy útiles. Espero que sigas visitandonos por acá.

Comments are closed.