Bagaimana untuk membuat jadual bersarang dalam HTML?-html tutorial-php.cn

Bagaimana untuk membuat jadual bersarang dalam HTML?

PHPz

Lepaskan： 2023-09-09 22:05:02

ke hadapan

2224 orang telah melayarinya

Bagaimana untuk membuat jadual bersarang dalam HTML?

Jadual ialah aspek asas dan penting dalam pembangunan web dan digunakan untuk menyampaikan maklumat dalam format yang teratur dan jelas. Walau bagaimanapun, mungkin terdapat situasi di mana data yang lebih kompleks perlu dibentangkan, memerlukan penggunaan jadual bersarang. Jadual bersarang ialah jadual yang terletak dalam sel jadual lain. Dalam artikel ini, kami akan membimbing anda melalui proses membina jadual bersarang dalam HTML dan membantu anda memahami konsep dengan lebih berkesan dengan penerangan yang teliti dan terperinci, lengkap dengan ilustrasi. Sama ada anda seorang pemula atau pereka web berpengalaman, artikel ini akan memberikan anda pengetahuan dan kepakaran yang anda perlukan untuk menjadi mahir dalam mencipta jadual bersarang menggunakan HTML.

Sebelum kita mula meneroka membuat jadual bersarang, adalah perlu untuk memahami komposisi asas jadual HTML. Jadual HTML dibentuk melalui pelaksanaan elemen Setiap elemen mewakili sel dalam jadual.

Kaedah

Kaedah berikut yang ditunjukkan di sini digunakan untuk membuat jadual bersarang dalam jadual. Untuk melakukan ini, kami mula-mula membuat jadual utama dengan membungkus elemen Jadual utama ditakrifkan dengan nama kelas "main-table". Dalam jadual utama, kami mempunyai dua sel yang ditakrifkan menggunakan elemen Sel pertama mengandungi jadual bersarang yang terkandung dalam elemen Jadual bersarang ditakrifkan dengan nama kelas "nested-table". Sel jadual bersarang ditakrifkan menggunakan elemen Sel kedua jadual utama mengandungi teks, tetapi tiada jadual bersarang.

Untuk memastikan jadual dipaparkan dengan betul, kami menggunakan CSS untuk menentukan beberapa gaya. Lebar elemen jadual ditetapkan kepada 100% dan nilai runtuh sempadan ditetapkan untuk runtuh. Sel kedua-dua jadual utama dan jadual bersarang mempunyai jidar hitam 1 piksel dan padding 8 piksel. Penjajaran teks semua sel ditetapkan ke kiri.

Selain itu, kami juga menentukan warna latar belakang untuk jadual utama dan jadual bersarang menggunakan CSS. Warna latar belakang jadual utama ialah kelabu muda dan warna latar belakang jadual bersarang berwarna kelabu gelap sedikit. Dengan mengikuti langkah ini, anda boleh membuat jadual bersarang dengan mudah dalam jadual HTML dan menggunakan gaya padanya menggunakan CSS.

Contoh

Berikut ialah kod lengkap yang akan kita lihat dalam contoh ini -

<!DOCTYPE html>
<html>
<head>
   <title>How to create nested tables within tables in HTML?</title>
   <style>
      table {
         border-collapse: collapse;
         width: 100%;
      }
      td, th {
         border: 1px solid black;
         padding: 8px;
         text-align: left;
      }
      .main-table {
         background-color: #f2f2f2;
      }
      .nested-table {
         background-color: #e6e6e6;
      }
   </style>
</head>
<body>
   <h4>How to create nested tables within tables in HTML?</h4>
   <table class="main-table">
      <tr>
         <td>
            Main table cell 1
            <table class="nested-table">
               <tr>
                  <td>Nested table cell 1</td>
                  <td>Nested table cell 2</td>
               </tr>
            </table>
         </td>
         <td>Main table cell 2</td>
      </tr>
   </table>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Akhirnya, menjana jadual terbenam dalam HTML ialah tugas mudah yang memerlukan pemahaman asas komposisi jadual HTML. Dengan mengikuti langkah-langkah yang dijelaskan dalam artikel ini, anda boleh menjana jadual terbenam dengan mudah yang mempersembahkan data kompleks dengan cara yang sistematik dan mudah difahami. Sama ada anda perlu membentangkan sejumlah besar data atau hanya mahu membentangkannya dalam reka letak yang tepat, jadual terbenam ialah alat yang berguna untuk mana-mana pereka web. Dengan kepakaran yang diperoleh daripada artikel ini, anda kini mempunyai keupayaan untuk mencipta jadual terbenam dalam HTML dan membawa reka bentuk web anda ke peringkat seterusnya.

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