Build a table of schedule using HTML5 table

Lessons learned while building Wine Festival Schedule using HTML5 table element.

• When adding table heading (<th>) there is no need to add <td> element. This was confusing to me since any table data needs to be wrapped inside of <td> inside of table. But there is an exception for table heading <thead>. I can think of <th> acting as <td> in <thead>.

<table>
    <thead>
      <tr>
        <th>Company Name</th>
        <th>Number of Items to Ship</th>
        <th>Next Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Adam's Greenworks</td>
        <td>14</td>
        <td>Package Items</td>
      </tr>

• To stretch a cell across the entire table, use colspan

<thead>
  <tr>
    <th colspan="2"><h1>Wine Festival Schedule</h1></th>
  </tr>
  <tr>
    <th><h2>Time</h2></th>
    <th><h2>Event</h2></th>
  </tr>

• Overall structure of table:

<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>

  <tbody>
   <tr>
     <td></td>
   </tr>
  </tbody>
</table>