首页教程软件教程正文

HTML表格

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 647 浏览 3533 个字

摘要 :

文章目录 HTML表格标签 HTML表格示例 HTML带边框的表格 1）HTML边框属性 2）CSS边框属性 HTML表格带单元格填充 HTML表格宽度： HTML表格带colspan HTML表格带rowspan ……

文
章
目
录

HTML表格标签
HTML表格示例
HTML带边框的表格

1）HTML边框属性
2）CSS边框属性

HTML表格带单元格填充
HTML表格宽度：
HTML表格带colspan
HTML表格带rowspan
HTML表格带标题
HTML表格样式奇偶单元格
支持的浏览器

HTML表格标签用于以表格形式显示数据（行*列）。一行中可以有多列。

我们可以使用<table>元素以及<tr>、<td>和<th>元素来创建一个表格以表格形式显示数据。

在每个表格中，表格行由<tr>标签定义，表格标题由<th>定义，表格数据由<td>标签定义。

HTML表格用于管理页面的布局，例如头部部分、导航栏、主体内容、页脚部分等。但建议使用<div>标签而不是表格来管理页面的布局。

HTML表格标签

标签	描述
<table>	定义表格。
<tr>	定义表格中的一行。
<th>	定义表格中的表头单元格。
<td>	定义表格中的数据单元格。
<caption>	定义表格标题。
<colgroup>	用于指定表格中一个或多个列的格式。
<col>	与 <colgroup> 元素一起使用，用于指定每列的属性。
<tbody>	用于分组表格中的主体内容。
<thead>	用于分组表格中的头部内容。
<tfoot>	用于分组表格中的底部内容。

HTML表格示例

让我们看一下HTML表格标签的示例。

<table>  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
<tr><td>James</td><td>William</td><td>80</td></tr>  
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
</table>

它的输出如下所示：

在上面的HTML表格中，有5行和3列，即5 * 3 = 15个值。

HTML带边框的表格

有两种方法可以指定HTML表格的边框。

1）HTML边框属性

您可以使用HTML中的table标签的边框属性来指定边框。但现在不推荐使用。

<table border=\"1\">  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
<tr><td>James</td><td>William</td><td>80</td></tr>  
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
</table>

2）CSS边框属性

现在推荐使用CSS的边框属性来指定表格边框。

<style>  
table, th, td {  
  border: 1px solid black;  
}  
</style>

效果和上图一样。

另外，您可以使用border-collapse属性将所有边框折叠成一个边框。这将折叠边框成一个。

<style>  
table, th, td {  
  border: 2px solid black;  
  border-collapse: collapse;  
}  
</style>

HTML表格带单元格填充

您可以通过两种方式为表头和表数据指定填充：

使用HTML表格中的cellpadding属性
使用CSS中的padding属性

HTML表格标签的cellpadding属性现在已被弃用。建议使用CSS。让我们看一下CSS的代码。

<style>  
table, th, td {  
  border: 1px solid pink;  
  border-collapse: collapse;  
}  
th, td {  
  padding: 10px;  
}  
</style>

HTML表格宽度：

我们可以使用CSS的width属性来指定HTML表格的宽度。它可以以像素或百分比指定。

我们可以根据需要调整表格的宽度。

table{  
     width: 100%;   
}

以下是显示具有宽度的表格的示例。

<!DOCTYPE html>  
<html>  
<head>  
    <title>table</title>  
    <style>  
        table{  
            border-collapse: collapse;  
            width: 100%;   
        }  
    th,td{  
        border: 2px solid green;   
        padding: 15px;  
    }  
               
    </style>  
  </head>  
<body>  
  <table>  
    <tr>  
        <th>1 header</th>  
        <th>1 header</th>  
        <th>1 header</th>  
    </tr>  
    <tr>  
        <td>1data</td>  
        <td>1data</td>  
        <td>1data</td>  
    </tr>  
    <tr>  
        <td>2 data</td>  
        <td>2 data</td>  
        <td>2 data</td>  
    </tr>  
    <tr>  
        <td>3 data</td>  
        <td>3 data</td>  
        <td>3 data</td>  
    </tr>  
</table>  
</body>  
</html>

HTML表格带colspan

如果要使单元格跨越多列，可以使用colspan属性。

它将一个单元格/行分成多个列，列的数量取决于colspan属性的值。让我们看一个跨越两列的示例。

CSS代码：

<style>  
table, th, td {  
  border: 1px solid black;  
  border-collapse: collapse;  
}  
th, td {  
  padding: 5px;  
}  
</style>

HTML代码：

<table style=\"width:100%\">  
  <tr>  
  <th>Name</th>  
  <th colspan=\"2\">Mobile No.</th>  
  </tr>  
  <tr>  
  <td>Ajeet Maurya</td>  
  <td>7503520801</td>  
  <td>9555879135</td>  
  </tr>  
</table>

HTML表格带rowspan

如果要使单元格跨越多行，可以使用rowspan属性。

它将一个单元格分成多行。分成的行数取决于rowspan的值。让我们看一个跨越两行的示例。

CSS代码：

<style>  
table, th, td {  
  border: 1px solid black;  
  border-collapse: collapse;  
}  
th, td {  
  padding: 10px;  
}  
</style>

HTML代码：

<table>    
<tr><th>Name</th><td>Ajeet Maurya</td></tr>    
<tr><th rowspan=\"2\">Mobile No.</th><td>7503520801</td></tr>    
<tr><td>9555879135</td></tr>    
</table>

HTML表格带标题

HTML标题显示在表格上方。它必须在table标签之后使用。

<table>  
<caption>Student Records</caption>  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>  
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>  
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>  
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>  
</table>

HTML表格样式奇偶单元格

CSS代码：

<style>  
table, th, td {  
  border: 1px solid black;  
  border-collapse: collapse;  
}  
th, td {  
  padding: 10px;  
}  
table#alter tr:nth-child(even) {  
  background-color: #eee;  
}  
table#alter tr:nth-child(odd) {  
  background-color: #fff;  
}  
table#alter th {  
  color: white;  
  background-color: gray;  
}  
</style>