My code:

<table summary = "Overview of client's enrollment information" id = "client_info_table">
    <caption>Client Information</caption>
    <tbody id = "col1" class = "col">
        <tr>
            <th id = "client_name" class = "data_label">Client Name</th>
            <td>Jane Doe</td>
        </tr>
        <tr>
            <th id = "client_ssn" class = "data_label">
                Client <abbr title = "Social Security Number">SSN</abbr>
            </th>
            <td>508-12-1324</td>
        </tr>
        <tr>
            <th id = "client_date_enrolled" class = "data_label">Date Enrolled</th>
            <td>03/20/2010</td>
        </tr>
        <tr>
            <th id = "client_last_contact_date" class = "data_label">Last Contact Date</th>
            <td>04/01/2010</td>
        </tr>
    </tbody>
    <tbody id = "col2" class = "col">
        <tr>
            <th id = "client_address_1" class = "data_label">Address 1</th>
            <td>7222 Galvin Drive</td>
        </tr>
        <tr>
            <th id = "client_address_2" class = "data_label">Address 2</th>
            <td></td>
        </tr>
        <tr>
            <th id = "client_city" class = "data_label">City</th>
            <td>Omaha</td>
        </tr>
        <tr>
            <th id = "client_state" class = "data_label">
                State
            </th>
            <td><abbr title = "Nebraska">NE</abbr></td>
        </tr>
        <tr>
            <th id = "client_zip_code" class = "data_label">
                Zip Code
            </th>
            <td>68048</td>
        </tr>
    </tbody>
</table>

I tried giving .col a float: left value and that works great in FF but not IE. Any suggestions on how I can create this table so that I can split the data into two even columns while still maintaining accessibility?

2 answers

1
point

I don't believe having two <tbody> tags is allowed in a single table, and certainly isn't semantically correct for making a two-column super table with two columns inside those columns. You only need to worry about using <thead> and <tbody> when you're planning on having a very long, scrolly table or when you're planning on printing a table that will span multiple pages. However, it's not a bad idea to use them wherever possible, just in case that does happen to occur. This will be just as accessible to the user, but will have somewhat confusing markup at first: if you were to give a style to .address and render this page in a browser, it would become pretty clear.

<table summary="Overview of client's enrollment information" id="client_info_table">
    <caption>
        Client Information
    </caption>
    <colgroup>
        <col span="2" />
        <col span="2" class="address" />
    </colgroup>
    <thead>
        <tr>
            <th colspan="2" scope="colgroup">Identification</th>
            <th colspan="2" scope="colgroup">Address</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th id="client_name" class="data_label">Client Name</th>
            <td>Jane Doe</td>
            <th id="client_address_1" class="data_label">Address 1</th>
            <td>7222 Galvin Drive</td>
        </tr>
        <tr>
            <th id="client_ssn" class="data_label">Client <abbr title="Social Security Number">SSN</abbr> </th>
            <td>508-12-1324</td>
            <th id="client_address_2" class="data_label">Address 2</th>
            <td></td>
        </tr>
        <tr>
            <th id="client_date_enrolled" class="data_label">Date Enrolled</th>
            <td>03/20/2010</td>
            <th id="client_city" class="data_label">City</th>
            <td>Omaha</td>
        </tr>
        <tr>
            <th id="client_last_contact_date" class="data_label">Last Contact Date</th>
            <td>04/01/2010</td>
            <th id="client_state" class="data_label">State</th>
            <td><abbr title="Nebraska">NE</abbr></td>
        </tr>
        <tr>
            <td/>
            <td/>
            <th id="client_zip_code" class="data_label">Zip Code</th>
            <td>68048</td>
        </tr>
    </tbody>
</table>

The colgroup element will let you apply a style to all of the 3rd and 4th elements in a <tr>. You'd select it in your CSS just as if everything in the 2nd "column" had the class of, in this example, address. Equal height/width of the cells in the table can be accomplished easily in CSS, but if you're making the effort to use <abbr> tags, I'm sure you already know this ;)


Edit: On all the <th> tags, I noticed you've got a class of data_label, is this necessary? If it's for CSS purposes, could the <th> in question be selected less obtrusively as "tbody th"?

Answered over 6 years ago by Zack Doherty
  • "I don't believe having two <tbody> tags is allowed in a single table, and certainly isn't semantically correct for making a two-column super table with two columns inside those columns." This is incorrect. See the spec: http://www.w3.org/TR/html401/struct/tables.html#edef-TBODY superstringcheese over 6 years ago
Sisira 95
0
points

By default the table elements are inline-block for the display attribute. So you need to put something like this .col { display:block; float:left } Hope this will work out.

Answered over 6 years ago by Sisira
  • Actually, depending on which table element they are, they're not--in fact, none of them are specifically inline-block, though <td>'s do have most of the behavior of inline-block. <tr>s are specifically display: table-row, <td>s and <th>s are display: table-cell. This should still work, though. Zack Doherty over 6 years ago