TableCloth: Bonitas Tablas mediante css y javascript

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.

PLAIN TEXT

JavaScript:

1. <link href=“tablecloth/tablecloth.css” rel=“stylesheet” type=“text/css” media=“screen” />

2. <script type=“text/javascript” src=“tablecloth/tablecloth.js”></script>

PLAIN TEXT

HTML:

1. <table cellspacing=“0″ cellpadding=“0″>

2.             <tr>

3.                 <th>Title</th>

4.                 <th>Title</th>

5.                 <th>Title</th>

6.                 <th>Title</th>

7.             </tr>

8.             <tr>

9.                 <td>Data</td>

10.                 <td>Data</td>

11.                 <td>Data</td>

12.                 <td>Data</td>

13.             </tr>

14.  

15.         </table>

PLAIN TEXT

HTML:

1. <table cellspacing=“0″ cellpadding=“0″>

2.             <tr>

3.                 <th>Title</th>

4.                 <th>Title</th>

5.                 <th>Title</th>

6.                 <th>Title</th>

7.                 <th>Title</th>

8.                 <th>Title</th>

9.                 <th>Title</th>

10.                 <th>Title</th>

11.                 <th>Title</th>

12.                 <th>Title</th>

13.                 <th>Title</th>

14.                 <th>Title</th>

15.             </tr>

16.             <tr>

17.                 <td>Data</td>

18.                 <td>Data</td>

19.                 <td>Data</td>

20.                 <td>Data</td>

21.                 <td>Data</td>

22.                 <td>Data</td>

23.                 <td>Data</td>

24.                 <td>Data</td>

25.                 <td>Data</td>

26.                 <td>Data</td>

27.                 <td>Data</td>

28.                 <td>Data</td>

29.  

30.         </table>

PLAIN TEXT

HTML:

1. <table cellspacing=“0″ cellpadding=“0″>

2.             <tr>

3.                 <th>Title</th>

4.                 <td>Data</td>

5.                 <td>Data</td>

6.                 <td>Data</td>

7.             </tr>

8.             <tr>

9.                 <th>Title</th>

10.                 <td>Data</td>

11.                 <td>Data</td>

12.                 <td>Data</td>

13.             </tr>

14.             <tr>

15.                 <th>Title</th>

16.                 <td>Data</td>

17.                 <td>Data</td>

18.                 <td>Data</td>

19.             </tr>

20.  

21.         </table>

PLAIN TEXT

HTML:

1. <table cellspacing=“0″ cellpadding=“0″>

2.             <tr>

3.                 <td>&nbsp;</td>

4.                 <th>Title</th>

5.                 <th>Title</th>

6.                 <th>Title</th>

7.             </tr>

8.             <tr>

9.                 <th>Title</th>

10.                 <td>Data</td>

11.                 <td>Data</td>

12.                 <td>Data</td>

13.             </tr>

14.             <tr>

15.                 <th>Title</th>

16.                 <td>Data</td>

17.                 <td>Data</td>

18.                 <td>Data</td>

19.             </tr>

20.  

21.         </table>

~ por inotony en Octubre 30, 2007.