Crear tablas con estilos CSS

Descripcion

A veces necesitamos hacer que una tabla tenga una buena presentación, pero sin necesidad de utilizar plugins avanzados. Digamos hacer que una tabla sea vea bien pero con conocimientos básicos de HTML, CSS y JavaScript, por decirlo de otro manera.

Entonces veamos como animar una Tabla usando solamente HTML y CSS.

Si lo que necesitas es hacer una tabla un poco más avanzada, puedes consultar DataTables de JQuery, aquí dejo una presentación de introducción Edición de tablas con JQuery.

Creando una tabla simple

Utilizando el estándar HTML5 la estructura general de una tabla debe quedar de la siguiente maneara.

<Doctype hmtl>
<html>
<head>
    <meta charset='utf-8' > 
    <title>Tabla Animada</title>
</head>
<body>
   <div class="Encabezado">
       <h3>Tabla Animada</h3>
   </div>
 <table>
   <thead>
     <tr>
       <th> # </th>
       <th>Nombre de Producto</th>
       <th>Precio unitario</th>
       <th>Cantidad</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td> 1 </td>
       <td>Refresco de Limón</td>
       <td> $12 </td>
       <td> 2 </td>
     </tr>
     <tr>
       <td> 2 </td>
       <td>Refresco de Toronja</td>
       <td> $11 </td>
       <td> 3 </td>
     </tr>
   </tbody>
   <tfoot>
     <tr>
       <td colspan="2"> Totales</td>
       <td class="PrecioTotal"> $23 </td>
       <td class="CantidadTotal"> 5 </td>
     </tr>
   </tfoot>
 </table>
</body>
</html>

Donde
<table></table> definen una tabla,
<thead></thead> la cabecera de la tabla,
<tr></tr> Una fila o reglón,
<th></th> un encabezado de columna
<tbody></tbody> el cuerpo de la tabla,
<td></td> una columna (también puede entenderse como celda o campo de tabla),
y <tfoot></tfoot> el pie de la tabla.

Para un novato en html es recomendable escribir linea por linea e ir viendo en el navegador el resultado de cada linea, para poder comprender como funciona la creación de una tabla.

Con lo anterior podremos conseguir los siguiente.

Agregando algo de estilo a la tabla

Para este ejemplo añadiremos los estilos con la etiqueta <style> la cual pondremos dentro de <head></head>

<style type="text/css">
   table {
        background: rgba(12, 20, 20, 30);
        width: 30%;
        margin: 0 auto;
        margin-top: 2%;
        border-collapse: collapse;
        text-align: center;
    }

    th {
        background-color: rgba(5, 5, 5, 95);
        height: 35px;
        border-bottom: 1px solid rgb(210, 220, 250);
        color: rgb(120, 120, 120);
    }

     td {
        color: rgba(100, 100, 100, 60);
        height: 30px;
     }

     tfoot {
        font-weight: bold;
     }
     .Cabecera {
        background-color: rgb(15, 15, 15);
        height: 30px;
        padding: 2px;
        padding: 1em 3em;
        margin: 1em 25%;
        border-radius: 4px;
        text-align: center;
        color: white;
   }
</style>

Con lo anterior conseguiremos dar algo de color a los elementos de la tabla. Pero como hacemos para identificar cada fila si los elementos son muchos, y las columnas aumentan.
Podemos utilizar el selector :hover con el cual podremos resaltar la fila por la que pase el puntero del ratón.
Entonces añadimos lo siguiente a nuestra hoja de estilos.

th:hover {
  background-color: rgba(20, 20, 20, 90);
}

tr:hover {
 background-color: rgba(15, 25, 25, 90);
}

.PrecioTotal:hover,
.CantidadTotal:hover {
 color: rgb(230, 50, 50);
}

A lo anterior se le agrego un estilo diferente a los elementos que contienen los totales, cuando se pasa sobre ellos.

Resultado

También puedes ver el ejemplo en el siguiente enlace Tabla básica con estilos CSS

See the Pen Tabla con estilos CSS by Jesus Tepec (@JesusTepec) on CodePen.

Curioseando en Programación

Buscar este blog

Entrada destacada

Como usar enums en Android, kotlin