Búsqueda personalizada

CSS y Javascript: Creacion de Tablas

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>

     1517435087_3e01c0039a_o.jpg

    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>
    1517435095_2887ef88f3_o.jpg

    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>
    1517435103_9466dae2c9_o.jpg
    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>
    1517435107_e53119a127_o.jpg
    HTML:
    <table cellspacing=”0″ cellpadding=”0″>
                <tr>
                    <td>&nbsp;</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>

     

     

    Publicado en CSS, Desarrollo Web, Diseño, Javascript, Maquetación | No comments

    Déjanos tu comentario

    Por favor, sea educado sobre el tema. Tu email no será publicado.