Bagaimana untuk membuat sempadan yang boleh dilipat dalam HTML?-html tutorial-php.cn

Bagaimana untuk membuat sempadan yang boleh dilipat dalam HTML?

WBOY

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

ke hadapan

1706 orang telah melayarinya

Bagaimana untuk membuat sempadan yang boleh dilipat dalam HTML?

Kami menggunakan atribut runtuhan sempadan untuk mencipta sempadan yang runtuh dalam HTML. border-collapse ialah sifat CSS yang menetapkan sama ada sempadan jadual harus runtuh menjadi satu sempadan atau dipisahkan daripada sempadannya sendiri dalam HTML.

Bagaimana untuk membuat sempadan yang boleh dilipat dalam HTML?

Atribut runtuhan sempadan mempunyai empat nilai: berasingan, runtuh, awal, warisi.

Ketika nilai runtuh

Jika anda lulus runtuh sebagai nilai sifat sempadan-runtuhkan, sempadan jadual hanya akan runtuh menjadi satu sempadan. Berikut ialah sintaks untuk mencipta sempadan boleh lipat dalam HTML.

border-collapse: collapse;

Salin selepas log masuk

Contoh 1

Dalam contoh yang diberikan di bawah, kami cuba mencipta sempadan lipatan dalam 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>

Salin selepas log masuk

Berikut ialah output program contoh di atas.

Contoh 2

Mari kita lihat contoh lain, menggunakan runtuh sebagai nilai sifat runtuh sempadan -

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

Salin selepas log masuk

Dengan pemisahan sebagai nilai

Jika kita mencipta sempadan runtuh dengan melepasi asingkan sebagai nilai harta runtuhan sempadan, sel individu akan dibalut dengan sempadan berasingan.

border-collapse:separate;

Salin selepas log masuk

Contoh 1

Dalam contoh yang diberikan di bawah, kami cuba mencipta sempadan boleh lipat berasingan dalam 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>

Salin selepas log masuk

Berikut ialah output program contoh di atas.

Contoh 2

Mari kita lihat contoh lain di mana perpecahan digunakan sebagai nilai harta runtuh sempadan -

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

Salin selepas log masuk

Gunakan nilai awal sebagai nilai

Jika anda melepasi initial sebagai nilai harta runtuh sempadan, ia akan ditetapkan kepada nilai lalainya, iaitu sahaja. Di bawah ialah sintaks, yang menggunakan sifat awal atribut runtuhan sempadan dalam HTML.

border-collapse:initial;

Salin selepas log masuk

Contoh

Contoh diberikan di bawah, yang menggunakan atribut awal atribut runtuhan sempadan dalam 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: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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk membuat sempadan yang boleh dilipat dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!