您当前的位置: 首页 » DIV+CSS编程 » 利用CSS控制表格外观
利用CSS控制表格外观
论坛链接
本周，我将介绍这个系列的第三部分，表格边距问题和整个表格布局。
单元格模式
在文档树中，对所有元素都产生一个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>
单元格模式
在文档树中，对所有元素都产生一个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>
#2楼发布者：tznktg时间：2007-09-21 17:41:12
对齐属性
和控制间距一样，你还可以控制每个单元格中数据的对齐属性。有两个对齐选项：垂直对齐和水平对齐。这和HTML TD元素的align和valign属性相对应。你可以使用CSS的文本对齐属性来水平对齐单元格数据和用垂直对齐属性控制垂直布局。下面的代码演示了这两个属性。
TD, TH { text-align: center; vertical-align: middle;}
垂直对齐属性有下面的可能取值：baseline, sub, super, top, text-top, middle, bottom, text-bottom, 和 length。你可以指定一个行高百分比的值。文本对齐属性可能取值为：左对齐，右对齐，中间对齐，最佳对齐。
控制显示
同使用所有HTML元素一样，你可以通过CSS的显示属性控制一个项目在网页上是否显示。下面和表格相关的HTML显示值都是有效的：
table：这相应于块级HTML表格元素。
inline_table：内嵌级HTML表格元素。
table_row：表格内的一行单元格（TR元素）。
table-row-group：一个或多个表格行（TBODY元素）。
table-header-group：显示在表格头部表格标题后的一组行(THEAD 元素)。
table-footer-group：显示在所有行或行组后的一组行（TFOOT元素）。
table-column：表格的一列单元格（COL元素）
table-column-group：表格的一组列（COLGROUP 元素）。
table-cell：表格内的每个单元格（TD元素）。
table-caption：表格标题（CAPTION元素）。
你可以使用这些显示属性来控制一个HTML表格的任何方面的显示与否。例如，你可以设定显示属性来显示一个元素。列表C使用这些属性来控制每个HTML元素的可见性。
<html>
<head><title>HTML Table</title></head>
<style type="text/css">
TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
TD, TH { display: table-cell }
CAPTION { display: none }
</style><body>
<table summary="Sample table for TechRepublic.com">
<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>
使用显示属性有趣的方面是用一个表格显示任何元素。也就是说，你可以使用表格显示属性使得每个元素的行为像一个表格一样。这和分配一个相应的显示属性值一样简单。
具体使用
HTML使用说明包括用于操作表格数据的表格，但是很多开发人员仍旧依赖表格进行页面布局。我知道很多开发人员不屑使用HTML表格，但是表格在各种情况下都是可用的。无论目的是什么，表格元素都可以和CSS一起用来控制网站的外观和感觉。
和控制间距一样，你还可以控制每个单元格中数据的对齐属性。有两个对齐选项：垂直对齐和水平对齐。这和HTML TD元素的align和valign属性相对应。你可以使用CSS的文本对齐属性来水平对齐单元格数据和用垂直对齐属性控制垂直布局。下面的代码演示了这两个属性。
TD, TH { text-align: center; vertical-align: middle;}
垂直对齐属性有下面的可能取值：baseline, sub, super, top, text-top, middle, bottom, text-bottom, 和 length。你可以指定一个行高百分比的值。文本对齐属性可能取值为：左对齐，右对齐，中间对齐，最佳对齐。
控制显示
同使用所有HTML元素一样，你可以通过CSS的显示属性控制一个项目在网页上是否显示。下面和表格相关的HTML显示值都是有效的：
table：这相应于块级HTML表格元素。
inline_table：内嵌级HTML表格元素。
table_row：表格内的一行单元格（TR元素）。
table-row-group：一个或多个表格行（TBODY元素）。
table-header-group：显示在表格头部表格标题后的一组行(THEAD 元素)。
table-footer-group：显示在所有行或行组后的一组行（TFOOT元素）。
table-column：表格的一列单元格（COL元素）
table-column-group：表格的一组列（COLGROUP 元素）。
table-cell：表格内的每个单元格（TD元素）。
table-caption：表格标题（CAPTION元素）。
你可以使用这些显示属性来控制一个HTML表格的任何方面的显示与否。例如，你可以设定显示属性来显示一个元素。列表C使用这些属性来控制每个HTML元素的可见性。
<html>
<head><title>HTML Table</title></head>
<style type="text/css">
TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
TD, TH { display: table-cell }
CAPTION { display: none }
</style><body>
<table summary="Sample table for TechRepublic.com">
<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>
使用显示属性有趣的方面是用一个表格显示任何元素。也就是说，你可以使用表格显示属性使得每个元素的行为像一个表格一样。这和分配一个相应的显示属性值一样简单。
具体使用
HTML使用说明包括用于操作表格数据的表格，但是很多开发人员仍旧依赖表格进行页面布局。我知道很多开发人员不屑使用HTML表格，但是表格在各种情况下都是可用的。无论目的是什么，表格元素都可以和CSS一起用来控制网站的外观和感觉。