Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat sempadan yang boleh dilipat dalam HTML?
Bagaimana untuk membuat sempadan yang boleh dilipat dalam HTML?
- WBOYke hadapan
- 2023-08-31 12:13:051617semak imbas
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.
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;
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>
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>
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;
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>
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>
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;
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>
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!