This example is a lot to digest. Take a look at each part of it in detail to see how it comes together. First, explore the markup of the document. I have included a <caption> element inside the table to house the name of the recipe:
<table class=’recipe’>
<caption>
Spicy Thai Peanut Sauce
</caption>
<colgroup>
<col/>
<col/>
I could just as easily have put the name of the recipe in a heading element like <h1> and placed it outside the table. I chose the caption so the name of the recipe is bound to the table of ingredients. Later, if I choose to, I can include the name of the website or a logo above the table of ingredients. Next, I’ve added <colgroup> and <col/> elements. These can be used to control the layout of each column, although I haven’t chosen to take advantage of this capability yet. Although you can use these elements, they are not absolutely necessary. I can leave them out, causing no impact on the table’s final rendered layout. Next, I added the table headings, placed inside <thead> elements, and I used <th> instead of <td> to house the contents of each cell:
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th> quantity </th>
<th> measurement </th>
<th> product </th>
<th> instructions </th>
</tr>
</thead>
<tbody>