数据结构
网络
关系数据库管理系统 (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+ 浏览量
广告