資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在HTML中建立合併邊框？
我們使用`border-collapse`屬性在HTML中建立合併邊框。`border-collapse`是一個CSS屬性，用於設定表格邊框是在HTML中合併成單個邊框還是彼此分隔。
`border-collapse`屬性有四個值：`separate`、`collapse`、`initial`、`inherit`。
使用`collapse`值
如果將`collapse`作為`border-collapse`屬性的值，則表格的邊框將簡單地合併成單個邊框。以下是建立HTML合併邊框的語法。
border-collapse: collapse;
示例1
在下面給出的示例中，我們嘗試在HTML中建立一個合併邊框。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table, tr, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <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>Content writer</td> </tr> <tr> <td>Akshaj</td> <td>Content writer</td> </tr> </table> </body> </html>
以下是上述示例程式的輸出。
示例2
讓我們再看一個使用`collapse`作為`border-collapse`屬性值的示例。
<!DOCTYPE html> <html> <head> <style> table {border-collapse: collapse; } table, td, th { border: 1px solid blue; } </style> </head> <body> <h1>Technologies</h1> <table> <tr> <th>IDE</th> <th>Database</th> </tr> <tr> <td>NetBeans IDE</td> <td>MySQL</td> </tr> </table> </body> </html>
使用`separate`值
如果我們透過將`separate`作為`border-collapse`屬性的值來建立合併邊框，則各個單元格將用單獨的邊框包裹。
border-collapse:separate;
示例1
在下面給出的示例中，我們嘗試在HTML中建立一個分開的合併邊框。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table,tr,th,td { border:1px solid black; border-collapse:separate; } </style> </head> <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 >Content writer</td> </tr> <tr> <td >Akshaj</td> <td >Content writer</td> </tr> </table> </body> </html>
以下是上述示例程式的輸出。
示例2
讓我們再看一個使用`separate`作為`border-collapse`屬性值的示例。
<!DOCTYPE html> <html> <head> <style> table { border-collapse: separate; } table, td, th { border: 1px solid blue; } </style> </head> <body> <h1>Technologies</h1> <table> <tr> <th>IDE</th> <th>Database</th> </tr> <tr> <td>NetBeans IDE</td> <td>MySQL</td> </tr> </table> </body> </html>
使用`initial`值
如果將`initial`作為`border-collapse`屬性的值，則將其設定為其預設值，即`separate`。以下是使用`border-collapse`屬性的`initial`屬性的語法。
border-collapse:initial;
示例
下面是一個使用`border-collapse`屬性的`initial`屬性的示例。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table,tr,th,td { border:1px solid black; border-collapse:initial; } </style> </head> <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 >Content writer</td> </tr> <tr> <td >Akshaj</td> <td >Content writer</td> </tr> </table> </body> </html>
更新於：2022年10月18日
15K+ 瀏覽量
廣告