Bordes en tablas

intentalo con las CSS, ejemplo: <table style='border:1px solid blue;'>...</table> la declaracion CSS es el atributo style. esto solo es una pequea muestra, en CSS se puede hacer cosas mas complejas. prestale unos minutos de lectura al manual de CSS para que conozcas todas las posibilidades que puedes hacer...

No hay nada que me moleste ms que el menosprecio que se tienen a las tablas en XHTML. Menospreciarla en todos los sentidos, tanto como si la utilizaran como un elemento para realizar maquetas como cuando se menosprecia su uso creyendo que las pginas estndar no llevan tablas.

Realmente, las tablas son unos de los elementos que ms respeto debemos tener, sobre todo hay que concentrarse en un concepto: tabular data (datos tabulares). Las tablas fueron concebidas para representar datos de forma tabular, no porciones de una pgina en diferentes celdas. Entonces, cmo se aprovecha una tabla? Pues el primer paso es averiguando qu elementos juegan un papel primordial en ella y qu atributos la benefician.

Los elementos bsicos

Cmo todo elemento compuesto (ver <dl>, <ul>, <ol>) la etiqueta <table> slo funciona bien si tiene como hijos a otros elementos: <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>, <caption>, etc.

El elemento <table>
Este elemento es de primer nivel, esto significa que en la escala de etiquetas que escribes cuando inicias una tabla ste siempre tiene que estar al comienzo de todo, como en este ejemplo:

<table sumary="estadsticas de navegadores"> <thead> <tr> <th>Navegadores</th> </tr>

Es imprescindible saber que atributos te benefician a la hora de hacer una tabla limpia de elementos de presentacin y, para ser ms concreto, tienes que prescindir del atributo border="...", rules="...", frame="...", background="...", bgcolor="...", width="...", height="" (no usen esto por el amor de Dios), align="...". Hay dos tipos de atributos que son perfectamente reemplazables pero no dan muy buenos resultados en algunos navegadores modernos y menos en los antiguos, me refiero a cellpadding="..." y cellspacing="...". Para estos dos ltimos conviene mejor dejarlos con valor igual a cero (Ejem. cellpadding="0") y luego con CSS darle al grupo de celdas o cabeceras los espacios interiores deseados. Dentro del elemento table se pueden utilizar atributos de suma utilidad: sumary="...", title="...", class="...", id="...", lang="...". Estos atributos le darn buenas dosis de semntica a la tabla que vayis a crear. Les recomiendo aprenderse el valor de usarlas y aplicarlas siempre que puedan. Ahora les mostrar un ejemplo con todos los atributos, ustedes pueden copiar este cdigo y pegarlo en el editor de HTML favorito y observen los resultados:

<table summary="Esta tabla contiene los valores de uso de los navegadores en el sitio Minid.net"> <caption>Tabla de uso de navegadores</caption> <thead> <tr> <th>Navegador</th> <th>Agosto</th> </tr> </thead> <tfoot> <tr> <td colspan="2">Datos segn el sistema AWSTATS de Agosto.</td> </tr> </tfoot> <tbody> <tr> <td>Mozilla Firefox</td> <td>95%</td> </tr> <tr> <td>Internet Explorer 6</td> <td>5%</td> </tr> </tbody> </table>

Este cdigo les dar una tabla parecida a esta:

Tabla de uso de navegadores Navegador Agosto Datos segn el sistema AWSTATS de Agosto. Mozilla Firefox 95% Internet Explorer 6 5%

El atributo summary
Es interesante este atributo. Sirve para describir el sumario de la tabla.. Sirve para muchas cosas, pero la primera aplicacin que le encuentro es la comprensin que puede realizar un ordenador y aprovechar esa informacin para otras cosas. Para el usuario slo le queda ver las propiedades de esa tabla con su navegador favorito y ste le indica que contiene el sumario de esa tabla:

El elemento Caption
Si observan el modelo de tabla que hice en el ejemplo anterior de este artculo, podrn darse cuenta que he insertado el elemento <caption>. <caption> (del ingls caption, subttulo) sirve para poner un ttulo a la tabla. Este elemento tiene una reaccin grfica visible: se renderiza al comienzo de la tabla y puede ser formateado con CSS sin problemas, eso se los dejo a vuestra imaginacin. <caption> en cierta forma slo agrega un nivel ms de lectura y comprensin para nuestra tabla. no todas las tablas requieren un subttulo, pero tratndose de dar la mayor cantidad de informacin pueden usarla sabiamente.

Los elementos <thead> <tbody> <tfoot>

Estos elementos sirven para agrupar celdas y cabeceras de una tabla. Lgicamente una tabla renderiza estos elementos de forma visible, adems podemos comenzar escribiendo los datos de un pie de tabla (ver ejemplo) y estos saldrn a lo ltimo de todo. <thead> sirve para definir el grupo de celdas, cabeceras que saldrn en la primera lnea de la tabla, mientras que <tbody> es el cuerpo principal de los datos. Desconozco totalmente la aplicacin semntica de estos elementos en cuanto lectura de pantalla para discapacitados fuere, pero s s que existe una ventaja abrumadora a la hora de formatear celdas, lneas, y cabeceras usando CSS y las propiedades de cascada. Para que me entiendan bien sobre lo que estoy hablando, voy a poner un ejemplo claro: Si antes una tabla se compona solo de 3 elementos: <table>, <tr> y <td> cmo podemos diferenciar grupos de celdas con diferentes formatos usando CSS? En este caso nos veremos limitados, a tal punto que comenzaremos a ponerle clases a todas las celdas que queramos cambiar. Se pueden ver miles de ejemplos de tablas que requieren cientos de modificadores a niveles de cdigo para tener partes en otros colores, diferentes tipografas. Ahora, si agrupramos tablas en 3 subgrupos, podemos abrir un abanico de posibilidades. Pueden ver un ejemplo de una tabla que utilizo en este sitio para informar a mis lectores sobre las estadsticas de mi sitio. La tabla se caracteriza por tener una clase universal: class="compare". Con esa clase, ya diferencio una tabla especial para todas las comparaciones que quiera hacer, luego puedo hacer otra llamara class="lista-de-cosas y darle otro formato, color

Si observan esa tabla, vern que no tiene un gramo de atributos en el cdigo HTML, sin embargo con CSS y una adecuada seleccin de atributos podemos darle un formato final de calidad y muy extensible. Ahora les muestro lo simple que es un formato de CSS para la tabla compare que hice:

table.compare { width: 410px; border: 1px solid #999; margin: 0 auto 1em auto; } table.compare thead th { font: bold .7em/1.4em Verdana, sans-serif; color: #000; text-align: left; padding: .5em; background-color: #FFFFE1; } table.compare tbody th { font: .7em/1.4em Verdana, sans-serif; color: #000; text-align: left; padding: .5em; border-top: 1px solid #eee; background-color: #f9f9f9; } table.compare tfoot td { font: .7em/1.4em Verdana, sans-serif; color: #000; text-align: left; padding: .5em; border-top: 1px solid #eee; background-color: #f9f9f9; } table.compare tbody td { font: .7em/1.4em Verdana, sans-serif; color: #666; text-align: left; border-top: 1px solid #eee; padding: .5em; }

Razonando lo que acabo de presentarles se darn cuenta que incluso hasta ahorramos tiempo y golpes de tecla escribiendo cientos de reglitas de CSS para cada antojo que tenemos sobre una tabla

El elemento <th>
Importantsimo elemento en las tablas. Este elemento es para definir las cabeceras de una tabla. Para que os hagis una idea de lo que hablo, si en una tabla hay 12 celdas apiladas en 4 grupos de 3 celdas por lnea, cules de ellas podran diferenciarse como cabeceras de tablas y cules seran datos reales de la tabla? Es difcil saberlo sin que un humano tenga que comprender esa informacin. Para un robot en la web, que lee cdigo y lo analiza, esa tabla tiene directamente 12 celdas de datos estadsticos y no sabr diferenciar una celda de otra.

Navegador Internet Explorer Mozilla Opera

Abreviatura IE Moz Op

Popularidad Mucha Mucha Mucha

Esta tabla est hecha como mencionamos con 12 celdas, ninguna dice o afirma que las 3 primeras son cabeceras, dando como resultado una mala clasificacin y un problema aadido para los robots.

Navegador Internet Explorer Mozilla Opera

Abreviatura IE Moz Op

Popularidad Mucha Mucha Mucha

Esta tabla claramente diferencia las cabeceras, ayudando a los robots a diferenciar entre una cabecera descriptiva y los datos estadsticos de otras. Sin embargo no he utilizado ningn elemento extra como <strong> o <b>, slo he indicado que las cabeceras son <th>. Nunca olvides que cada elemento fue hecho para cumplir una misin, una mala aplicacin de los mismos te desviar del camino que quieres seguir.

El atributo abbr=""
Al igual que en el elemento en linea <abbr>, las cabeceras y las celdas pueden llevar un atributo interesante y de impacto semntico llamado abbr="". Ah puedes definir de forma extensa la abreviacin de una celda o una cabecera. Esto es ideal y prctico para aquellas tablas donde el espacio horizontal es limitado. Un ejemplo claro lo pueden ver en los calendarios que son creados en los weblogs: Donde Lu, Ma, Mie, Jue, Vie, Sap, Dom puede leerse y escucharse como Lunes, Martes, Mircoles, Jueves, Viernes, Sbado y Domingo. Para ello les mostrar este pedacito de cdigo que evidencia dicha propiedad:

<table summary="Calendario de notas escritas en el weblog minad.net"> <thead> <tr> <th abbr="Lunes">Lu</th>

<th abbr="Martes">Ma</th> ...

Es interesante ver las cuantiosas propiedades que se le pueden atribuir a una tabla. Este atributo reemplazara a la utilizacin del elemento <abbr> dentro de una celda. Imagino que se ha creado por una cuestin de practicidad y tambin de ahorro de caracteres por celda. Este ejemplo tambin sera vlido usando el elemento abbr:

<table summary="Calendario de notas escritas en el weblog minad.net"> <thead> <tr> <th><abbr title="Lunes">Lu</abbr></th> <th><abbr title="Martes">Ma</abbr></th> ...
Tanto el primero como el segundo son correctos, pero el primero es ms ameno para estos casos y tambin ayuda en el ahorro de escritura de caracteres por celda.

El elemento TD
Este elemento es el ms conocido y ms utilizado en el proceso de creacin de tablas. Realmente explicar qu hace me da pereza, pero intentar resumir su propsito: crear celdas de datos. Este elemento en s se diferencia de las cabeceras <th> por su valor neutro, digamos que, en la vida real, un <td> puede ser cualquier cosa pero un th siempre ser un elemento para definir el significado de una lnea o una columna.

Cmo formatear una tabla con CSS?

Cuando los desarrolladores tenan pensado darle vida a una tabla de HTML con colores y bordes por lo general recurran a las virtudes de los atributos del HTML. Utilizando bgcolor="..." por ejemplo se le daba color a una celda, lnea o un columna. Pero con la llegada y popularizacin de las hojas de estilos las cosas se extendieron de otra forma, trayendo ms ventajas que la simple utilizacin de atributos de HTML. La principal desventaja usar dichos atributos es:

Ms cdigo escrito en una tabla. Ms trabajo luego para cambiar de estilo. Ms peso en bytes en el documento. Tarda ms tiempo en renderizar una tabla.

Todo esto con CSS se anula de una forma increble, pero no todo el mundo sabe hacer esto, intentar mostrarles algunas formas que utilizo para ahorrarme de escribir muchas clases o hacer trucos extraos para darle una esttica buena a cualquier tabla.

Paso 1: Una tabla bien escrita en HTML

Es importante tener una tabla bien escrita en HTML para poder formatearla con CSS. Para ello me he servido de un ejemplo que haba visto en la web. Simplemente este modelo de tabla es lo ms chungo que he visto en 5 minutos de bsqueda en Google. El primer paso fue limpiar la tabla de todo tipo de etiqueta que he visto de ms. En el ejemplo Esto es una tabla chunga, podrn ver que han utilizado para comenzar atributos que no hacen ms que molestar y agregar peso a la tabla. Las cosas que borrar estn marcadas con nfasis:

<table border="0" cellpadding="0" cellspacing="0" width="480"> <tbody><tr> <td colspan="5" valign="top"><font size="2"><b>Tabla 3: </b>Ingredientes y porcentajes de las diferentes dietas (base fresca) (Ensayo 2)</font></td>
A los 5 minutos de mirar los datos de la tabla, ca en la cuenta que muchos datos de la misma se pueden representar de mejor forma, sin tener que hacer formas raras, el resultado de la cabecera fue:

<table class="ensayo" summary="Ingredientes y porcentajes de las diferentes dietas (base fresca [Ensayo 2])" cellspacing="0"> <caption>Ingredientes y porcentajes de dietas</caption> <tbody> <tr class="principal"> <th></th> <th>T</th> <th>V5</th> <th>V10</th> <th>V15</th> </tr> <tr class="etapas"> <th colspan="5">Etapa 0-35 <abbr title="Kilogramos">Kg.</abbr> peso vivo:</th> </tr>
Luego de limpiar la tabla un poco y dejando slo los <td> y los <tr>, paso a agregarles las etiquetas de agrupacin que antes haba mencionado: <thead>, <tbody> y <tfoot>.

Agregados de la tabla
Para finalizar el toque de la tabla, habr que escribir el sumario de la tabla usando el atributo summary="..." y ponerle un <caption> como se puede ver en este ejemplo:

<table summary="Ingredientes y porcentajes de las diferentes dietas (base fresca [Ensayo 2])" cellspacing="0"> <caption>Ingredientes y porcentajes de dietas</caption> <tbody>

Paso 2: Hojas de estilo

Una vez tengamos la tabla limpia y sin formatear, pasaremos a darle color con CSS. Como primer paso en esta aventura, le ponemos un nombre de clase a la tabla o si quieren, pueden tambin utilizar un ID nico (no conveniente si habr ms de una tabla por pgina).

<table class="ensayo" summary="Ingredientes y porcentajes de las diferentes dietas (base fresca [Ensayo 2])" cellspacing="0">
Es importante, que sepan que camino tomar: usando una clase o usando un ID, no vaya a ser que luego no valide la pgina o se les complique con otras cosas. Una vez terminadas la inclusin de la clase, pasamos a la hoja de estilo propia un archivo de CSS incluido en el servidor o escrito directamente en la misma pgina. En el ejemplo final, observarn que el CSS est en la misma pgina por cuestiones prcticas. Comenzar escribiendo primero las propiedades fsicas de la tabla: qu tamao va a tener, si tendr un borde externo, qu margenes tendr con respecto a otros elementos, etc.

table.ensayo { border: 1px solid #ccc; width: 500px; margin: 20px auto; }
Esto es lo que obtenemos de nuestra tabla llamada compare: borde nico de 1 pxel, ms una anchura de 500 pxeles y un margen superior de 20 pxeles y mrgenes automticos tanto para la derecha como la izquierda ahora prosigo a crear el resto de las cosas, como por ejemplo el elemento <caption>:

table.ensayo caption { font: bold 1em/1.5em "Trebuchet MS", Tahoma, Arial, sans-serif; color: #000; text-align: center; margin: 10px auto; }
El <caption> tendr una tipografa, con un color especial y estar centrado tambin con respecto a la tabla. Luego colorearemos las cabeceras y tambin les incluiremos un tipo de tipografa y paddings para ir dndole forma:

table.ensayo tbody tr.principal th { font: bold .9em/1.5em "Trebuchet MS", Tahoma, Arial, sans-serif; color: #fff; background: #5FACF3; text-align: left; padding: 5px; border: 0; }

table.ensayo tbody tr.etapas th { font: bold .9em/1.5em Trebuchet MS", Tahoma, Arial, sans-serif; color: #fff; background: #DC4503; text-align: left; padding: 5px; border-top: 1px solid #eee; } table.ensayo tbody th { font: bold .9em/1.5em Trebuchet MS", Tahoma, Arial, sans-serif; color: #DC4503; background: #FEFFF1; text-align: left; padding: 5px; border-top: 1px solid #eee; }
Siempre me gusta darle toques de lneas suaves y colores pasteles a las celdas y a las cabeceras ponerles colores un poco ms saturados y oscuros, pero es una cuestin de gusto personal (que cambia con el tiempo), ustedes pueden hacer las pruebas que quieran. Como han observado, todava no he escrito una clase particular para una celda, slo hice (porque este caso es bastante especial) una clase para diferenciar un tipo de linea <tr> de otras, para poder tener dos tipos de cabeceras <th> de diferente color tr.etapas (que en HTML se traduce en <tr class="etapas">). Ahora slo me queda estilizar las celdas normales:

table.ensayo tbody td { font: .9em/1.5em "Trebuchet MS", Tahoma, Arial, sans-serif; color: #666; background: #fff; text-align: left; padding: 5px; border-top: 1px dotted #eee; }
Nuestra tabla ensayo debera quedar como esta que tengo en mi servidor.

Resumen de la leccin
Esta tabla de ejemplo que les he mostrado tiene cambios significativos de todo tipo, desde los mencionados hasta mejoras semnticas como normalizacin de las etiquetas, cabeceras, agrupacin de datos. De todas formas, me hubiera gustado ms cambiar los modelos de datos, presentarlos quizs en otro orden, pero esto era slo un ejemplo. Pueden ver la tabla original y la terminada.

Debes tratar de evitar a la hora de hacer tablas...

Hay muchas cosas que podemos obviarnos a la hora de crear tablas. Debemos abstenernos de hacer cosillas raras como esta:

<tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr>

Eso renderizado en el navegador sera una lnea de 4 celdas con un caracter de espacio apret la tecla de la barra espaciadora que cumple la funcin de separar una linea de la tabla de otra evita hacer esto por favor!. Qu hacer en este caso? Pues se pueden hacer varias alternativas, la ms cmoda ponerle una clase al elemento <tr class="..."> del conjunto de celdas que quieras separar y ahi mismo en el css le indicas una regla que diga algo as:

tr.espaciada td { padding-bottom: 10px; }

Es preferible eso a tener que renderear ms celdas; ms los caracteres y, sobre todo, arruinar el sentido semntico de la tabla. No se olviden que las tablas son elementos delicados que se leen de muchas formas en los lectores para discapacitados.

Otra churrera muy comn:

<tr align="justify" valign="top">, <td align="center"> todas estas propiedades de una tabla estn obsoletas cuando aparece CSS. Limitando slo a escribir los tags, agrupndolos correctamente y escribiendo reglas de cascada o herencia como Dios manda se podrn tener buenas tablas.

El maldito bgcolor="..."
Esta propiedad del HTML se ha ganado mi odio. Sobre todo por la inutilidad de la misma. Slo deja especificar un color a una celda, linea o toda una tabla entera. Esto es algo por supuesto reemplazable en CSS, de tal forma que no se imaginan las cosas que se le puede aplicar a una celda con propiedades de CSS desde una imgen hasta un piln de colores. Por eso NO UTILICES ESTA PROPIEDAD DE HTML BAJO NINGN CONCEPTO.

No seas border
No uses el atributo border="...", te conviene usar una propiedad de CSS.

Centrar una tabla

Algo super cotidiano y digno de un estmago invertido es el fanatismo que tiene la gente por centrar las tablas con mtodos raros:

<center> <table cellpadding="0" cellspacing="0"align="center> <tr> <td><span class="titulo">Ttulo</span></td>

ni align="center", ni <center>, ni <div class="center" ni leches, mejor utilizar CSS para estos casos.

Dios bendito treme el famoso spacer.gif

Hace 3 aos todos hacamos esta tcnica: utilizbamos un archivo de 1 x 1 pxel para acomodar y espaciar objetos dentro de nuestra pgina. Hoy en da te recomiendo que mires otras opciones. Cuando utilizamos CSS, podemos indicarle a cualquier etiqueta (con o sin clases y ID) qu distancias tiene que tener con respecto a otros elementos dentro de una misma lnea o mismo bloque. Esto sirve ms que nada para acomodar cualquier cosa de forma nativa, sin necesidad de tener que ponerle a una pgina 5 o 10 imgenes de 1 pxel. Muchos sabrn que a ms fragmentacin exista dentro de una pgina ms tarda en cargar, renderizarse, etc. Por eso, ejemplos como ste se pueden mejorar con 2 o 3 cambios en las plantillas de CSS:

<table width="770" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle" bgcolor="35A5DB"><img src="images/spacer.gif" width="10" height="10"><img src="images/spacer.gif width="1? height="1?></td> </tr>
La clave siempre est en comenzar a prescindir de dichas imgenes y pasar a una modelacin total de cada objeto con CSS, de modo que si queremos cambiar la posicin de algn objeto lo hacemos modificando nmero en una simple hoja de estilo y no borrando y agregando una decena de imgenes.

Fin de la gua
Ahora es cuestin de que se vayan a la pgina del W3C y terminen de aclarar cualquier duda tcnica. Tambin pueden realizar preguntas en este artculo escribiendo comentarios (NOTA: en la web del autor). Hacer tablas buenas nunca fu tan fcil.