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:
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>

PLAIN TEXT
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>

PLAIN TEXT
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>

PLAIN TEXT
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>

PLAIN TEXT
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>