利用CSS控制表格外观
网络整理 - 07-27
本周，我将介绍这个系列的第三部分，表格边距问题和整个表格布局。单元格模式
在文档树中，对所有元素都产生一个CSS矩形框，这称为CSS单元格模式。每个单元格有一个内容域，可选周边填充，边界，页边距。当你使用CSS和HTML元素时，需要始终记住单元格模式。
间距
使用HTML表格，你可以利用CSS的规则很容易地定义填充和页边距。关键问题是页边距仅应用于整个表格，而不是某行，列或者单元格。
在列表A中HTML代码利用CSS定义了一个表格的页边距和单元格间距。填充和页边距属性可以单独定义（左，右，上，下），也可以像在前面的例子一样，为一个元素的所有边定义一个页边距。
<html><head><title>HTML Table</title></head>
<style type="text/css">
TABLE {
background: blue;
border-collapse: separate;
border-spacing: 10px;
border: 5px dashed black;
margin: 100px;
padding: 0px; }
TD, TH {
background: white;
border: outset 5pt;
horizontal-align: right;
padding: 15px; }
CAPTION {
background: orange;
border: ridge 5px blue;
border-top:
ridge 10px blue;
padding: 5px; }
</style><body>
<table summary="TechRepublic.com - Tables and CSS">
<caption>First Quarter Sales</caption>
<thead><tr>
<th abbr="salesperson" scope="col">Person</th>
<th abbr="sales" scope="col">Sales</th>
</tr></thead>
<tfoot><tr>
<td colspan="2">Let's sell, sell, sell!</td>
</tr></tfoot>
<tbody><tr>
<td>Mr. Smith</td>
<td>600.00</td>
</tr><tr>
<td>Mr. Jones</td>
<td>0000.00</td>
</tr><tr>
<td>Ms. Williams</td>
<td>0000.00</td>
</tr></tbody>
</table></body></html>
列表B定义单独值。同时，你还可以对整个表格使用宽度属性。这样你就可以很容易的定义整个表格大小。
<html><head><title>HTML Table</title></head><style type="text/css">
TABLE {
border: 5px solid black;
margin-left: 50px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 40px;
width: 200px;
}
TD, TH {
background: white;
horizontal-align: right;
padding-top: 15px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px; }
CAPTION {
padding: 0px; }
</style><body>
<table summary="Sample table">
<caption>Super Bowl XLI</caption>
<thead><tr>
<th abbr="team" scope="col">Team</th>
<th abbr="score" scope="col">Score</th>
</tr></thead>
<tfoot><tr>
<td colspan="2">Colts Win</td>
</tr></tfoot>
<tbody><tr>
<td>Colts</td>
<td>29</td>
</tr><tr>
<td>Bears</td>
<td>17</td>
</tr></tbody>
</table></body></html>