Plugin jQuery para darle estilo a sus tablas html

En este artículo vamos a mencionar la existencia de un script de código abierto que te permite estilizar tus tablas html a través de jQuery.

Para utilizar este plugin necesitaremos utilizar la librería jQuery, el plugin styletable y los estilos necesarios que incluiremos en el <head> de nuestra página.

<link rel="stylesheet" type="text/css" href="SyntaxHighlighter.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="styletable.jquery.plugin.js"></script>

Para añadir los estilos a nuestras tablas deberemos también incluir en el <head> de nuestra página algo como lo que sigue:

$('table#table2').styleTable({
            th_bgcolor: '#3E83C9',
            th_color: '#ffffff',
            th_border_color: '#333333',
            tr_odd_bgcolor: '#ECF6FC',
            tr_even_bgcolor: '#ffffff',
            tr_border_color: '#95BCE2',
            tr_hover_bgcolor: '#BCD4EC'
        });

Después en el <body> añadir como id de nuestras tablas id=»table2″. Además de esto, las cabeceras de la tabla deberán contener las etiquetas <thead><th></th></thead>.

Para ver con más claridad su funcionalidad y como utilizarlo puedes ver los ejemplos en funcionamiento.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(2 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

6 respuestas a “Plugin jQuery para darle estilo a sus tablas html”

  1. Carlos dice:

    Quisiera saber, si es posible, como se alinean los texto a la izquierda, derecha o centro, gracias.

    • Jose Aguilar dice:

      Hola,

      Puedes probar agregando algo como lo que sigue en tu hoja de estilos (CSS). Debes aplicar a las celdas el siguiente atributo:

      text-align:center;

      Saludos

  2. christian dice:

    como me bajo los archivos para las tablas

  3. Casey Mcclymonds dice:

    I think this internet site has got very excellent written subject material posts.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre