W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML 表格



HTML表格示例

Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

定义 HTML表格

Example

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
尝试一下 »
Note 表格数据 <td> 是表的数据容器。
它们可以包含各种各样的HTML元素,如文本,图像,表格,列表,等等。

带有边框的HTML表格

如果不指定表的边框,则将无边框显示。

可以使用边框属性添加边框:

Example

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
尝试一下 »

添加边框请使用 CSS border 属性:

Example

table, th, td {
    border: 1px solid black;
}
尝试一下 »

记住为表和表单元格定义边框。


带有折叠边框的HTML表格

如果你想要的边框折叠成一个边框,添加 CSS border-collapse

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
尝试一下 »

带有单元格填充的HTML表格

单元格填充是指单元格内容及其边框之间的空间。

如果不指定填充,则将显示表单元格而不填充。

设置填充,使用 CSS padding 属性:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
尝试一下 »

HTML表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:

Example

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
尝试一下 »

要使用左对齐的表格标题,请使用 CSS text-align 属性:

Example

th {
    text-align: left;
}
尝试一下 »

带有边框间距的HTML表格

边框间距是指单元格之间的空间。

设置带有边框间距的HTML表格,请使用CSS border-spacing 属性:

Example

table {
    border-spacing: 5px;
}
尝试一下 »
Note 如果表已折叠边框,边框间距没有影响。

跨越多列的单元格

跨越多列,请使用 colspan 属性:

Example

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>
尝试一下 »

跨越多行的单元格

跨越多行,请使用 rowspan 属性:

Example

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>
尝试一下 »

带有标题的HTML表格

若要向表添加标题,请使用 <caption> 标签:

Example

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
尝试一下 »
Note <caption> 标签必须在紧随 <table> 标签之后添加。

HTML 表格标签

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