HTML表格帮助

Question

我一直在尝试整个早上复制下面但是我无法得到对齐正确，似乎一行将匹配最大TD的高度，我需要复制这个像素尽可能完美。

下面是我的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> 

和我的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

貌似只有两行给我。标题行th标签和单排td标签，每个都有一个项目列表。

Answer 2

你尽量让每一个条目的表行，但图片上的样子只有两行。一个用于标题，一个用于数据（数据由<br />或<p>...</p>分隔）。

下面是一个例子缩短（少列，只有基本的格式 - 你必须添加的其余部分）只是为了显示它是如何工作：

<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

我做了一个完整的工作演示，在http://dcm.net46.net/test/so/so.html。为了使所有的列高度相同，我只填写了空的td s的额外空间。要设置列的样式，我使用了colgroup和col元素。其余的很容易。