Question

Recently I saw some code like this:

<tr> 
     <th> Some label: </th>
     <td> <input type="text" value=""/> </td>
     <th> Another label: </th>
     <td> <input type="text" value=""/> </td>
</tr>

I am used to table headers being used like

<tr> 
     <th> Some label: </th>
     <th> Another label: </th>
</tr>
<tr>
     <td> <input type="text" value=""/> </td>
     <td> <input type="text" value=""/> </td>
</tr>

How are table headers supposed to be used? The first example above, lead me to some pretty funky formatting issues, and it seems like in example 1 <label> should be used in place of <th>.

Answer 1

Neither of them is correct. A header is used to provide the header for a table and not as a layout mechanism for form fields. As you mentioned I would use <label>. Tables should be used to present tabular data.

I am assuming that you copied the example to show how a <th> is actually used and don’t intend to use it for layout purposes. If that is the case then you are correct in your structuring and would recommend adding <thead> and <tbody> elements like so:

<table>
   <thead>
      <tr>
         <th>Heading 1</th>
         <th>Heading 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1 Col 1 Data</td>
         <td>Row 1 Col 2 Data</td>
      </tr>
      <tr>
         <td>Row 2 Col 1 Data</td>
         <td>Row 2 Col 2 Data</td>
      </tr>
   </tbody>
</table>

One advantage for this is that if your page spans multiple pages when you print it, the header will show up automatically on each page.

Note that there is aslo a <tfoot> element that you can use.