Bordes y fondos de tablas HTML

Una vez hayas elegido la cantidad de celdas de una tabla HTML5, el espacio que ocupan cada una de ellas, puedes pasar a configurar su aspecto. Por defecto el color de los bordes y fondo es transparente, pero existen varios atributos para modificar su apariencia. Para ello tenemos dos atributos dedicados al fondo de las tablas, "blackground" y "bgcolor", y tres atributos a diseñar el tipo de bordes que se desean: "border", "frame" y "rules". Los cinco estaban ya plenamente desarrollado en la versión HTML4, y para cada uno de ellos tienes que aplicar diferentes valores o atributos para que funcionen a la perfección.

Atributo "Background": Permite insertar una imagen de fondo en la tabla, o en la celda, señalando la URL de la fotografía o imagen que queremos mostrar. Para ello es necesario que esta imagen este online, subida a algún servidor de Internet. Alguien que tuviera su propia página Web lo subiria a una carpeta FTP, pero si escribes en Blogger lo normal es usar la galería de imágenes de Picassa, u otro servicio gratis similar.

Atributo "Bgcolor": Especifica el color de fondo a la celda, la línea o la tabla. Por ello puede ir detrás del elemento Table, TD o TR. Para hacerlo de forma precisa se usa un número de 6 cifras, que incluye también algunas letras, el valor RGB. Por ejemplo el #000000, es el negro y el #ffffff, el blanco. En realidad lo que se indica es el valor para tres canales de color (azul, verde y rojo, tal y como puede verse en la imagen de arriba) en un sistema numérico hexadecimal en vez de en la escala decimal. Con el valor #000000, los tres canales están al mínimo 00, 00 y 00.

Además hay 16 colores que también se pueden usar escribiendo su nombre en vez de la numeración que les corresponde: cyan #00ffff (azul claro), black #000000 (negro), blue #0000ff (azul oscuro),  fucsia #ff00ff (rosa intenso), gray #808080 (gris oscuro), green #008000 (verde oscuro), lime #00ff00 (verde claro), marrón #800000 (granate), navy #000080 (Azul marino, muy oscuro), olive #808000 (verde oliva), purple #800080 (purpura, morado), red #ff0000 (rojo), silver #c0c0c0 (plata, gris claro), teal #008080 (verde azulado), white #ffffff (amarillo), yellow #ffff00 amarillo.

Atributo "Border": Sirve para definir la anchura de los bordes. Se ha de incluir un valor númerico a partir del 1, detrás del tag "table". Con un ejemplo nos quedará más claro el efecto de este atributo sobre la tabla HTML. Aplicamos el siguiente código con tres anchos diferentes: 1, 3 y 8.

<table witdht="100", border="3"><tbody><td><tr>
tabla con borde=3
</tr></td></tbody></table>

tabla con border=1

tabla con border=3

tabla con border=8

Atributo "Frame": Sirve para dar un valor al borde externo de una tabla. De esta forma podemos elegir que no aparezca el recuadro externo, con la etiqueta "void", que se muestren los cuatro lados con "box" o "border", o que se muestren algunos de ellos.
above: Sólo aparece el borde de arriba de la tabla HTML.
below: Sólo se dibuja el de abajo.
lhs: Se ve sólo el lado izquierdo.
rhs: Se muestra el lado derecho
hsides: Se mostrarán las dos líneas horizontales del borde externo, arriba y abajo.
vsides: Aparecen sólo los bordes verticales, a izquierda y derecha.

Atributo "Rules": Con él podemos imponer reglas a los bordes internos, para que algunos se muestren y otros queden transparentes.
all: Se mostrarán todos los bordes internos
none: no se coloca ningún borde interior.
groups: Sólo se ven los bordes en las celdas que han sido agrupadas.
rows: Se muestran bordes entre filas.
cols: Los bordes separar las columnas, los de las filas no aparecen

Imagen: en dominio público.