如何在 HTML 中合併表格單元格?


我們使用 colspanrowspan 屬性合併 HTML 中的單元格。 rowspan 屬性用於指定一個單元格應該合併的行數,而 colspan 屬性用於指定一個單元格應該合併的列數。

該屬性應該放在 <td> 標籤內。

語法

以下是合併 HTML 中表格單元格的語法。

<td rowspan="2">cell data</td>

示例

以下是合併 HTML 中表格行單元格的示例程式。

<!DOCTYPE html> <html> <style> table,tr,th,td { border:1px solid black; } </style> <body> <h2>Tables in HTML</h2> <table style="width: 100%"> <tr> <th >First Name </th> <th>Job role</th> </tr> <tr> <td >Tharun</td> <td rowspan="2">Content writer</td> </tr> <tr> <td >Akshaj</td> </tr> </table> </body> </html>

使用 colspan 屬性

我們可以使用以下語法合併表格的列單元格。

語法

對於 colspan,我們使用以下語法。

<td colspan="2">cell data</td>

示例

以下是合併 HTML 中表格列單元格的示例程式。

<!DOCTYPE html> <html> <style> table,tr,th,td { border:1px solid black; } </style> <body> <h2>Tables in HTML</h2> <table style="width: 100%"> <tr> <th >First Name </th> <th>Last Name</th> <th>Job role</th> </tr> <tr> <td colspan="2" >Tharun chandra</td> <td >Content writer</td> </tr> <tr> <td colspan="2">Akshaj Vank</td> <td >Content writer</td> </tr> </table> </body> </html>

示例

以下是我們在 HTML 表格 上執行 rowspancolspan 的示例程式。

<!DOCTYPE html> <html> <style> table,tr,th,td { border:1px solid black; } </style> <body> <h2>Tables in HTML</h2> <table style="width: 100%"> <tr> <th >First Name </th> <th>Job role</th> </tr> <tr> <td >Tharun</td> <td rowspan="2">Content writer</td> </tr> <tr> <td >Akshaj</td> </tr> <tr> <td colspan="2">Welcome to the company</td> </tr> </table> </body> </html>

更新於: 2023 年 9 月 2 日

超過 7.1 萬次瀏覽

開始你的職業

完成課程獲得認證

開始
廣告
© . All rights reserved.