Bagaimanakah saya boleh menghalang jadual HTML saya daripada diformat secara tidak betul?-html tutorial-php.cn

Bagaimanakah saya boleh menghalang jadual HTML saya daripada diformat secara tidak betul?

WBOY

Lepaskan： 2023-08-19 21:21:24

ke hadapan

1101 orang telah melayarinya

Bagaimanakah saya boleh menghalang jadual HTML saya daripada diformat secara tidak betul?

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

di mana teg digunakan untuk membuat baris jadual dan 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.

Sintaks

Berikut ialah sintaks jadual HTML

<table>…</table>

Salin selepas log masuk

Pertimbangkan contoh berikut untuk lebih memahami cara mengelakkan pemformatan jadual HTML yang "salah".

Contoh

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

Salin selepas log masuk

Apabila skrip dilaksanakan, ia akan menghasilkan output yang mengandungi jadual yang diisi dengan data dalam format yang betul untuk dipaparkan pada halaman web.

Contoh

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

Salin selepas log masuk

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.

Contoh

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

Salin selepas log masuk

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!