8

TableCloth: Bonitas Tablas mediante css y javascript

Publicado por Nikko el dia 8 Oct 2007 - Guardado en 380 Views Javascript, Scripts, CSS 380 Views

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>

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!
comentarios
  1. TheDaVis Blog — Tablas con CSS y JavaScript: TableCloth - Gravatar

    TheDaVis Blog — Tablas con CSS y JavaScript: TableCloth

    8 - 10 - 2007

    Permalink

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

  2. Tablecloth « Fabrical Dreams - Gravatar

    Tablecloth « Fabrical Dreams

    8 - 10 - 2007

    Permalink

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

  3. Uttelierewhiz - Gravatar

    Uttelierewhiz

    8 - 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!

  4. Jan - Gravatar

    Jan

    8 - 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.



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: