HTML中的Colspan是什么？

2025年4月14日 | 阅读 3 分钟

引言

Colspan是一个用于定义HTML中跨表单元格数量的属性。借助colspan属性，我们可以定义一个单元格占据一个或多个列和单元格的宽度。colspan属性的工作原理类似于Excel工作表中合并单元格的工作原理。它还定义了实际划分的行数。

支持的元素

在HTML中，colspan属性支持

标签的<td>和<th>元素。在HTML中，我们可以通过

<td>和<th>元素来表示表格。我们可以通过<th>标签表示表格的头部。同样，我们也可以通过HTML中的<td>标签来定义表格的数据。

语法（包含所有<td>、<th>和<ElementName>元素）

我们可以使用以下语法定义colspan元素。

在上面的语法中，元素名称是HTML中支持的标签名称。值定义了将要跨越的列数。值始终是正整数。colspan属性的默认值是1。

借助以下语法，我们可以为<td>和<th>元素定义colspan属性，该属性确定单个单元格中的列数。

示例 1

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  table{
   border: 1px solid blue;
  }
   th, td {
   border: 1px solid blue;
   padding: 10px;
  }
  .total-row {
   font-weight: bold;
  }
</style>
</head>
<body>
 <h1>The td colspan attribute</h1>

<table>
 <tr>
  <th>Month</th>
  <th>Savings</th>
 </tr>
 <tr>
  <td>January</td>
  <td>1000</td>
 </tr>
 <tr>
  <td>February</td>
  <td>800</td>
 </tr>
 <tr>
  <td>March</td>
  <td>1100</td>
 </tr>
 <tr class="total-row">
  <td colspan="2">Total savings: 2900</td>
 </tr>
</table>
</body>
</html>

输出

说明

在上面的代码中，我们使用<td>标签创建了一个跨越两列的表格。

示例 2

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  table{
   border: 1px solid blue;
  }
   th, td {
   border: 1px solid blue;
   padding: 10px;
  }
  </style>
</head>
<body>
 <h1>The th colspan attribute</h1>
<table>
 <tr>
  <th colspan="3">Monthly Savings</th>
 </tr>
 <tr>
  <th>Month</th>
  <th>Savings Amount</th>
  <th>Year</th>
 </tr>
 <tr>
  <td>January</td>
  <td>1000</td>
  <td>2023</td>
 </tr>
 <tr>
  <td>February</td>
  <td>800</td>
  <td>2023</td>
 </tr>
 <tr>
  <td>March</td>
  <td>1100</td>
  <td>2023</td>
 </tr>
</table>
</body>
</html>

输出

说明

在上面的代码中，我们在标题单元格中实现了colspan，将其拆分成两个独立的列。我们也多次创建了单个表格。

示例 3

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  table,
  th,
  td {
  border: 2px solid black;
  border-collapse: collapse;
  padding: 8px;
  }
  </style>
</head>
<body>
 <center>
  <h1 style="color: deepskyblue;">Odisha Highlights</h1>
  <table>
    <tr>
      <th colspan="2">Famous Places in Odisha</th>
    </tr>
    <tr>
      <td>Puri</td>
      <td>Konark Sun Temple</td>
    </tr>
    <tr>
      <td colspan="2">Jagannath Temple, Puri</td>
    </tr>
    <tr>
      <td>Bhubaneswar</td>
      <td>Chilika Lake</td>
    </tr>
    <tr>
      <td colspan="2">Nandankanan Zoological Park</td>
    </tr>
    <tr>
      <td colspan="2">Lingaraja Temple, Bhubaneswar</td>
    </tr>
    <tr>
      <td>Raghurajpur</td>
      <td>Chandrabhaga Beach</td>
    </tr>
    <tr>
      <td colspan="2">Simlipal National Park</td>
    </tr>
    <tr>
      <td colspan="2">Dhauli Giri</td>
    </tr>
    <tr>
      <td>Konark</td>
      <td>Satpada</td>
    </tr>
    <tr>
      <td colspan="2">Udayagiri and Khandagiri Caves</td>
    </tr>
    <tr>
      <td>Pipili</td>
      <td>Ratnagiri Buddhist Excavation</td>
    </tr>
    <tr>
      <td>Bhitarkanika National Park</td>
      <td>Paradip Port</td>
    </tr>
    <tr>
      <td colspan="2">Sambalpur</td>
    </tr>
  </table>
  </center>
</body>
</html>

输出

示例 4

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  table {
   border-collapse: collapse;
   width: 100%;
  }
  
  th, td {
   border: 2px solid blue;
   padding: 5px;
   text-align: left;
  }
  
  th {
   background-color: blue;
   color: white;
  }
  
  h1 {
   text-align: center;
  }
  </style>
</head>
<body>
 <table>
  <caption><h1>Employee Details</h1></caption>
  <thead>
   <tr>
    <th>Department</th>
    <th>.NET</th>
    <th>JAVA</th>
    <th>Embedded</th>
    <th>Mechanical</th>
    <th>Indoor</th>
    <th>Outdoor</th>
    <th>Onside</th>
    <th>Offside</th>
    <th>Accounts</th>
    <th>Assets</th>
    <th>Canteen</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Head Person</td>
    <td>Dinesh</td>
    <td>Sonu</td>
    <td>Monu</td>
    <td>Manoj</td>
    <td>Sona</td>
    <td>Archita</td>
    <td>Saswat</td>
    <td>Damodar</td>
    <td>Amisha</td>
    <td>Sakshi</td>
    <td>Dolly</td>
   </tr>
   <tr>
    <td>Experience (in years)</td>
    <td>17</td>
    <td>12</td>
    <td>8</td>
    <td>7</td>
    <td>12</td>
    <td>11</td>
    <td>5</td>
    <td>9</td>
    <td>7</td>
    <td>12</td>
    <td>5</td>
   </tr>
   <tr>
    <td>No of Teams</td>
    <td>5</td>
    <td>5</td>
    <td>7</td>
    <td>7</td>
    <td>3</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
   </tr>
   <tr>
    <td>Assigned Projects/Task</td>
    <td>18</td>
    <td>15</td>
    <td>7</td>
    <td>11</td>
    <td>5</td>
    <td>5</td>
    <td>2</td>
    <td>2</td>
    <td>4</td>
    <td>10</td>
    <td>6</td>
   </tr>
   <tr>
    <td>No of Employees</td>
    <td>182</td>
    <td>150</td>
    <td>75</td>
    <td>82</td>
    <td>34</td>
    <td>25</td>
    <td>2</td>
    <td>5</td>
    <td>4</td>
    <td>10</td>
    <td>6</td>
   </tr>
   <tr>
    <td>Weekly Standup</td>
    <td>Monday</td>
    <td>Monday</td>
    <td>Friday</td>
    <td>Friday</td>
    <td>Tuesday</td>
    <td>Tuesday</td>
    <td>Everyday</td>
    <td>Everyday</td>
    <td>Friday</td>
    <td>Friday</td>
    <td>Friday</td>
   </tr>
   <tr>
    <td>Appraisal Month</td>
    <td>March</td>
    <td>July</td>
    <td>March</td>
    <td>March</td>
    <td>June</td>
    <td>September</td>
    <td>March</td>
    <td>March</td>
    <td>September</td>
    <td>June</td>
    <td>September</td>
   </tr>
  </tbody>
 </table>
</body>
</html>

输出

下一个话题HTML历史

HTML中的Colspan是什么？

引言

支持的元素

语法（包含所有<td>、<th>和<ElementName>元素）

示例 1

示例 2

示例 3

示例 4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML中的Colspan是什么？

引言

支持的元素

语法（包含所有<td>、<th>和<ElementName>元素）

示例 1

示例 2

示例 3

示例 4

相关帖子

如何制作 HTML 按钮

如何使用 HTML 和 CSS 将登录表单添加到图片

如何在 HTML 中添加注释

如何在 HTML 中添加网站图标

如何运行 HTML 程序

Textarea disabled

HTML 注入

如何在 HTML 中更改图片大小

HTML 中的根元素

如何将 CSS 链接到 HTML

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器