传智播客 张鹏 带你一周hold住htmlcss 第08讲 html报表应用详解
日期：2014-05-17 浏览次数：20702 次
传智播客( http://icd.itcast.cn/)是一家网页平面设计培训学院，专注于网页设计培训，平面设计培训，fash培训，ui设计培训。
表格
表格是用<table>标签定义的。表格被划分为行（使用<tr>标签），每行又被划分为数据单元格（使用<td>标签）。td表示“表格数据”（Table Data），即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器中显示如下：
--------------------------------------------
表格和border属性
如果不指定border属性，表格将不显示边框。有时候这很有用，但是多数时候我们希望显示边框。
想要显示一个有边框的表格，需要使用border属性。
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
--------------------------------------------
表格头
表格头使用<th>标签指定。
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器中显示如下：
--------------------------------------------
表格中的空单元格
在多数浏览器中，没有内容的单元格显示得不太好。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
在浏览器中显示如下：
注意一下空单元格的边框没有显示出来。为了避免这个，可以在空单元格里加入不可分空格来占位，这样边框能正常显示。
--------------------------------------------
基本注意点——有用的技巧
通常很少使用<thead>，<tbody>，<tfoot>标签，因为浏览器对它们的支持不好。希望这个在XHTML的未来版本中得到改变。
更多示例：
没有边框的表格：
<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr><
