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

列印頁面