Wie erstelle ich einen reduzierbaren Rahmen in HTML?-HTML-Tutorial-php.cn

Wie erstelle ich einen reduzierbaren Rahmen in HTML?

WBOY

Freigeben： 2023-08-31 12:13:05

nach vorne

1704 Leute haben es durchsucht

Wie erstelle ich einen reduzierbaren Rahmen in HTML?

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

Wie erstelle ich einen reduzierbaren Rahmen in HTML?

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

随着价值崩溃

如果将折叠作为 border-collapse 属性的值传递，则表格的边框将简单地折叠为单个边框。以下是在 HTML 中创建折叠边框的语法。

border-collapse: collapse;

Nach dem Login kopieren

示例 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>

Nach dem Login kopieren

以下是上述示例程序的输出。

示例 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>

Nach dem Login kopieren

以分离为值

如果我们通过传递separate作为border-collapse属性的值来创建折叠边框，则各个单元格将被包裹在单独的边框中。

border-collapse:separate;

Nach dem Login kopieren

示例 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>

Nach dem Login kopieren

以下是上述示例程序的输出。

示例 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>

Nach dem Login kopieren

以初始值作为值

如果将 initial 作为 border-collapse 属性的值传递，它将设置为其默认值，即单独的。以下是语法，它使用 HTML 中的 border-collapse 属性的初始属性。

border-collapse:initial;

Nach dem Login kopieren

示例

下面给出一个示例，它使用 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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen reduzierbaren Rahmen in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!