TableCloth una pequeña librería javascript acompañada de un poco de css, que nos permitirá crear tablas de contenido con bonito estilo, efectos agradables, sumamente personalizable, y sobre todo sumamente fácil de implementar. Demo - Via kabytes
- Descargar el archivo, descomprimir y alojar toda la carpeta de nombre “tablecloth” que contiene los archivos tablecloth.css y tablecloth.js en la raíz tu sitio.
Hacemos la llamada a los archivos, incluyendo dentro de nuestra etiqueta < head > el siguiente código.
JavaScript:
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
HTML:
<table cellspacing="0" cellpadding="0">
<tr>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<tr>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
HTML:
<table cellspacing="0" cellpadding="0">
<tr>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</table>
<tr>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</table>
HTML:
<table cellspacing="0" cellpadding="0">
<tr>
<th>Title</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Title</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Title</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<tr>
<th>Title</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Title</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Title</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
HTML:
<table cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<th>Title</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Title</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<tr>
<td> </td>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<th>Title</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Title</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
Loading ...
TheDaVis Blog — Tablas con CSS y JavaScript: TableCloth
08-10-2007
Permalink
[...] Xyberneticos En: Recursos — Octubre 12, 2007 [...]
Tablecloth « Fabrical Dreams
08-10-2007
Permalink
[...] 17 10 2007 Vía Xyberneticos (me encanta la página) me encontré con una forma sencilla, ligera y “bonita” de [...]
Uttelierewhiz
08-10-2007
Permalink
hi girls
A wallpaper image can be in a JPEG or a GIF file format. The wallpapers have been divided into several categories listed below and they are all available in minimum 1024x768 resolution. You can download desktop wallpaper very fast.
Good search!
Jan
08-10-2007
Permalink
Gracias por el artículo. Realmente era lo que andaba buscando y si no era desde aquí (busqué en la categoría CSS) no lo iba a encontrar nunca. Quiero comentar a los blogueros que agregué fácilmente el estilo a un proyecto blog de Wordpress, ubicando la carpeta "Tablecloth" en la raíz de wordpress y haciendo la llamada desde el archivo "header.php" Luego simplemente hay que crear las tablas en la sección "code" de cada entrada y al publicar ya estarán funcionando los estilos en todas las tablas y en todas las entradas. Un verdadero lujo. Saludos.