martinpulido.com - Blog sobre programacion front, xhtml, css, estándares y accesibilidad web.

Bien, en esta segunda parte del artículo trabajaremos la presentación de las tablas e inicialmente vamos a retirar el atrubuto border que insertamos en la primera parte.

La tabla con la que vamos a trabajar tiene el siguiente código:

<table summary="Tabla de productos y precios">
    <caption align="top">Tabla de productos</caption>
    <tr>
        <th scope="col">Producto</th>
        <th scope="col">Precio</th>
    </tr>
    <tr>
        <td>Mouse USB </td>
        <td>25,00 €</td>
    </tr>
    <tr>
        <td>Teclado Ergonómico </td>
        <td>30,00 €</td>
    </tr>
    <tr>
        <td>Monitor 17" </td>
        <td>450,00 €</td>
    </tr>
</table>

En un navegador, esa tabla aparecerá sin bordes y no podremos ver exactamente cómo es su presentación, pero si visualizamos esa tabla con un editor visual de HTML tendremos una idea de cómo está siendo representada.

Existe un pequeño cellpadding (atributo de espacio internto entre celdas) y cellspacing (atributo de espacio entre una celda y otra) por defecto. Lo que vamos a hacer es alterar esos espacios con una CSS.

INSERTANDO BORDES
Vamos a usar el siguiente código CSS para insertar bordes en nuestra tabla:

.tablas{
  border-color: #990000;
  border-style: solid;
  border-width: 1px;
}
.tablas th, .tablas td{
  border-color: #6633CC;
  border-style: solid;
  border-width: 1px;
}

Observaciones: Hemos evitado usar las propiedades resumidas CSS para que el código sea más legible y comprensible. Por supuesto, si tienes un buen dominio de la sintaxis CSS puedes escribirlo como quieras.

Antes de visualizar la tabla modificada es necesario insertar el atributo class con el valor ‘tablas’ dentro del tag <table>:

<table class="tabelas" summary="Tabla de productos y precios">

Ahora podemos ver el resultado:

Hemos colocado los colores azul y rojo para diferenciar bien las celdas y la tabla. El tag <th> a pesar de actuar como cabecera también se trata como una celda de presentación.

Vamos a resolver el problema del espaciamiento insertando la propiedad ‘border-colapse’ en la clase ‘.tablas’

.tablas{
    border-color: #990000;
    border-style: solid;
    border-width: 1px;
    border-collapse:collapse;
}

En algunos navegadores que son más fieles a las especificaciones la tabla se mostrará sin el borde rojo:

En IE la tabla se mostrará con un borde externo rojo y un borde azul interno:

Para evitar este tipo de problemas, define siempre los bordes de la tabla y celdas del mismo color:

.tablas{
  border-color: #6633CC;
  border-style: solid;
  border-width: 1px;
  border-collapse:collapse;
  }
.tablas th, .tablas td{
  border-color: #6633CC;
  border-style: solid;
  border-width: 1px;
}

CAMBIANDO LA CABECERA
Cambiar la cabecera en nuestra tabla es muy sencillo. Ya que usamos una estructura más optimizada como la etiqueta <th></th> solamente basta con alterar las propiedades CSS de esta etiqueta. Vamos a insertar un background gris para la cabecera. Para ello vamos a insertar el siguiente CSS:

.tablas th{
  background-color:#CCCCCC;
}

Resultado:

ALTERANDO EL CAPTION
El caption por defecto está centrado. Puede tener su propio background, alineamiento, fuente, etc. Existe una propiedad CSS, caption-side, que permite realizar una modificación de la posición del caption, pero en algunas pruebas solo funcionó en Firefox. Vamos a cambiar un poco nuestro caption:

.tablas caption{
  text-align: left;
  color:#0000CC;
  font-weight: bold;
}

ALTERNAR COLOR A LAS FILAS
Para crear el efecto visual de filas alternas, vamos a crear dos clases con propiedades de background diferentes:

.tablas .lineaAzul{
  background-color:#E6F3FF;
}
.tablas .lineaGris{
  background-color:#eeeeee;
}

Para visualizar una modificación es necesario insertar el atributo class en las etiquetas <tr>:

<table class="tablas" summary="Tabla de productos y precios">
    <caption align="top">Tabla de Productos</caption>
    <tr>
        <th scope="col">Producto</th>
        <th scope="col">Precio</th>
    </tr>
    <tr class="lineaGris">
        <td>Mouse USB </td>
        <td>25,00 €</td>
    </tr>
    <tr class="lineaAzul">
        <td>Teclado Ergonómico </td>
        <td>30,00 €</td>
    </tr>
    <tr class="lineaGris">
        <td>Monitor 17" </td>
        <td>450,00 €</td>
    </tr>
</table>

AJUSTES FINALES
Sigue abajo el código con algunas modificaciones de espaciamiento y fuentes:

.tablas{
  border-color: #6633CC;
  border-style: solid;
  border-width: 1px;
  border-collapse:collapse;
}
.tablas th, .tablas td{
  border-color: #6633CC;
  border-style: solid;
  border-width: 1px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  padding: 3px;
}
.tablas th{
 background-color:#CCCCCC;
}
.tablas caption{
  text-align: left;
  color:#0000CC;
  font-weight: bold;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  padding-bottom: 7px;
}
.tablas .lineaAzul{
  background-color:#E6F3FF;
}
.tabelas .lineaGris{
  background-color:#eeeeee;
}

CONSIDERACIONES FINALES
Nuestro ejemplo ha sido muy simple y podemos aplicarlo en tablas con mayor cantidad de información. Los editores HTML crean una presentación errónea de tablas generando atributos de presentación. Cuando utilices editores de HTML busca optimizar el código manualmente.

Artículo Original: Tabelas Semânticamente Corretas (Parte 02)