HTML table replicating a sample image - html

Question

I have been trying all morning to replicate the below however I cannot get the alignment correct, it seems that a row will match the height of the biggest td, I need to replicate this as pixel perfect as possible.
Below is my HTML,
<table cellspacing="0" cellpadding="0" border="0" align="center" style="height: 268px; width: 700px;">
<thead>
<tr>
<th valign="middle" align="center" style="height: 27px;" scope="col">Information</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Education & Training</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Marketing Services</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Digital Media</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Entertainment</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Business Services</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" align="center" style="height: 27px;">Academic</td>
<td valign="middle" align="center" style="height: 27px;">For-profit schools</td>
<td valign="middle" align="center" style="height: 27px;">Agency</td>
<td valign="middle" align="center" style="height: 27px;">Internet</td>
<td valign="middle" align="center" style="height: 27px;">TV and Radio Broadcasting</td>
<td valign="middle" align="center" style="height: 27px;">Business Process Outsourcing</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">STM</td>
<td valign="middle" align="center" style="height: 27px;">Educational Technology</td>
<td valign="middle" align="center" style="height: 27px;">Digital</td>
<td valign="middle" align="center" style="height: 27px;">Mobile Distribution</td>
<td valign="middle" align="center" style="height: 27px;">Cinema</td>
<td valign="middle" align="center" style="height: 27px;">B2B Services</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Financial</td>
<td valign="middle" align="center" style="height: 27px;">Educational Services</td>
<td valign="middle" align="center" style="height: 27px;">Market Research</td>
<td valign="middle" align="center" style="height: 27px;">Online Gaming</td>
<td valign="middle" align="center" style="height: 27px;">Film, TV, Music and Sports Content and Rights</td>
<td valign="middle" align="center" style="height: 27px;">SaaS</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Business</td>
<td valign="middle" align="center" style="height: 27px;">Professional Training</td>
<td valign="middle" align="center" style="height: 27px;">Outdoor</td>
<td valign="middle" align="center" style="height: 27px;">Social Media</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Trade</td>
<td valign="middle" align="center" style="height: 27px;">Vocational Training</td>
<td valign="middle" align="center" style="height: 27px;">Public Relations</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Consumer</td>
<td valign="middle" align="center" style="height: 27px;">Sales Promotion</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Professional</td>
<td valign="middle" align="center" style="height: 27px;">Direct Marketing</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Lead Generation</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;"> </td>
<td valign="middle" align="center" style="height: 27px;"> </td>
</tr>
</tbody>
</table>
and my CSS,
#left table {
border:0 none;
}
#left th {
height:43px;
background:url(images/th_bg.jpg) top left repeat-x;
font-size:14px;
color:#fff;
font-family:"Times", "Times New Roman", "Serif";
}
#left tbody td {
text-align:center;
background:#99abb9;
border-right:1px solid #fff;
width:105px;
padding:10px 15px 0px 15px;
height:17px;
}

Answer 1

Looks like only two rows to me. A header row of th tags and a single row of td tags, each with a list of items.

Answer 2

You try to make one table-row per entry, but on the picture it looks like there are only two rows. One for header and one for data (data seperated by <br /> or with <p>...</p>).
Here is an shortened example (less columns, only basic formatting - you have to add the rest) just to show how it works:
<style type='text/css'>
thead > tr > td {
text-align:center;
vertical-align:middle;
background-color:#777777;
width:107px;
}
tbody > tr > td {
text-align:center;
background-color:#99abb9;
}
</style>
<table cellspacing="2px" border="0">
<thead>
<tr>
<td>Information</td>
<td>Education & Training</td>
<td>Marketing Services</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Academic<br /><br />
STM<br /><br />
Financial<br /><br />
Business<br /><br />
...
</td>
<td>
For-profit schools<br /><br />
Educational Technology<br /><br />
Educational Services<br /><br />
...
</td>
<td>
Agency<br /><br />
Digital<br /><br />
Market Research<br /><br />
Outdoor<br /><br />
Public Relations
</td>
</tr>
</tbody>
</table>

Answer 3

I have made a completely working demo, at http://dcm.net46.net/test/so/so.html. To make all the columns the same height, I just filled in the extra space with empty tds. To style the columns, I used colgroup and col elements. The rest was pretty easy.