Las tablas tienen que ser uno de los objetos más difíciles referente al estilo en la Web, la cantidad de detalles que tenemos que cuidar y la falta de compatibilidad entre navegadores pueden hacer que perdamos mucho tiempo en una sola tabla. Aquí es donde esta nota viene bien y podrán tener 1o diseños fáciles de implementar.

Lo primero: Creando una estructura válida para las tablas

En el artículo anterior vimos como obtener datos desde mysql y mostrarlos en una tabla, al final de este de forma simple y rápida podremos aplicar colores, medidas, alineación etc a través de estilos css.

2 ejemplos de css para tablas

tabla # 1

<table id="hor-minimalist-a" summary="Employee Pay Sheet">
    <thead>
        <tr>
            <th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
            <td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
            <td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
            <td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>

Employee	Salary	Bonus	Supervisor
Stephen C. Cox	$300	$50	Bob
Josephin Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

tabla # 2

<table id="background-image" summary="Meeting Results">
    <thead>
        <tr>
            <th scope="col">Employee</th>
            <th scope="col">Division</th>
            <th scope="col">Suggestions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">En IE 6 los usuarios no podrán ver el fondo transparente sin aplicar el hack</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Stephen C. Cox</td>
            <td>Marketing</td>
            <td>Make discount offers</td>
        </tr>
        <tr>
            <td>Josephin Tan</td>
            <td>Advertising</td>
            <td>Give bonuses</td>
        </tr>
        <tr>
            <td>Joyce Ming</td>
            <td>Marketing</td>
            <td>New designs</td>
        </tr>
        <tr>
            <td>James A. Pentel</td>
            <td>Marketing</td>
            <td>Better Packaging</td>
        </tr>
    </tbody>
</table>

Employee	Division	Suggestions
En IE 6 los usuarios no podrán ver el fondo transparente sin aplicar el hack
Stephen C. Cox	Marketing	Make discount offers
Josephin Tan	Advertising	Give bonuses
Joyce Ming	Marketing	New designs
James A. Pentel	Marketing	Better Packaging

Sé que apenas hemos visto lo mínimo a través de este artículo, por eso dejo el archivo fuente para que lo usen y hagan sus consultas si tienen dudas. Ustedes tienen la palabra. Descargar Archivos.

Artículos

• Validación de formularios usando características de HTML5
• Método para insertar registros en MySQL usando PHP
• Obtener datos desde MySQL y mostrar el resultado en una tabla
• Los colores y sus códigos RGB
• Cómo evitar los comentarios spam
• Creando un login simple con jquery, php y mysql
• Conversor de Medidas Online
• Visualizar datos en una tabla parte II: Aplicando estilo css
• Constanza Gonzalez: Mini Poesía
• Constanza Gonzalez: Ensayo - Sobre las Desiciones
• Un ejemplo de ABM usando Ajax - PHP - MySQL
• Usando jquery para modificar elementos del HTML
• Michelles Jaque
• Beatriz Cabrera Zapata
• Lista comercios asociados al CyberMonday 2015
• Cómo desarmar un notebook HP Compaq Presario C700
• Enviar correos desde localhost o sitio web con PHPMailer smtp
• Cuadro de busqueda instantanea en sitio web jquery-php
• Sistema de LogIn con verificacion de email y recuperacion de contraseña usando PHP
• Usar PDO para conectarse a MYSQL
• Proyecto Intranet: Ordenes de servicio y ventas
• Cómo detectar el navegador con JavaScript
• Demostración Jquery UI Selectable usando php y bases de datos mysql
• Subir, insertar, actualizar, borrar imágenes con PHP y MySQL
• Calculadora IMC usando JavaScript
• Select dependientes con Ajax MySQL PHP
• Expresiones regulares en PHP
• Visualizar datos en tabla html con mysqli