How do I create borders around tbody/thead sections of a table?

Question

I am attempting to create a page with tabular data, which must appear as multiple tables. I have two conflicting requirements to get around, however:

1. Each table m

Answer 1

Go with the method for creating the genuine tables, then try this.

I would just go with creating separate tables. Let's suppose each table looks like this:

<table>
    <thead>
        <tr>
            <th class="column_1">Header 1</th>
            <th class="column_2">Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        ...
    </tbody>
</table>

Then, use jQuery to set the width:

var columnOneWidth = 0; var columnTwoWidth = 0;

$(document).ready( function() {
    $(".column_1").each( function() {
        if( $(this).css("width") > columnOneWidth ) columnOneWidth = $(this).css("width");
    });
    $(".column_2").each( function() {
        if( $(this).css("width") > columnTwoWidth ) columnTwoWidth = $(this).css("width");
    });

    $(".column_1").css({width: columnOneWidth + "px"});
    $(".column_2").css({width: columnTwoWidth + "px"});
});

All you have to do is include the jQuery Javascript file (available from jquery.com) in your head tag:

<script type="text/javascript" src="scripts/my_jquery_file.js"></script>

Answer 2

use <table rules="groups"> or similar values for rules

see http://www.w3.org/TR/html4/struct/tables.html#h-11.3.1