www.webdeveloper.com
Results 1 to 4 of 4

Thread: Table: Need to generate comlex th

  1. #1
    Join Date
    Jun 2005
    Location
    United Kingdom
    Posts
    1,043

    Table: Need to generate complex th

    I have a series of dynamically driven tables, generated according to various parameters. I don't think they are as accessible as they should be, and would like some advice.

    There are 3 different entry pages to create a table - this is as good as any. You make a selection on this page, followed by another on the next, and then a table is generated.

    I can introduce a table caption and summary easily. But I can't figure how to arrange the <th> tags.

    At the moment my latest attempt at the coding looks something like this:
    Code:
    <table width="512" summary="This table shows the
     sizes of blinds possible with a XXXXX tube and a XXXX drive.">
      <caption>
      BLIND SIZES POSSIBLE WITH A XXXXX TUBE AND XXXX DRIVE
      </caption>
            <colgroup align="right"></colgroup>
        <colgroup align="center"></colgroup>
        <colgroup align="center"></colgroup>
        <colgroup align="center"></colgroup>
        <colgroup align="center"></colgroup>
        <thead valign="top">
        <tr>
          <th style="text-align:left; font-weight:normal;      font-size:.7em;">Drop</th>
          <th style="text-align:center; font-weight:normal; font-size:.7em;">500</th>
          <th style="text-align:center; font-weight:normal; font-size:.7em;">800</th>
          <th style="text-align:center; font-weight:normal; font-size:.7em;">1000</th>
          <th style="text-align:center; font-weight:normal; font-size:.7em;">1200</th>
        </tr>
         </thead>
          <tr>
            <td>200</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            </tr>
            <tr>
            <td>400</td>
            <td>X</td>
             <td>X</td>
             <td>X</td>
             <td>X</td>
           </tr>
           <tr>
              <td>600</td>
              <td>X</td>
              <td>X</td>
              <td>X</td>
              <td>X</td>
            </tr>
            <tr>
               <td>800</td>
               <td>X</td>
               <td>X</td>
               <td>X</td>
               <td>X</td>
            </tr>
            <tr>
               <td>1000</td>
               <td>X</td>
               <td>X</td>
               <td>X</td>
               <td>X</td>
              </tr>
    </table>
    But what I think is needed is a 4-column wide heading called "width" above
    the specific width-value ("600", "800" etc) headings. In other words, like my present size tables - but meeting accessibility criteria.

    Is that possible?
    Last edited by kiwibrit; 11-26-2005 at 02:18 PM. Reason: typo correction

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Quote Originally Posted by kiwibrit
    Is that possible?
    Certainly. Just make good use of the TBODY and THEAD elements and the "abbr", "axis" and "headers" attributes. See http://www.w3.org/TR/html401/struct/tables.html .
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  3. #3
    Join Date
    Jun 2005
    Location
    United Kingdom
    Posts
    1,043
    Thank you. I think that will do the trick. I'll play with that tomorrow.

  4. #4
    Join Date
    Jun 2005
    Location
    United Kingdom
    Posts
    1,043
    OK, changing the code relating to <thead> and <th> to:
    Code:
                    <thead valign="top">
                    <tr>
                        <th>Drop</th>
                        <th colspan="4">Width</th>
                    </tr>
                    <tr><th>&nbsp;</th>
                        <th>500</th>
                        <th>800</th>
                        <th>1000</th>
                        <th>1200</th>
                    </tr>
                    </thead>
    gets what I want visually, passes the w3c validator, and passes watchfire

    Are there any practical problems for accessibility with using &nbsp; as I have - and in having the 4-column span "Width" <th> sitting on top of the "400", "600","800", and "1000" <th>s?

    Here's a test page sample, it would need a tidy up of the styling - but it shows the idea.
    Last edited by kiwibrit; 11-27-2005 at 03:11 AM. Reason: Link added to show sample page

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles