HTML表格元素

由 hcduguo

HTML 表格定义

  • HTML表格标签用于以表格形式（行*列）显示数据，一行中可以有很多列。
  • 我们可以用<tr>，<td>和<th>元素创建表格。
  • 在每个表中，表格由 <table> 标签来定义，表行由<tr>标记定义，表头由<th>定义，表数据由<td>标记定义。
  • <td>指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

提示：HTML表格可以管理页面的布局，例如标题部分，导航栏，正文内容，页脚部分等。但是建议使用div标签来管理页面的布局。

HTML 表格示例:

班级姓名分数
五年级1班王维99
五年级2班赵高94
五年级2班李晨90
五年级3班陈霞87

HTML 表格边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。有两种方法可以为HTML表指定边框：

  1. 通过HTML中表格的边框属性设定
  2. 通过CSS中的边框属性设定

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

<table border="1">
    <tr>
        <td>第一行, 第一列</td>
        <td>第一行, 第二列</td>
    </tr>
    <tr>
        <td>第二行, 第一列</td>
        <td>第二行, 第二列</td>
    </tr>
</table>

使用CSS的边框属性来显示一个带有边框的表格，且添加边线合并属性border-collapse：

<style>  
  table, th, td {  
      border: 2px solid black;  
      border-collapse: collapse;  
    }  
</style> 
<table>
    <tr>
        <td>第一行, 第一列</td>
        <td>第一行, 第二列</td>
    <tr>
        <td>第二行, 第一列</td>
        <td>第二行, 第二列</td>
    </tr>
    </tr>
</table>

效果展示：

HTML表格内边距属性

您可以通过两种方式为表头和表数据设定内边距：

  1. 使用HTML中表格的cellpadding属性。
  2. 使用在CSS中内边距属性padding。

HTML table标记的cellpadding属性现在已过时，建议使用CSS。

<style>
    table, th, td { border: 2px solid green; border-collapse: collapse; } 
    th, td { width:100px;padding: 15px; }
</style>
<table>
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>分数</th></tr>
    <tr>
        <td>五年级1班</td>
        <td>王维</td>
        <td>99</td></tr>
    <tr>
        <td>五年级2班</td>
        <td>赵高</td>
        <td>94</td></tr>
    <tr>
        <td>五年级2班</td>
        <td>李晨</td>
        <td>90</td></tr>
    <tr>
        <td>五年级3班</td>
        <td>陈霞</td>
        <td>87</td></tr>
</table>

效果展示：

HTML单元格合并属性

如果一个单元格跨度超过一行我们可以使用rowspan合并单元格，同样如果单元格跨度超过一列，我们可以使用colspan属性合并单元格。

让我们看一下跨两行的示例：

<table>
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>分数</th></tr>
    <tr>
        <td >五年级1班</td>
        <td>王维</td>
        <td>99</td></tr>
    <tr>
        <td rowspan="2">五年级2班</td>
        <td>赵高</td>
        <td>94</td></tr>
    <tr>
        <td>李晨</td>
        <td>90</td></tr>
    <tr>
        <td>五年级3班</td>
        <td>陈霞</td>
        <td>87</td></tr>
</table>

亲自试试

HTML表格奇偶单元格样式

为了提升表格的可读性和视觉效果，我们可以把表格的奇偶行展示不同的样式。

<style>  
table, th, td {  
  border: 2px solid green;  
  border-collapse: collapse;  
}  
th, td {  
    width:100px;
	 height:30px;
    padding: 15px;  
}  
table#alter tr:nth-child(even) {  
  background-color:yellow;  
}  
table#alter tr:nth-child(odd) {  
  background-color:white;  
}  
table#alter th {  
  color: white;  
  background-color: gray;  
} 
</style>  
<table id="alter">
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>分数</th></tr>
    <tr>
        <td>五年级1班</td>
        <td>王维</td>
        <td>99</td></tr>
    <tr>
        <td>五年级2班</td>
        <td>赵高</td>
        <td>94</td></tr>
    <tr>
        <td>五年级2班</td>
        <td>李晨</td>
        <td>90</td></tr>
    <tr>
        <td>五年级3班</td>
        <td>陈霞</td>
        <td>87</td></tr>
</table>

效果展示：

亲自试试

更多示例

表格
这个例子演示如何在 HTML 文档中创建表格。

没有边框的表格
本例演示一个没有边框的表格。

表格中的表头(Heading)
本例演示如何显示表格表头。

带有标题的表格
本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。

表格内的标签
本例演示如何在不同的元素内显示元素。

单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。

漂亮的表格

HTML 表格标签

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

相关