轻松上手,快乐学习!

HTML 表格


HTML 表格允许 web 开发人员将数据排列成行和列。


实例

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
亲自试一试 »

HTML 表格

表格由 <table> 标签来定义。

每个表格均有若干行,由 <tr> 标签定义

每个表头由 <th> 标签定义。

每行被分割为若干单元格,由 <td> 标签定义。

实例

一个简单的 HTML 表格:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
亲自试一试 »

注释: <td> 元素是表的数据容器。
它可以包含各种 HTML 元素;文本、图像、列表、其他表等。


HTML 表格 - 边框

要向表中添加边框,请使用 CSS border 属性:

实例

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

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


HTML 表格 - 边框折叠

设置表格边框是折叠为单一边框还是分开的,使用 CSS border-collapse 属性:

实例

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

HTML 表格 - 填充

填充指定单元格内容与其边框之间的间距。

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

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

实例

th, td {
  padding: 15px;
}
亲自试一试 »

HTML 表格 - 左对齐标题

默认情况下,表格标题为粗体且居中。

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

实例

th {
  text-align: left;
}
亲自试一试 »

HTML 表格 - 边框间距

边框间距指定单元格之间的间距。

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

实例

table {
  border-spacing: 5px;
}
亲自试一试 »

注释: 如果表格具有折叠边框,则 border-spacing 无效。


HTML 表格 - 跨多列的单元格

要使单元格跨越多个列,请使用 colspan 属性:

实例

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
亲自试一试 »

HTML 表格 - 跨多行的单元格

要使单元格跨多行,请使用 rowspan 属性:

实例

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
亲自试一试 »

HTML 表格 - 标题

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

实例

<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>
亲自试一试 »

注释: <caption> 标签必须紧跟在 <table> 之后插入。


表格的特殊样式

要为一个特定表定义特殊样式,请向表中添加 id 属性:

实例

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

现在,您可以为此表定义特殊样式:

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}
亲自试一试 »

并添加更多样式:

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}
亲自试一试 »

本章小结

  • 使用 HTML <table> 元素定义表
  • 使用 HTML <tr> 元素定义表行
  • 使用 HTML <td> 元素定义表数据
  • 使用 HTML <th> 元素定义表格标题
  • 使用 HTML <caption> 元素定义表格标题
  • 使用 CSS border 属性定义边框
  • 使用 CSS border-collapse 属性折叠单元格边框
  • 使用 CSS padding 属性向单元格添加填充
  • 使用 CSS text-align 属性对齐单元格文本
  • 使用 CSS border-spacing 属性设置单元格之间的间距
  • 使用 colspan 属性使单元格跨多个列
  • 使用 rowspan 属性使单元格跨多行
  • 使用 id 属性唯一地定义一个表

HTML 实验

学习训练

练习题:

添加带有两个表格标题的行。

这两个表头的值应为 "Name" 和 "Age"。

<table>
  
    
    
  
  <tr>
    <td>Jill Smith</td>
    <td>50</td>
  </tr>
</table>

开始练习


HTML Table 标签

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

如需所有可用的 HTML 标签的完整列表,请访问 HTML 标签参考手册