如何在HTML中创建一个折叠边框？

百变鹏仔 3个月前 (09-22) #HTML

文章标签边框

我们使用 border-collapse 属性在 HTML 中创建折叠边框。 border-collapse 是一个 CSS 属性，用于设置表格边框应折叠为单个边框或在 HTML 中与其自己的边框分开。

Border-collapse 属性有四个值：separate、collapse、initial、inherit。

随着价值崩溃

如果将折叠作为 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

让我们看另一个例子，将折叠作为 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作为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

让我们看另一个例子，其中将 split 作为 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 作为 border-collapse 属性的值传递，它将设置为其默认值，即单独的。以下是语法，它使用 HTML 中的 border-collapse 属性的初始属性。

border-collapse:initial;

示例

下面给出一个示例，它使用 HTML 中的 border-collapse 属性的初始属性。

<!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>

文章推荐

如何在HTML中创建一个折叠边框？

随着价值崩溃

示例 1

示例 2

以分离为值

示例 1

示例 2

以初始值作为值

示例

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8