Rumah > Artikel > hujung hadapan web > Bagaimanakah saya boleh menghalang jadual HTML saya daripada diformat secara tidak betul?
Bagaimanakah saya boleh menghalang jadual HTML saya daripada diformat secara tidak betul?
- WBOYke hadapan
- 2023-08-19 21:21:241104semak imbas
Terdapat ciri CSS yang disokong dengan baik tetapi kurang dikenali, sangat berguna untuk jadual. Ia mengubah cara jadual dipaparkan supaya anda boleh mempunyai reka letak yang lebih dipercayai dan konsisten. Memformat jadual dengan betul adalah berfaedah kerana ia menjadikan halaman web lebih mesra pengguna dan membantu pengguna memahami maklumat dalam jadual dengan lebih jelas.
Artikel ini akan mengajar anda cara mengelakkan "ralat" pemformatan jadual dalam HTML. Sebelum kita menyelami artikel ini, mari kita lihat jadual dalam HTML.
Jadual HTML
Jadual HTML dibuat menggunakan teg
| Elemen di bawah | lalai kepada teks biasa dan dijajar ke kiri.
Jadual HTML membenarkan pengarang halaman web menyusun teks, imej, pautan, jadual lain dan data lain ke dalam sel dalam baris dan lajur. SintaksBerikut ialah sintaks jadual HTML <table>…</table> Pertimbangkan contoh berikut untuk lebih memahami cara mengelakkan pemformatan jadual HTML yang "salah". ContohDalam contoh di bawah, kami menggunakan CSS bersama-sama dengan ketinggian jadual yang dinyatakan sebelum ini untuk mengelakkan pemformatan jadual "salah". <!DOCTYPE html>
<html>
<body>
<style>
table, td {
width: 100%;
border: 2px solid #82E0AA ;
border-collapse: collapse;
}
td {
height: 52px;
width: 52%;
}
td[rowspan="2"] {
height: 110px;
}
</style>
<table>
<tbody>
<tr>
<td colspan="2">1.MSD</td>
</tr>
<tr>
<td rowspan="2">2.VIRAT</td>
<td>3.YUVI</td>
</tr>
</tbody>
</table>
</body>
</html>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang mengandungi jadual yang diisi dengan data dalam format yang betul untuk dipaparkan pada halaman web. ContohPertimbangkan contoh berikut, kami ingin mempunyai imej sebagai imej latar belakang jadual, kami akan menambahnya menggunakan CSS untuk mengelakkan "pepijat" dengan format jadual. <!DOCTYPE html>
<html>
<body>
<table border = "2" bordercolor = "#BB8FCE" background = "https://www.tutorialspoint.com/images/asp.net_mvc_icon.svg">
<tr>
<th>Stream</th>
<th>Course</th>
<th>Amount</th>
</tr>
<tr>
<td rowspan = "2">Technical</td>
<td>HTML</td><td>6000</td>
</tr>
<tr>
<td>JAVA</td>
</tr>
</table>
</body>
</html>
Selepas menjalankan kod di atas, tetingkap output akan muncul menunjukkan imej yang mengandungi data dan ditambah sebagai latar belakang pada jadual yang dipaparkan pada halaman web. ContohMari kita lihat perkara berikut, kita akan menggunakan ketinggian dan lebar jadual untuk membuat jadual dalam format yang kita kehendaki untuk mengelakkan pemformatan jadual "salah". <!DOCTYPE html>
<html>
<body>
<table border = "2" bordercolor="#CCCCFF" width = "300" height = "100">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Apabila skrip dilaksanakan, ia menghasilkan output yang mengandungi jadual yang dilukis pada halaman web dengan CSS digunakan dalam format yang dikehendaki. |
Atas ialah kandungan terperinci Bagaimanakah saya boleh menghalang jadual HTML saya daripada diformat secara tidak betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!