HTML 表格

HTML表格示例

ID 公司 类型
1 百度 搜索
2 淘宝 购物
3 腾讯 聊天
4 小米 手机
5 滴滴 出行
6 头条 新闻
运行 »

定义HTML表格

使用<table>标签定义表格。

每个表行都使用<tr> 标签定义。使用<th> 标签定义表头。默认情况下,表格标题为粗体且居中。使用<td> 标签定义表数据/单元格。

实例

<table style="width:100%">
  <tr>
    <th>姓</th>
    <th>名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张</td>
    <td>三</td>
    <td>18</td>
  </tr>
  <tr>
    <td>李</td>
    <td>四</td>
    <td>26</td>
  </tr>
</table>
运行 »

注意: <td>元素是数据单元格的内容。
。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等



HTML表格 - 添加边框

如果未指定表格的边框,则显示无边框。

使用CSS border属性设置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>姓名</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>55577854</td>
   <td>55577855</td>
  </tr>
</table>
运行 »

HTML表 - 跨越多行的单元格

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

实例

<table style="width:100%">
  <tr>
    <th>姓名:</th>
    <td>张三</td>
  </tr>
 <tr>
    <th rowspan="2">联系方式:</th>
   <td>55577854</td>
  </tr>
  <tr>
   <td>55577855</td>
  </tr>
</table>
运行 »

HTML表格 - 添加标题

要为表格添加标题,请使用<caption>标签:

实例

<table style="width:100%">
  <caption>每月节省多少钱</caption>
  <tr>
    <th>月份</th>
    <th>额度</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>$50</td>
  </tr>
</table>
运行 »

注意:必须在<table>标签之后立即插入<caption> <table>标签。


样式特殊的表格

要为特殊表格定义特殊样式,请在表中添加id属性:

实例

<table id="t01">
  <tr>
    <th>姓名</th>
    <th>电话</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>1590000000000</td>
    <td>29</td>
  </tr>
</table>

表格样式:

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}
运行 »

更多样式:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#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属性定义id唯一的表

HTML表格标签

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