Working with Tables

An example format/layout of the table...

<table>
   <caption>
      Some Caption Text
   </caption>
   <thead>
      <tr>
         <th scope="col">Col Header Text</th>
         <th scope="col">More Col Header Text</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row Text>
         <td>More Row Text</td>
      </tr>
      <tr>
         <td>Row Text>
         <td>More Row Text</td>
      </tr>
      <tr>
         <td>Row Text>
         <td>More Row Text</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td colspan="2">Footer Section>
      </tr>
   </tfoot>
</table>


Note...
The <th scope="col"> means that the header is a column header
If we used <th scope="row"> then it would be a row header
(Although you do not have to include the scope command...it's probably more use for screen readers)

For more information see Table Info

Result of an example format/layout of the table...

Some Caption Text
(MUST be directly after <table>)
see caption-side: for more

Col Header Text	More Col Header Text
Row Text	More Row Text
Row Text	More Row Text
Row Text*	More Row Text
Footer Section

Note

On other pages (eg contact.html) I align the text by using vertical-align: top; when I have a big area - like the Message Area when setting up emailing.
*To show this on this page the last Row Text (above) looks out of line as it uses vertical-align: top;