HTML - rowspan 屬性



HTML rowspan 屬性指定表格或網格中單元格或網格單元格所跨越的行數。

如果一行跨越兩行,則表示它將佔用表格中的兩行。這類似於 Excel 等電子表格程式中的合併單元格。它允許單個表格單元格跨越多個單元格或行的高度。

語法

<th|td rowspan="2 | 3 | 4, …" >

應用於

以下列出的元素允許使用 HTML rowspan 屬性。

元素 描述
<th> HTML <th> 標籤指定 HTML 表格的表頭單元格。
<td> HTML <td> 標籤指定 HTML 表格的資料單元格。

HTML rowspan 屬性示例

以下示例將說明 HTML rowspan 屬性,以及我們應該在哪裡以及如何使用此屬性!

使用 rowspan 屬性合併表頭單元格

輸出視窗顯示一個表格,透過合併第一列的三個行單元格來建立。

<!DOCTYPE html>
<html>

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

<body>
   <h1>The th rowspan attribute</h1>
   <table>
      <tr>
         <th rowspan="3">tutorialspoint</th>
         <th>Employee</th>
         <th>Designation</th>
      </tr>
      <tr>
         <td>Aman Kumar</td>
         <td>technical content writer</td>
      </tr>
      <tr>
         <td>Vivek Kumar</td>
         <td>Developer</td>
      </tr>
   </table>
</body>

</html>

使用 rowspan 屬性合併表格資料單元格

輸出視窗顯示一個表格,透過合併最後一列的第二行和第三行單元格來建立。

<!DOCTYPE html>
<html>

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

<body>
   <h1>The td rowspan attribute</h1>
   <table>
      <tr>
         <th>Company</th>
         <th>Location</th>
         <th>Founder</th>
      </tr>
      <tr>
         <td>tutorialspoint</td>
         <td>hyderabad</td>
         <td rowspan="2">MD.Mohtashim</td>
      </tr>
      <tr>
         <td>tutorix</td>
         <td>Noida</td>
      </tr>
   </table>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
rowspan
html_attributes_reference.htm
廣告