Tables

Tables are often misused for layout; they should of course only be used for tabular data. 

<table>
  <caption>
     Correlation of attendance to final grade
  </caption>
  <thead>
     <tr>
        <th>Name</th>
        <th>Attendance</th>
        <th>Grade</th>
     </tr>
  </thead>
  <tfoot>
     <tr>
        <td colspan="3">Survey conducted for the past 30 years!</td>
     </tr>
  </tfoot>
  <tbody>
     <tr>
        <td>Joe Blogs</td>
        <td>100%</td>
        <td>First</td>
     </tr>
     <tr>
        <td>Fred Busybud</td>
        <td>50%</td>
        <td>third</td>
     </tr>
     <tr>
        <td colspan="2">Span across … two columns</td>
        <td>column 3</td>
     </tr>
  </tbody>
</table>
Correlation of attendance to final grade
Name Attendance Grade
Survey conducted for the past 30 years!
Joe Blogs 100% First
Fred Busybud 50% third
Span across … TWO columns! column 3
  1. Note the anatomy of a table includes a thead, tfoot and tbody.
  2. Tables are defined a row at a time where tr is a table row and td a table column!
  3. The table above defines rows with three columns. Note columns can be combined with the attribute, colspan.

Exercise – Tables

  1. In the portfolio wd folder, create a tables.html file.
  2. Insert the above table into the tables.html file.
  3. Validate the tables.html file.