如何在 HTML 中合併表格列?


要在 HTML 中合併表格列,請使用 colspan 屬性<td> 標記。藉助此功能,可以將單元格相互合併。例如,如果你的表格有 4 行和 4 列,那麼使用 colspan 屬性,你可以輕鬆合併 2 個或 3 個表格單元格。

示例

你可以嘗試執行以下程式碼,以便在 HTML 中合併表格列。首先,我們將看看如何在 HTML 中建立帶有 3 行和 3 列的表格

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
            width: 100px;
            height: 50px;
         }
      </style>
   </head>

   <body>
      <h1>Heading</h1>
      <table>
         <tr>
            <th></th>
            <th></th>
            <th></th>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
         </tr>
      </table>
   </body>
</html>

輸出

示例

讓我們使用 colspan 屬性合併列。前 2 列將合併

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
            width: 100px;
            height: 50px;
         }
      </style>
   </head>
   <body>
      <h1>Heading</h1>
      <table>
         <tr>
            <th></th>
            <th></th>
            <th></th>
         </tr>
         <tr>
            <td colspan="2"></td>
            <td></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
         </tr>
      </table>
   </body>
</html>

輸出

更新於:02-9-2023

60K+ 檢視次數

開啟你的 職業生涯

完成該課程獲得認證

開始
廣告
© . All rights reserved.