复制样本图像的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 &amp; 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;">&nbsp;</td>
<td valign="middle" align="center" style="height: 27px;">&nbsp;</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 &amp; 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 td s. To style the columns, I used colgroup and col elements. The rest was pretty easy.