<label> matricies of fields...

[dsharp]

So far all of the tutorials on using <label> focus on one specific scenario (ie. you have exactly one label for each field). How would you code for a table with the following structure (the numbers are text input fields):

                                                First Year    After Deferral
        Amount of Farm Operating Expenses:          500.00           2500.00
Amount of Farm Operating Interest Expense:           75.00            175.00
      Amount of Owner Withdrawals Expense:          200.00            150.00

I have a mandate to pass section 508 compliance testing, however I am at a loss as to how I can provide a <label> for each field when it's a combination of the column header and the row header together that describes the information in the field.

Any help would be appreciated.

[curtiss]

That's an extremely intriguing question. I'm not sure if there is an official answer or not.

However, here is a suggestion on how I would handle a situation like this:
Generate a unique label for each and every text input field. Do not use the row header as a label for anything. Then, make a CSS selector that looks something like:

table tr td label {
display: none;
}

I'll try to do a little more research to see if there is a better solution or not.

[happycoder]

I've never tried using <label> for a table. Interesting. I suppose you can try something like this:

'------------------------- HTML CODE

<ol>
<li>
  <label class="col1"></label>
  <label class="col2"></label>
  <label class="col3"></label>
</li>
<li>
  <label class="col1"></label>
  <label class="col2"></label>
  <label class="col3"></label>
</li>
</ol>

'------------------------- CSS CODE

ol {
  list-style: none;
}

li {
  float: left;
  display: inline;
}

li label .col1 {
  text-align: right;
  width: 20em;
}

li label .col2 {
  text-align: right;
  width: 10em;
}

li label .col3 {
  text-align: right;
}