HTML - colspan 属性

HTML 的colspan属性用于定义单元格应跨越或扩展多少个表格列，与其他单元格相比。

此属性的值必须是非负整数。其默认值为 1，如果我们将大于 1000 的值赋予此属性，则将其视为假值，并将设置为默认值 1。

如果为其分配负值，则将其视为假值，并自动将其设置为默认值 1。

语法

<tag colspan = "value"></tag>

其中值可以是 1 到 1000 范围内的任何非负整数。

应用于

以下列出的元素允许使用 HTML colspan 属性

元素	描述
<th>	HTML <th> 标签在 HTML 表格中定义表头单元格。
<td>	HTML <td> 标签在 HTML 表格中定义标准单元格

HTML colspan 属性示例

以下代码演示了 colspan 属性的用法

带 th 标签的 colspan 属性

在以下示例中，我们使用 colspan 属性来跨越表格的表头单元格。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'colspan' attribute</title>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
      }
   </style>
</head>

<body>
   <!--HTML 'colspan' attribute-->
   <p>Example of HTML 'colspan' attribute</p>
   <h2>Students Table</h2>
   <table>
      <tr>
         <th colspan="2">Name</th>
         <th>Roll No</th>
         <th>Gender</th>
      </tr>
      <tr>
         <th>First Name</th>
         <th>Last Name</th>
      </tr>
      <tr>
         <td>Revathi</td>
         <td>Satya</td>
         <td>1</td>
         <td>Female</td>
      </tr>
      <tr>
         <td>Aman</td>
         <td>Kumar</td>
         <td>2</td>
         <td>Male</td>
      </tr>
   </table>
</body>

</html>

带 td 标签的 colspan 属性

考虑另一种情况，我们将使用 colspan 属性与 td 标签一起使用。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'colspan' attribute</title>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
         width: 30%;
      }
   </style>
</head>

<body>
   <!--HTML 'colspan' attribute-->
   <p>Example of the HTML 'colspan' attribute</p>
   <h2>Grocery Bill</h2>
   <table>
      <tr>
         <th>Name</th>
         <th>Price</th>
         <th>GST</th>
      </tr>
      <tr>
         <td>Bread</td>
         <td>50</td>
         <td>5</td>
      </tr>
      <tr>
         <td>Eggs</td>
         <td>180</td>
         <td>10</td>
      </tr>
      <tr>
         <!--colspan with value 2-->
         <td colspan="2">Total price(without GST): 230</td>
         <td>Total GST: 15</td>
      </tr>
      <tr>
         <!--colspan with value 3-->
         <td colspan="3">Total paid price(including GST): 245</td>
      </tr>
   </table>
</body>

</html>

支持的浏览器

属性
colspan	是	是	是	是	是

html_attributes_reference.htm

打印页面