Uso de tablas con css

No hay nada que me moleste más 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 páginas estándar no llevan tablas.

Realmente, las tablas son unos de los elementos que más respeto debemos tener, sobre todo hay que concentrarse en unconcepto: tabular data (datos tabulares). Las tablas fueron concebidas para representar datos de forma tabular, no porciones de una página en diferentes celdas.
Entonces, ¿cómo 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 básicos
Cómo todo elemento compuesto (ver , , ) la etiqueta  sólofunciona bien si tiene como hijos a otros elementos: , , , , , , , etc.
El elemento
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:

Navegadores

…
Es imprescindible saber que atributos te benefician a la hora de hacer una tabla limpia de elementos depresentación y, para ser más 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 refieroa 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 darán buenas dosis de semántica a latabla que vayáis 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 código y pegarlo en el editor de HTML favorito y observen los resultados:

Tabla de uso de navegadores

Navegador
Agosto

Datos según el sistema
AWSTATS de Agosto.

Mozilla Firefox
95%

Internet Explorer6
5%

Este código les dará una tabla parecida a esta:
Tabla de uso de navegadores |
Navegador | Agosto |
Datos según 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 aplicación que le encuentro es la comprensiónque puede realizar un ordenador y aprovechar esa información para otras cosas. Para el usuario sólo 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 artículo, podrán darse cuenta que he insertado el elemento .  (del inglés caption,subtítulo) sirve para poner un título a la tabla. Este elemento tiene una reacción gráfica visible: se renderiza al comienzo de la tabla y puede ser formateado con CSS sin problemas, eso se los dejo a vuestra imaginación.
 en cierta forma sólo agrega un nivel más de lectura y comprensión para nuestra tabla. no todas las tablas requieren un subtítulo, pero tratándose de dar la mayor cantidad deinformación pueden usarla sabiamente.
Los elementos 
Estos elementos sirven para agrupar celdas y cabeceras de una tabla. Lógicamente una tabla renderiza estos elementos de forma visible, además podemos comenzar escribiendo los datos de un pie de tabla (ver ejemplo) y estos saldrán a lo último de todo.
 sirve para definir el grupo de celdas, cabeceras que saldrán en la primera línea de la...