这个表格使用 <thead>元素作为最顶层的包含块。在这个元素内容，是一个跨两列的<th>，其中包含<h2>标题，是配置名称，还有一个 <div>，里面是价格：
<thead> <tr> <th colspan="2"> <h2>Basic Plan</h2> <div>$19</div> </th> </tr> </thead>
再后面是包含Sign up Now! 按钮的 tfoot 标签：
<tfoot> <tr> <td colspan="2"><a href="#">Sign up now!</a> </td> </tr> </tfoot>
然后是 tbody 标签，包含一组功能列表，很直观，每行两列：
<tbody> <tr><td>Feature</td><td>Name</td></tr> <tr><td>Feature</td><td>Name</td></tr> <tr><td>Feature</td><td>Name</td></tr> <tr><td>Feature</td><td>Name</td></tr> <tr><td>Feature</td><td>Name</td></tr> </tbody>
最后，当然是两个关闭标签：
</table> </div><!-- /.package .package-basic -->
其他两个表格的结构也都一样。
9.2 表格头
要美化所有表格的表格头元素，需要做以下几件事：
□ 居中文本；
□ 添加与最终版本接近的中性灰作为背景颜色；
□ 把字体颜色改为白色；
□ 把 h2 转换为大写；
□ 增大价目表的尺寸；
□ 给表格添加必要的内边距。
完成以上美化工作，只要下面几行代码即可。这里我们把所有针对表格的样式都放到 #signup 选择符中：
#signup { table { border: 1px solid @table-border-color; float: none; thead th { text-align: center; background-color: @gray-light; color: #fff; padding-top: 12px; padding-bottom: 32px; h2 { text-transform: uppercase; } } } }
简单来说，这些样式完成了除增大价目表尺寸之外的所有工作。我们可以在这个基础上，开始添加样式，仍然在 #signup 选择符内：
.price { font-size: 7em; line-height: 1; }
这样就得到了下面的结果：
这就跟我们预期的结果接近了，但我们想减少美元符号的大小。为了能控制到它，必须在标记中给它加个 span 标签：
<div><span>$</span>19</div>
添加新标签后，可以把相应规则嵌套在 .price 中：
.price { ... span { font-size: .5em; vertical-align: super; } }
以上规则就缩小了美元符号为原来的一半，并且顶部对齐。
接下来居中结果，需要给父 .price 选择符添加一点负外边距：
.price { margin-left: -0.25em; ...
下面的屏幕截图就是现在的结果：
9.3 表体和表脚
同样以三个价目表为目标，统一做出如下调整：
□ 给功能列表添加左、右内边距；
□ 把按钮拉伸至全宽；
□ 增大按钮尺寸。
规则代码如下：
#signup { table { ... tbody { td { padding-left: 16px; padding-right: 16px; } } a.btn { .btn-lg; display: block; width: 100%; background-color: @gray-light; color: #fff; }
现在的效果如下:
现在公共样式完成了，接下来就可以考虑差异化了。
9.4 为不同的价目表添加不同的样式