首页 > 代码库 > HTML基础教程（9）——HTML表格

HTML基础教程（9）——HTML表格

2024-07-12 14:14:44   221人阅读

可以使用 HTML 创建表格。

 

实例

表格
这个例子演示如何在 HTML 文档中创建表格。
<html><body><p>每个表格由 table 标签开始。</p><p>每个表格行由 tr 标签开始。</p><p>每个表格数据由 td 标签开始。</p><h4>一列：</h4><table border="1"><tr>  <td>100</td></tr></table><h4>一行三列：</h4><table border="1"><tr>  <td>100</td>  <td>200</td>  <td>300</td></tr></table><h4>两行三列：</h4><table border="1">

表格边框
本例演示各种类型的表格边框。
<html><body><h4>带有普通的边框：</h4>  <table border="1"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>带有粗的边框：</h4>  <table border="8"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>带有很粗的边框：</h4>  <table border="15"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table></body></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 1row 1, cell 2
row 2, cell 1row 2, cell 2

 

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格

<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>

在浏览器显示如下：

HeadingAnother Heading
row 1, cell 1row 1, cell 2
row 2, cell 1row 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 1row 1, cell 2
row 2, cell 1 

注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<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>&nbsp;</td>  <!--注意此处--></tr></table>

在浏览器中显示如下：

row 1, cell 1row 1, cell 2
row 2, cell 1 

 

基本的注意事项 - 有用的提示：

<thead>, <tbody> 和 <tfoot>很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用 IE5.0 或者更新的版本，可以查看在我们的《XML教程》中的具体例子。

更多实例

没有边框的表格
本例演示一个没有边框的表格。
<html><body><h4>这个表格没有边框：</h4><table><tr>  <td>100</td>  <td>200</td>  <td>300</td></tr><tr>  <td>400</td>  <td>500</td>  <td>600</td></tr></table><h4>这个表格也没有边框：</h4><table border="0"><tr>  <td>100</td>  <td>200</td>  <td>300</td></tr><tr>  <td>400</td>  <td>500</td>  <td>600</td></tr></table></body></html>

表格中的表头(Heading)
本例演示如何显示表格表头。
<html><body><h4>表头：</h4><table border="1"><tr>  <th>姓名</th>  <th>电话</th>  <th>电话</th></tr><tr>  <td>Bill Gates</td>  <td>555 77 854</td>  <td>555 77 855</td></tr></table><h4>垂直的表头：</h4><table border="1"><tr>  <th>姓名</th>  <td>Bill Gates</td></tr><tr>  <th>电话</th>  <td>555 77 854</td></tr><tr>  <th>电话</th>  <td>555 77 855</td></tr></table></body></html>

空单元格
本例展示如何使用 "&nbsp;" 处理没有内容的单元格。
<html><body><table border="1"><tr>  <td>Some text</td>  <td>Some text</td></tr><tr>  <td></td>  <td>Some text</td></tr></table><p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p><p>我们的技巧是在单元中插入一个 no-breaking 空格。</p><p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p><p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p></body></html>
带有标题的表格
本例演示一个带标题 (caption) 的表格
<html><body><h4>这个表格有一个标题，以及粗边框：</h4><table border="6"><caption>我的标题</caption><tr>  <td>100</td>  <td>200</td>  <td>300</td></tr><tr>  <td>400</td>  <td>500</td>  <td>600</td></tr></table></body>

跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
<html><body><h4>横跨两列的单元格：</h4><table border="1"><tr>  <th>姓名</th>  <th colspan="2">电话</th></tr><tr>  <td>Bill Gates</td>  <td>555 77 854</td>  <td>555 77 855</td></tr></table><h4>横跨两行的单元格：</h4><table border="1"><tr>  <th>姓名</th>  <td>Bill Gates</td></tr><tr>  <th rowspan="2">电话</th>  <td>555 77 854</td></tr><tr>  <td>555 77 855</td></tr></table></body></html>

表格内的标签
本例演示如何显示在不同的元素内显示元素。
<html><body><table border="1"><tr>  <td>   <p>这是一个段落。</p>   <p>这是另一个段落。</p>  </td>  <td>这个单元包含一个表格：   <table border="1">   <tr>     <td>A</td>     <td>B</td>   </tr>   <tr>     <td>C</td>     <td>D</td>   </tr>   </table>  </td></tr><tr>  <td>这个单元包含一个列表：   <ul>    <li>苹果</li>    <li>香蕉</li>    <li>菠萝</li>   </ul>  </td>  <td>HELLO</td></tr></table></body></html>

单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
<html><body><h4>没有 cellpadding：</h4><table border="1"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>带有 cellpadding：</h4><table border="1" cellpadding="10"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table></body></html>

 

单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。
<html><body><h4>没有 cellspacing：</h4><table border="1"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>带有 cellspacing：</h4><table border="1" cellspacing="10"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table></body></html>

 

向表格添加背景颜色或背景图像
本例演示如何向表格添加背景。
<html><body><h4>背景颜色：</h4><table border="1" bgcolor="red"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>背景图像：</h4><table border="1" background="../i/eg_bg_07.gif" tppabs="http://www.w3school.com.cn/i/eg_bg_07.gif"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table></body></html>

 

向表格单元添加背景颜色或者背景图像
本例演示如何向一个或者更多表格单元添加背景。
<html><body><h4>单元背景：</h4>  <table border="1"><tr>  <td bgcolor="red">First</td>  <td>Row</td></tr>   <tr>  <td   background="../i/eg_bg_07.gif" tppabs="http://www.w3school.com.cn/i/eg_bg_07.gif">  Second</td>  <td>Row</td></tr></table></body></html>

 

在表格单元中排列内容
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
<html><body><table width="400" border="1"> <tr>  <th align="left">消费项目....</th>  <th align="right">一月</th>  <th align="right">二月</th> </tr> <tr>  <td align="left">衣服</td>  <td align="right">$241.10</td>  <td align="right">$50.20</td> </tr> <tr>  <td align="left">化妆品</td>  <td align="right">$30.00</td>  <td align="right">$44.45</td> </tr> <tr>  <td align="left">食物</td>  <td align="right">$730.40</td>  <td align="right">$650.00</td> </tr> <tr>  <th align="left">总计</th>  <th align="right">$1001.50</th>  <th align="right">$744.65</th> </tr></table></body></html>

 

框架(frame)属性
本例演示如何使用 "frame" 属性来控制围绕表格的边框。
<html><body><p>如果在本例中您没有看到围绕表格的边框，那么您的浏览器太旧了，或者不支持该属性：</p><h4>frame="border":</h4><table frame="border"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>frame="box":</h4><table frame="box"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>frame="void":</h4><table frame="void"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>frame="above":</h4><table frame="above"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>frame="below":</h4><table frame="below"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>frame="hsides":</h4><table frame="hsides"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>frame="vsides":</h4><table frame="vsides"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>frame="lhs":</h4><table frame="lhs"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table><h4>frame="rhs":</h4><table frame="rhs"><tr>  <td>First</td>  <td>Row</td></tr>   <tr>  <td>Second</td>  <td>Row</td></tr></table></body></html>

 

表格标签

表格描述
<table>定义表格
<caption>定义表格标题。
<th>定义表格的表头。
<tr>定义表格的行。
<td>定义表格单元。
<thead>定义表格的页眉。
<tbody>定义表格的主体。
<tfoot>定义表格的页脚。
<col>定义用于表格列的属性。
<colgroup>定义表格列的组。


联系
我们