TableCloth: Bonitas Tablas mediante css y javascript

Javascript, Scripts, CSS

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>

Compartelo

  1. User Gravatar

    TheDaVis Blog — Tablas con CSS y JavaScript: TableCloth said,

    Wrote on October 12, 2007 @ 7:06

    [...] Xyberneticos En: Recursos — Octubre 12, 2007 [...]

  2. User Gravatar

    Tablecloth « Fabrical Dreams said,

    Wrote on October 17, 2007 @ 2:49

    [...] 17 10 2007 Vía Xyberneticos (me encanta la página) me encontré con una forma sencilla, ligera y “bonita” de [...]

  3. User Gravatar

    Uttelierewhiz said,

    Wrote on February 9, 2008 @ 7:48

    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!

  4. User Gravatar

    Jan said,

    Wrote on March 1, 2008 @ 21:16

    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.

Seguir comentarios por RSS · TrackBack URI

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: