使用HTML可以创建表格。
示例
表格:
这个例子说明了如何在HTML页面中创建表格。
表格边框:
这个例子显示了不同的表格边框。
在这个页面的底部,还有更多例子。
表格
表格是用<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> 在浏览器中显示如下:
row 1, cell 1 | row 1, cell 2 | row 2, cell 1 | row 2, cell 2 | | |
表格和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> 在浏览器中显示如下:
Heading | Another Heading | row 1, cell 1 | row 1, cell 2 | row 2, cell 1 | row 2, cell 2 | | |
表格中的空单元格
在多数浏览器中,没有内容的单元格显示得不太好。
<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> 在浏览器中显示如下:
row 1, cell 1 | row 1, cell 2 | row 2, cell 1 | | | |
注意一下空单元格的边框没有显示出来。为了避免这个,可以在空单元格里加入不可分空格来占位,这样边框能正常显示。
<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> 在浏览器中显示如下:
row 1, cell 1 | row 1, cell 2 | row 2, cell 1 | | | |
基本注意点——有用的技巧
通常很少使用<thead>,<tbody>,<tfoot>标签,因为浏览器对它们的支持不好。希望这个在XHTML的未来版本中得到改变。
更多示例:
没有边框的表格:
这个例子显示了一个没有边框的表格。
表格头:
这个例子说明了如何显示表格头。
空单元格:
这个例子说明了如何使用“ ”来支撑没有内容的单元格。
有标题的表格:
这个例子说明了如何创建一个有标题的表格。
单元格跨行(列)的表格:
这个例子显示了如何定义跨行或者跨列的单元格。
表格内的其他标签:
这个例子说明了如何在元素中显示其他元素。
cellpadding属性:
这个例子说明了如何使用cellpadding属性在表格内容和边框之间留出更多空白。
cellspacing属性:
这个例子说明了如何使用cellspacing属性来增加单元格间距。
给表格增加背景或者背景图像:
这个例子说明了如何给表格增加背景。
给表格增加背景或者背景图像:
这个例子说明了如何给一个或多个单元格增加背景。
给单元格内容设置对齐方式:
这个例子说明了如何使用“align”属性来设置单元格的对齐方式,让表格好看一些。
frame属性:
这个例子说明了如何使用“frame”属性来控制表格周围的边框。
|
发表评论