Cuando tenemos que mostrar una tabla con una gran cantidad de datos y varias columnas es útil tener el nombre de las columnas de la tabla a la vista para poder diferenciar los datos de forma rápida sin tener que volver a la cabecera de la tabla.

Con una simple tabla HTML no podremos hacer esto, pero si le añadimos algo de jQuery podremos hacerlo.

Podríamos programar un pequeño script en jQuery para hacer esta función, pero habiendo muchos plugins ya desarrollados que hacen esta tarea, ¿para qué perder más tiempo?.

El plugin del que vamos a hablar es jQuery Thead.

Este plugin es totalmente gratuito tanto para uso personal como comercial, bajo licencias MIT y GPL.

Su uso es realmente sencillo:

Añadimos la librería jQuery:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Añadimos la librería de jQuery Thead:

<script type="text/javascript" src="jquery.thead-1.1.min.js"></script>

Y por último, una vez cargada la página, le decimos en qué tabla queremos activar el plugin.

$(function() {
       $('.miTabla').thead();
});

Y listo, nuestra tabla con la clase «miTabla» tendrá las cabeceras siempre visibles, por mucho scroll que hagamos en la tabla.

Podéis obtener más información y ver un demo en su página oficial:

http://www.asual.com/jquery/thead/samples/