各种样式的table 及代码

转载

mob604756ea4c07 2017-02-07 23:49:00

文章标签 table html css i++ ruby 文章分类 代码人生

1.模板一

各种样式的table 及代码_css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>    
            *{
                margin: 0;padding: 0;
            }
            body {
                font-family: Georgia, serif;
                font-size: 20px;
                font-style: italic;
                font-weight: normal;
                letter-spacing: normal;
                background: #f0f0f0;
            }
            #content {
                background-color: #fff;
                width: 750px;
                padding: 40px;
                margin: 0 auto;
                margin: 0px auto;
                -moz-box-shadow: 0px 0px 16px #aaa;
            }
            .head {
                font-family: Helvetica, Arial, Verdana;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 12px;
                font-style: normal;
                letter-spacing: 3px;
                color: #888;
                border-bottom:3px solid #f0f0f0;
                padding-bottom: 10px;
                margin-bottom: 10px;
            }
            .head a {
                color: #1D81B6;
                text-decoration:none;
                float:right;
                text-shadow:1px 1px 1px #888;
            }
            .head a: hover {
                color: #f0f0f0;
            }
            #content h1 {
                font-family: "Trebuchet MS", sans-serif;
                color: #1D81B6;
                font-weight:normal;
                font-style:normal;
                font-size:56px;
                text-shadow:1px 1px 1px #aaa;
            }
        </style>
        <style>
            /* Table 1 Style */
            table.table1{
                font-family: "Trebuchet MS", sans-serif;
                font-size: 16px;
                font-weight: bold;
                line-height: 1.4em;
                font-style: normal;
                border-collapse:separate;
            }
            .table1 thead th{
                padding:15px;
                color:#fff;
                text-shadow:1px 1px 1px #568F23;
                border:1px solid #93CE37;
                border-bottom:3px solid #9ED929;
                background-color:#9DD929;
                background:-webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0.02, rgb(123,192,67)),
                    color-stop(0.51, rgb(139,198,66)),
                    color-stop(0.87, rgb(158,217,41))
                    );
                background: -moz-linear-gradient(
                    center bottom,
                    rgb(123,192,67) 2%,
                    rgb(139,198,66) 51%,
                    rgb(158,217,41) 87%
                    );
                -webkit-border-top-left-radius:5px;
                -webkit-border-top-right-radius:5px;
                -moz-border-radius:5px 5px 0px 0px;
                border-top-left-radius:5px;
                border-top-right-radius:5px;
            }
            .table1 thead th:empty{
                background:transparent;
                border:none;
            }
            .table1 tbody th{
                color:#fff;
                text-shadow:1px 1px 1px #568F23;
                background-color:#9DD929;
                border:1px solid #93CE37;
                border-right:3px solid #9ED929;
                padding:0px 10px;
                background:-webkit-gradient(
                    linear,
                    left bottom,
                    right top,
                    color-stop(0.02, rgb(158,217,41)),
                    color-stop(0.51, rgb(139,198,66)),
                    color-stop(0.87, rgb(123,192,67))
                    );
                background: -moz-linear-gradient(
                    left bottom,
                    rgb(158,217,41) 2%,
                    rgb(139,198,66) 51%,
                    rgb(123,192,67) 87%
                    );
                -moz-border-radius:5px 0px 0px 5px;
                -webkit-border-top-left-radius:5px;
                -webkit-border-bottom-left-radius:5px;
                border-top-left-radius:5px;
                border-bottom-left-radius:5px;
            }
            .table1 tfoot td{
                color: #9CD009;
                font-size:32px;
                text-align:center;
                padding:10px 0px;
                text-shadow:1px 1px 1px #444;
            }
            .table1 tfoot th{
                color:#666;
            }
            .table1 tbody td{
                padding:10px;
                text-align:center;
                background-color:#DEF3CA;
                border: 2px solid #E7EFE0;
                -moz-border-radius:2px;
                -webkit-border-radius:2px;
                border-radius:2px;
                color:#666;
                text-shadow:1px 1px 1px #fff;
            }
            .table1 tbody span.check::before{
                content : url(images/check0.png)
            }
        </style>
    </head>
    <body>
        <div id="content">
            
            <table class="table1">
                <thead>
                    <tr>
                        <th></th>
                        <th scope="col" abbr="Starter">Smart Starter</th>
                        <th scope="col" abbr="Medium">Smart Medium</th>
                        <th scope="col" abbr="Business">Smart Business</th>
                        <th scope="col" abbr="Deluxe">Smart Deluxe</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th scope="row">Price per month</th>
                        <td>$ 2.90</td>
                        <td>$ 5.90</td>
                        <td>$ 9.90</td>
                        <td>$ 14.90</td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <th scope="row">Storage Space</th>
                        <td>512 MB</td>
                        <td>1 GB</td>
                        <td>2 GB</td>
                        <td>4 GB</td>
                    </tr>
                    <tr>
                        <th scope="row">Bandwidth</th>
                        <td>50 GB</td>
                        <td>100 GB</td>
                        <td>150 GB</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <th scope="row">MySQL Databases</th>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <th scope="row">Setup</th>
                        <td>19.90 $</td>
                        <td>12.90 $</td>
                        <td>free</td>
                        <td>free</td>
                    </tr>
                    <tr>
                        <th scope="row">PHP 5</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">Ruby on Rails</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
                </tbody>
            </table>
        
        </div>
    </body>
</html>

template-1

2.模板二

各种样式的table 及代码_css_04

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>    
            *{
                margin: 0;padding: 0;
            }
            body {
                font-family: Georgia, serif;
                font-size: 20px;
                font-style: italic;
                font-weight: normal;
                letter-spacing: normal;
                background: #f0f0f0;
            }
            #content {
                background-color: #fff;
                width: 750px;
                padding: 40px;
                margin: 0 auto;
                margin: 0px auto;
                -moz-box-shadow: 0px 0px 16px #aaa;
            }
            .head {
                font-family: Helvetica, Arial, Verdana;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 12px;
                font-style: normal;
                letter-spacing: 3px;
                color: #888;
                border-bottom:3px solid #f0f0f0;
                padding-bottom: 10px;
                margin-bottom: 10px;
            }
            .head a {
                color: #1D81B6;
                text-decoration:none;
                float:right;
                text-shadow:1px 1px 1px #888;
            }
            .head a: hover {
                color: #f0f0f0;
            }
            #content h1 {
                font-family: "Trebuchet MS", sans-serif;
                color: #1D81B6;
                font-weight:normal;
                font-style:normal;
                font-size:56px;
                text-shadow:1px 1px 1px #aaa;
            }
        </style>
        <style>
            /* Table 2 Style */
            table.table2{
                font-family: Georgia, serif;
                font-size: 18px;
                font-style: normal;
                font-weight: normal;
                letter-spacing: -1px;
                line-height: 1.2em;
                border-collapse:collapse;
                text-align:center;
            }
            .table2 thead th, .table2 tfoot td{
                padding:20px 10px 40px 10px;
                color:#fff;
                font-size: 26px;
                background-color:#222;
                font-weight:normal;
                border-right:1px dotted #666;
                border-top:3px solid #666;
                -moz-box-shadow:0px -1px 4px #000;
                -webkit-box-shadow:0px -1px 4px #000;
                box-shadow:0px -1px 4px #000;
                text-shadow:1px 1px 1px #000;
            }
            .table2 tfoot th{
                padding:10px;
                font-size:18px;
                text-transform:uppercase;
                color:#888;
            }
            .table2 tfoot td{
                font-size:36px;
                color:#EF870E;
                border-top:none;
                border-bottom:3px solid #666;
                -moz-box-shadow:0px 1px 4px #000;
                -webkit-box-shadow:0px 1px 4px #000;
                box-shadow:0px 1px 4px #000;
            }
            .table2 thead th:empty{
                background:transparent;
                -moz-box-shadow:none;
                -webkit-box-shadow:none;
                box-shadow:none;
            }
            .table2 thead :nth-last-child(1){
                border-right:none;
            }
            .table2 thead :first-child,
            .table2 tbody :nth-last-child(1){
                border:none;
            }
            .table2 tbody th{
                text-align:right;
                padding:10px;
                color:#333;
                text-shadow:1px 1px 1px #ccc;
                background-color:#f9f9f9;
            }
            .table2 tbody td{
                padding:10px;
                background-color:#f0f0f0;
                border-right:1px dotted #999;
                text-shadow:-1px 1px 1px #fff;
                text-transform:uppercase;
                color:#333;
            }
            .table2 tbody span.check::before{
                content : url(images/check1.png)
            }
        </style>
    </head>
    <body>
        <div id="content">
            
            <table class="table2">
                <thead>
                    <tr>
                        <th></th>
                        <th scope="col" abbr="Starter">Smart Starter</th>
                        <th scope="col" abbr="Medium">Smart Medium</th>
                        <th scope="col" abbr="Business">Smart Business</th>
                        <th scope="col" abbr="Deluxe">Smart Deluxe</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th scope="row">Price per month</th>
                        <td>$ 2.90</td>
                        <td>$ 5.90</td>
                        <td>$ 9.90</td>
                        <td>$ 14.90</td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <th scope="row">Storage Space</th>
                        <td>512 MB</td>
                        <td>1 GB</td>
                        <td>2 GB</td>
                        <td>4 GB</td>
                    </tr>
                    <tr>
                        <th scope="row">Bandwidth</th>
                        <td>50 GB</td>
                        <td>100 GB</td>
                        <td>150 GB</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <th scope="row">MySQL Databases</th>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <th scope="row">Setup</th>
                        <td>19.90 $</td>
                        <td>12.90 $</td>
                        <td>free</td>
                        <td>free</td>
                    </tr>
                    <tr>
                        <th scope="row">PHP 5</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">Ruby on Rails</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
                </tbody>
            </table>
            
        </div>
    </body>
</html>

template-2

3.模板三

各种样式的table 及代码_table_07

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>    
            *{
                margin: 0;padding: 0;
            }
            body {
                font-family: Georgia, serif;
                font-size: 20px;
                font-style: italic;
                font-weight: normal;
                letter-spacing: normal;
                background: #f0f0f0;
            }
            #content {
                background-color: #fff;
                width: 750px;
                padding: 40px;
                margin: 0 auto;
                margin: 0px auto;
                -moz-box-shadow: 0px 0px 16px #aaa;
            }
            .head {
                font-family: Helvetica, Arial, Verdana;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 12px;
                font-style: normal;
                letter-spacing: 3px;
                color: #888;
                border-bottom:3px solid #f0f0f0;
                padding-bottom: 10px;
                margin-bottom: 10px;
            }
            .head a {
                color: #1D81B6;
                text-decoration:none;
                float:right;
                text-shadow:1px 1px 1px #888;
            }
            .head a: hover {
                color: #f0f0f0;
            }
            #content h1 {
                font-family: "Trebuchet MS", sans-serif;
                color: #1D81B6;
                font-weight:normal;
                font-style:normal;
                font-size:56px;
                text-shadow:1px 1px 1px #aaa;
            }
            #content h2 {
                font-family: "Trebuchet MS", sans-serif;
                font-size: 34px;
                font-style: normal;
                background-color: #f0f0f0;
                margin: 40px 0px 30px -40px;
                padding: 0px 40px;
                clear: both;
                float: left;
                width: 100%;
                color: #aaa;
                text-shadow: 1px 1px 1px #fff;
            }
        </style>
        <style>
            /* Table 3 Style */
            table.table3{
                font-family:Arial;
                font-size: 18px;
                font-style: normal;
                font-weight: normal;
                text-transform: uppercase;
                letter-spacing: -1px;
                line-height: 1.7em;
                text-align:center;
                border-collapse:collapse;
            }
            .table3 thead th{
                padding:6px 10px;
                text-transform:uppercase;
                color:#444;
                font-weight:bold;
                text-shadow:1px 1px 1px #fff;
                border-bottom:5px solid #444;
            }
            .table3 thead th:empty{
                background:transparent;
                border:none;
            }
            .table3 thead :nth-child(2),
            .table3 tfoot :nth-child(2){
                background-color: #7FD2FF;
            }
            .table3 tfoot :nth-child(2){
                -moz-border-radius:0px 0px 0px 5px;
                -webkit-border-bottom-left-radius:5px;
                border-bottom-left-radius:5px;
            }
            .table3 thead :nth-child(2){
                -moz-border-radius:5px 0px 0px 0px;
                -webkit-border-top-left-radius:5px;
                border-top-left-radius:5px;
            }
            .table3 thead :nth-child(3),
            .table3 tfoot :nth-child(3){
                background-color: #45A8DF;
            }
            .table3 thead :nth-child(4),
            .table3 tfoot :nth-child(4){
                background-color: #2388BF;
            }
            .table3 thead :nth-child(5),
            .table3 tfoot :nth-child(5){
                background-color: #096A9F;
            }
            .table3 thead :nth-child(5){
                -moz-border-radius:0px 5px 0px 0px;
                -webkit-border-top-right-radius:5px;
                border-top-right-radius:5px;
            }
            .table3 tfoot :nth-child(5){
                -moz-border-radius:0px 0px 5px 0px;
                -webkit-border-bottom-right-radius:5px;
                border-bottom-right-radius:5px;
            }
            .table3 tfoot td{
                font-size:38px;
                font-weight:bold;
                padding:15px 0px;
                text-shadow:1px 1px 1px #fff;
            }
            .table3 tbody td{
                padding:10px;
            }
            .table3 tbody tr:nth-child(4) td{
                font-size:26px;
                font-weight:bold;
            }
            .table3 tbody td:nth-child(even){
                background-color:#444;
                color:#444;
                border-bottom:1px solid #444;
                background:-webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0.39, rgb(189,189,189)),
                    color-stop(0.7, rgb(224,224,224))
                    );
                background:-moz-linear-gradient(
                    center bottom,
                    rgb(189,189,189) 39%,
                    rgb(224,224,224) 70%
                    );
                text-shadow:1px 1px 1px #fff;
            }
            .table3 tbody td:nth-child(odd){
                background-color:#555;
                color:#f0f0f0;
                border-bottom:1px solid #444;
                background:-webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0.39, rgb(85,85,85)),
                    color-stop(0.7, rgb(105,105,105))
                    );
                background:-moz-linear-gradient(
                    center bottom,
                    rgb(85,85,85) 39%,
                    rgb(105,105,105) 70%
                    );
                text-shadow:1px 1px 1px #000;
            }
            .table3 tbody td:nth-last-child(1){
                border-right:1px solid #222;
            }
            .table3 tbody th{
                color:#696969;
                text-align:right;
                padding:0px 10px;
                border-right:1px solid #aaa;
            }
            .table3 tbody span.check::before{
                content : url(images/check2.png)
            }
        </style>
    </head>
    <body>
        <div id="content">

            <table class="table3">
                <thead>
                    <tr>
                        <th></th>
                        <th scope="col" abbr="Starter">Smart Starter</th>
                        <th scope="col" abbr="Medium">Smart Medium</th>
                        <th scope="col" abbr="Business">Smart Business</th>
                        <th scope="col" abbr="Deluxe">Smart Deluxe</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th scope="row">Price per month</th>
                        <td>$ 2.90</td>
                        <td>$ 5.90</td>
                        <td>$ 9.90</td>
                        <td>$ 14.90</td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <th scope="row">Storage Space</th>
                        <td>512 MB</td>
                        <td>1 GB</td>
                        <td>2 GB</td>
                        <td>4 GB</td>
                    </tr>
                    <tr>
                        <th scope="row">Bandwidth</th>
                        <td>50 GB</td>
                        <td>100 GB</td>
                        <td>150 GB</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <th scope="row">MySQL Databases</th>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                        <td>Unlimited</td>
                    </tr>
                    <tr>
                        <th scope="row">Setup</th>
                        <td>19.90 $</td>
                        <td>12.90 $</td>
                        <td>free</td>
                        <td>free</td>
                    </tr>
                    <tr>
                        <th scope="row">PHP 5</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
                    <tr>
                        <th scope="row">Ruby on Rails</th>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                        <td><span class="check"></span></td>
                    </tr>
                </tbody>
            </table>
        
        </div>
    </body>
</html>

template-3

4.模板四

各种样式的table 及代码_i++_10

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body { 
                margin:0; 
                padding:20px; 
                font:13px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
                }
                
            /* ---- Some Resets ---- */
            
            p,
            table, caption, td, tr, th {
                margin:0;
                padding:0;
                font-weight:normal;
                }
            
            /* ---- Paragraphs ---- */
            
            p {
                margin-bottom:15px;
                }
                
            /* ---- Table ---- */
            
            table {
                border-collapse:collapse;
                margin-bottom:15px;
                width:90%;
            }
            
            caption {
                text-align:left;
                font-size:15px;
                padding-bottom:10px;
            }
            
            table td,
            table th {
                padding:5px;
                border:1px solid #fff;
                border-width:0 1px 1px 0;
            }
            
            thead th {
                background:#91c5d4;
            }
                
            thead th[colspan],
            thead th[rowspan] {
                background:#66a9bd;
            }
            
            tbody th,
            tfoot th {
                text-align:left;
                background:#91c5d4;
            }
            
            tbody td,
            tfoot td {
                text-align:center;
                background:#d5eaf0;
            }
            
            tfoot th {
                background:#b0cc7f;
            }
            
            tfoot td {
                background:#d7e1c5;
                font-weight:bold;
            }
                
            tbody tr.odd td { 
                background:#bcd9e1;
            }
        </style>
        <script src="js/jquery-1.2.6.min.js"></script>
        <script>
            $(document).ready(function () {
               
                $('tbody tr').hover(function() {
                  $(this).addClass('odd');
                }, function() {
                  $(this).removeClass('odd');
                });
                
            });
        </script>
    </head>
    <body>
        <table id="travel">
            
            <caption>Travel patterns in London - Travel times to work by main mode (Autumn 2006) - Minutes</caption>
            
            <thead>    
                <tr>
                    <th scope="col" rowspan="2">Main mode</th>
                    <th scope="col" colspan="6">Area of workplace</th>
                </tr>
                
                <tr>
                    <th scope="col">Central London</th>
                    <th scope="col">Rest of Inner London</th>
                    <th scope="col">Outer London</th>
                    <th scope="col">All London</th>
                    <th scope="col">Rest of Great Britain</th>
                    <th scope="col">Great Britain</th>
                </tr>        
            </thead>
            
            <tfoot>
                <tr>
                    <th scope="row">All modes</th>
                    <td>55</td>
                    <td>39</td>
                    <td>27</td>
                    <td>39</td>
                    <td>20</td>
                    <td>23</td>
                </tr>
            </tfoot>
            
            <tbody>
                <tr class="">
                    <th scope="row">Car and van</th>
                    <td>48</td>
                    <td>32</td>
                    <td>25</td>
                    <td>29</td>
                    <td>20</td>
                    <td>20</td>
                </tr>
                
                <tr class="">
                    <th scope="row">Motorbike, moped, scooter</th>
                    <td>36</td>
                    <td>29</td>
                    <td>27</td>
                    <td>31</td>
                    <td>19</td>
                    <td>21</td>
                </tr>
                
                <tr class="">
                    <th scope="row">Bicycle</th>
                    <td>33</td>
                    <td>24</td>
                    <td>20</td>
                    <td>25</td>
                    <td>15</td>
                    <td>17</td>
                </tr>
                
                <tr>
                    <th scope="row">Bus and coach</th>
                    <td>47</td>
                    <td>39</td>
                    <td>36</td>
                    <td>40</td>
                    <td>33</td>
                    <td>34</td>
                </tr>
                
                <tr class="">
                    <th scope="row">National Rail</th>
                    <td>69</td>
                    <td>66</td>
                    <td>43</td>
                    <td>66</td>
                    <td>47</td>
                    <td>58</td>
                </tr>
                
                <tr class="">
                    <th scope="row">Underground, tram, light rail</th>
                    <td>49</td>
                    <td>45</td>
                    <td>37</td>
                    <td>47</td>
                    <td>42</td>
                    <td>46</td>
                </tr>
                
                <tr class="">
                    <th scope="row">Walk</th>
                    <td>21</td>
                    <td>16</td>
                    <td>13</td>
                    <td>15</td>
                    <td>12</td>
                    <td>13</td>
                </tr>
                
            </tbody>
        
        </table>
    </body>
</html>

template-4

5.模板五

各种样式的table 及代码_ruby_13

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        /* general styles */
        table, td{
            font:100% Arial, Helvetica, sans-serif; 
        }
        table{width:100%;border-collapse:collapse;margin:1em 0;}
        th, td{text-align:left;padding:.5em;border:1px solid #fff;}
        th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;}
        td{background:#e5f1f4;}
        
        /* tablecloth styles */
        
        tr.even td{background:#e5f1f4;}
        tr.odd td{background:#f8fbfc;}
        
        th.over, tr.even th.over, tr.odd th.over{background:#4a98af;}
        th.down, tr.even th.down, tr.odd th.down{background:#bce774;}
        th.selected, tr.even th.selected, tr.odd th.selected{}
        
        td.over, tr.even td.over, tr.odd td.over{background:#ecfbd4;}
        td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;}
        td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;}
        
        /* use this if you want to apply different styleing to empty table cells*/
        td.empty, tr.odd td.empty, tr.even td.empty{background:#fff;}
    </style>
    <script>
        this.tablecloth = function(){
    
            // CONFIG 
            
            // if set to true then mouseover a table cell will highlight entire column (except sibling headings)
            var highlightCols = true;
            
            // if set to true then mouseover a table cell will highlight entire row    (except sibling headings)
            var highlightRows = false;    
            
            // if set to true then click on a table sell will select row or column based on config
            var selectable = true;
            
            // this function is called when 
            // add your own code if you want to add action 
            // function receives object that has been clicked 
            this.clickAction = function(obj){
                //alert(obj.innerHTML);
                
            };
        
        
            
            // END CONFIG (do not edit below this line)
            
            
            var tableover = false;
            this.start = function(){
                var tables = document.getElementsByTagName("table");
                for (var i=0;i<tables.length;i++){
                    tables[i].onmouseover = function(){tableover = true};
                    tables[i].onmouseout = function(){tableover = false};            
                    rows(tables[i]);
                };
            };
            
            this.rows = function(table){
                var css = "";
                var tr = table.getElementsByTagName("tr");
                for (var i=0;i<tr.length;i++){
                    css = (css == "odd") ? "even" : "odd";
                    tr[i].className = css;
                    var arr = new Array();
                    for(var j=0;j<tr[i].childNodes.length;j++){                
                        if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
                    };        
                    for (var j=0;j<arr.length;j++){                
                        arr[j].row = i;
                        arr[j].col = j;
                        if(arr[j].innerHTML == "&nbsp;" || arr[j].innerHTML == "") arr[j].className += " empty";                    
                        arr[j].css = arr[j].className;
                        arr[j].onmouseover = function(){
                            over(table,this,this.row,this.col);
                        };
                        arr[j].onmouseout = function(){
                            out(table,this,this.row,this.col);
                        };
                        arr[j].onmousedown = function(){
                            down(table,this,this.row,this.col);
                        };
                        arr[j].onmouseup = function(){
                            up(table,this,this.row,this.col);
                        };                
                        arr[j].onclick = function(){
                            click(table,this,this.row,this.col);
                        };                                
                    };
                };
            };
            
            // appyling mouseover state for objects (th or td)
            this.over = function(table,obj,row,col){
                if (!highlightCols && !highlightRows) obj.className = obj.css + " over";  
                if(check1(obj,col)){
                    if(highlightCols) highlightCol(table,obj,col);
                    if(highlightRows) highlightRow(table,obj,row);        
                };
            };
            // appyling mouseout state for objects (th or td)    
            this.out = function(table,obj,row,col){
                if (!highlightCols && !highlightRows) obj.className = obj.css; 
                unhighlightCol(table,col);
                unhighlightRow(table,row);
            };
            // appyling mousedown state for objects (th or td)    
            this.down = function(table,obj,row,col){
                obj.className = obj.css + " down";  
            };
            // appyling mouseup state for objects (th or td)    
            this.up = function(table,obj,row,col){
                obj.className = obj.css + " over";  
            };    
            // onclick event for objects (th or td)    
            this.click = function(table,obj,row,col){
                if(check1){
                    if(selectable) {
                        unselect(table);    
                        if(highlightCols) highlightCol(table,obj,col,true);
                        if(highlightRows) highlightRow(table,obj,row,true);
                        document.onclick = unselectAll;
                    }
                };
                clickAction(obj);         
            };        
            
            this.highlightCol = function(table,active,col,sel){
                var css = (typeof(sel) != "undefined") ? "selected" : "over";
                var tr = table.getElementsByTagName("tr");
                for (var i=0;i<tr.length;i++){    
                    var arr = new Array();
                    for(j=0;j<tr[i].childNodes.length;j++){                
                        if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
                    };                            
                    var obj = arr[col];
                    if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css;         
                };
            };
            this.unhighlightCol = function(table,col){
                var tr = table.getElementsByTagName("tr");
                for (var i=0;i<tr.length;i++){
                    var arr = new Array();
                    for(j=0;j<tr[i].childNodes.length;j++){                
                        if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j])
                    };                
                    var obj = arr[col];
                    if(check3(obj)) obj.className = obj.css; 
                };
            };    
            this.highlightRow = function(table,active,row,sel){
                var css = (typeof(sel) != "undefined") ? "selected" : "over";
                var tr = table.getElementsByTagName("tr")[row];        
                for (var i=0;i<tr.childNodes.length;i++){        
                    var obj = tr.childNodes[i];
                    if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css;         
                };
            };
            this.unhighlightRow = function(table,row){
                var tr = table.getElementsByTagName("tr")[row];        
                for (var i=0;i<tr.childNodes.length;i++){
                    var obj = tr.childNodes[i];            
                    if(check3(obj)) obj.className = obj.css;             
                };
            };
            this.unselect = function(table){
                tr = table.getElementsByTagName("tr")
                for (var i=0;i<tr.length;i++){
                    for (var j=0;j<tr[i].childNodes.length;j++){
                        var obj = tr[i].childNodes[j];    
                        if(obj.className) obj.className = obj.className.replace("selected","");
                    };
                };
            };
            this.unselectAll = function(){
                if(!tableover){
                    tables = document.getElementsByTagName("table");
                    for (var i=0;i<tables.length;i++){
                        unselect(tables[i])
                    };        
                };
            };    
            this.check1 = function(obj,col){
                return (!(col == 0 && obj.className.indexOf("empty") != -1));
            }
            this.check2 = function(active,obj){
                return (!(active.tagName == "TH" && obj.tagName == "TH")); 
            };
            this.check3 = function(obj){
                return (obj.className) ? (obj.className.indexOf("selected") == -1) : true; 
            };    
            
            start();
            
        };
        
        /* script initiates on page load. */
        window.onload = tablecloth;
    </script>
    <body>
        <div id="container">
            <h1>Tablecloth: Example</h1>
            <div id="content">
                <h2>Table with top headings</h2>
                <table cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr class="odd">
                            <th>Title</th>
                            <th>Title</th>
                            <th>Title</th>
                            <th class="">Title</th>
                        </tr>
                        <tr class="even">
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="odd">
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="even">
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="odd">
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                    </tbody>
                </table>
                <table cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr class="odd">
                            <th class="">Title</th>
                            <th class="">Title</th>
                            <th class="">Title</th>
                            <th class="">Title</th>
                            <th class="">Title</th>
                            <th class="">Title</th>
                            <th class="">Title</th>
                            <th class="">Title</th>
                            <th class="">Title</th>
                            <th class="">Title</th>
                            <th class="">Title</th>
                            <th class="">Title</th>
                        </tr>
                        <tr class="even">
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="odd">
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="even">
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="odd">
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="even">
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="odd">
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="even">
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                    </tbody>
                </table>
                <h2>Table with side headings</h2>
                <table cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr class="odd">
                            <th class="">Title</th>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="even">
                            <th class="">Title</th>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="odd">
                            <th class="">Title</th>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="even">
                            <th class="">Title</th>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="odd">
                            <th class="">Title</th>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                    </tbody>
                </table>
                <h2>Table with top and side headings</h2>
                <table cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr class="odd">
                            <td class=" empty">&nbsp;</td>
                            <th class="">Title</th>
                            <th class="">Title</th>
                            <th class="">Title</th>
                        </tr>
                        <tr class="even">
                            <th class="">Title</th>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="odd">
                            <th class="">Title</th>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="even">
                            <th class="">Title</th>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="odd">
                            <th class="">Title</th>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                        <tr class="even">
                            <th class="">Title</th>
                            <td class="">Data</td>
                            <td class="">Data</td>
                            <td class="">Data</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>