Ubah Jadual HTML kepada Paparan Kad Menggunakan Tiada Tapi CSS

Saya ingin berkongsi percubaan baru-baru ini yang meneroka cara mengubah jadual HTML biasa dan lama kepada paparan kad dinamik, melangkaui baris dan lajur tradisional.

Mulakan Dengan Jadual HTML Mudah

Mari kita mulakan dengan jadual HTML ringkas seperti berikut.

<table>  
  <thead>  
    <tr>  
      <th>Company</th>  
      <th>Contact</th>  
      <th>Country</th>  
    </tr>  
  </thead>  
  <tbody>  
  <tr>  
    <td>Alfreds Futterkiste</td>  
    <td>Maria Anders</td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro Moctezuma</td>  
    <td>Francisco Chang</td>  
    <td>Mexico</td>  
  </tr>    
  <tr>  
    <td>Alfreds </td>  
    <td>Maria </td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro  </td>  
    <td>Francisco Chang</td>  
    <td>Mexico</td>  
  </tr>  
  <tr>  
    <td>Alfreds </td>  
    <td>Maria </td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro comercial </td>  
    <td>Francisco </td>  
    <td>Mexico</td>  
  </tr>  
  <tr>  
    <td>Alfreds </td>  
    <td>Maria Anders</td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro comercial </td>  
    <td>Francisco </td>  
    <td>Mexico</td>  
  </tr>  
  </tbody>  
</table>

Nampaknya begini apabila dipaparkan dalam penyemak imbas.

Hanya satu lagi jadual html

Tiada yang mewah.

Mengikut takrifan, jadual terdiri daripada baris dan lajur. Bagaimanakah kita boleh mengubah reka letak baris dan lajur tradisional kepada sesuatu yang lebih dinamik?

Temui Kuasa Grid CSS

Meja tidak perlu membosankan. Dengan beberapa helah CSS yang mudah, anda boleh mengubah jadual HTML tradisional menjadi paparan senarai atau kad yang kemas.

Bahagian terbaik? Tiada JavaScript, hanya CSS tulen!

Grid CSS telah menjadi Draf Pengesyoran Calon W3C sejak 2007, namun, ia telah diterima pakai oleh versi terkini semua penyemak imbas utama semasa.

Grid CSS direka bentuk untuk kedua-dua baris dan lajur, menjadikannya sesuai untuk reka letak yang kompleks seperti jadual. Ia membolehkan anda mengurus kedua-dua penjajaran mendatar dan menegak secara serentak, yang memberikan anda lebih banyak kawalan daripada Flexbox, yang terutamanya satu dimensi (baris atau lajur).

Ciri Grid CSS untuk Digunakan

1. Gunakan CSS grid layout*t* untuk dan .
2. Gunakan sifat paparan CSS dan tetapkan semua menjadi elemen blok

   Dengan sifat grid CSS, jadual HTML biasa kami telah bertukar secara ajaib menjadi paparan senarai responsif, memaparkan setiap rekod dengan kemas dalam satu lajur.

   table tbody, table thead {  
     display: grid;  
   }  
   table td {  
     display: block;  
   }
   

   

   Ia kelihatan menyelerakan tetapi agak huru-hara! Mari taburkan pada beberapa jidar CSS untuk memberi setiap baris dalam senarai kami sedikit ruang bernafas.

   table, th, tr {  
     border: 1px solid black;  
   }
   

   Itulah. Lihat wajah baharu! Tidak terlalu lusuh untuk paparan senarai yang dibuat tanpa satu baris sihir JavaScript!

   

   Sekarang kami mendapat senarai bagus yang dibuat daripada jadual html lama, bagaimanakah kita menukar senarai bagus itu kepada paparan kad yang menarik?

   Amaran spoiler: hanya taburkan pada beberapa baris CSS lagi!

   Ubah Senarai kepada Paparan Kad

   Helah kad terakhir kami untuk mengubah jadual menjadi kad ialah menggunakan lajur grid-template-sifat grid CSS:

   table tbody {  
     display: grid;  
     grid-template-columns: repeat(4, 1fr);  
   }
   

   grid-template-columns ialah sifat CSS yang digunakan dalam reka letak Grid CSS untuk mentakrifkan struktur lajur grid. Ia menentukan bilangan lajur, lebarnya dan cara ruang dalam grid dibahagikan.

   Dengan fungsi repeat(), parameter pertama membolehkan kami menentukan bilangan lajur yang kami mahu—katakan 4, kerana siapa yang tidak suka nombor bulat yang bagus? Parameter kedua memberitahu lajur tersebut betapa besarnya—1fr, atau satu pecahan ruang yang tersedia. Ia seperti memberi sedikit semangat pada lajur anda: 'Anda semua mendapat kepingan pai angkasa yang sama!'

   Paparan kad terakhir kami

   

   Luangkan sedikit masa untuk meneroka kod dan lihat sendiri hasilnya di CodePen. Ia adalah tempat yang sesuai untuk mencuba dan bermain-main dengan transformasi grid CSS. Anda juga mungkin menemui beberapa kejutan yang menyeronokkan sepanjang perjalanan.

   Perlu diingat bahawa Grid CSS juga responsif, memberikan pembangun kawalan yang dipertingkatkan ke atas cara reka letak melaras dan mengalir semula merentas pelbagai saiz dan peranti skrin.

   Pilihan: Menambah label data pada paparan kad

   Walaupun paparan kad menarik secara visual, ia tidak mempunyai kejelasan maklumat lajur, menyebabkan pengguna meneka data yang diwakili dalam setiap kad.

   Dengan menggabungkan sentuhan JavaScript, kami boleh menambahkan label data untuk setiap lajur dengan lancar, meningkatkan perkaitan antara label dan sel yang sepadan dengannya.

   <table>  
     <thead>  
       <tr>  
         <th>Company</th>  
         <th>Contact</th>  
         <th>Country</th>  
       </tr>  
     </thead>  
     <tbody>  
     <tr>  
       <td>Alfreds Futterkiste</td>  
       <td>Maria Anders</td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro Moctezuma</td>  
       <td>Francisco Chang</td>  
       <td>Mexico</td>  
     </tr>    
     <tr>  
       <td>Alfreds </td>  
       <td>Maria </td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro  </td>  
       <td>Francisco Chang</td>  
       <td>Mexico</td>  
     </tr>  
     <tr>  
       <td>Alfreds </td>  
       <td>Maria </td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro comercial </td>  
       <td>Francisco </td>  
       <td>Mexico</td>  
     </tr>  
     <tr>  
       <td>Alfreds </td>  
       <td>Maria Anders</td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro comercial </td>  
       <td>Francisco </td>  
       <td>Mexico</td>  
     </tr>  
     </tbody>  
   </table>
   

   Kini kelihatan seperti ini

   

   Demo

   Ia tidak seperti jadual html yang kami mulakan. Dengan Grid CSS, pilihan reka letak tidak berkesudahan kerana ia membenarkan kawalan penuh ke atas kedua-dua baris dan lajur dalam ruang dua dimensi.

   Kesimpulan

   Tutorial ini hanya mencalarkan permukaan gunung ais. Anda boleh dengan mudah membuat reka letak yang lebih responsif, elemen bertindih, rentang item merentas berbilang baris atau lajur dan melaraskan kawasan grid secara dinamik, menjadikannya sangat serba boleh untuk pelbagai keperluan reka letak.

   Selamat menjaring!

   Mengenai Pengarang

   Pengarang ialah pembangun web veteran yang mencipta alat datagrid PHP (phpgrid.com) yang popular, menggunakan kuasa CRUD untuk menjadikan dunia tempat yang lebih baik — sekurang-kurangnya untuk pembangun yang ingin memudahkan kehidupan mereka!

Atas ialah kandungan terperinci Ubah Jadual HTML kepada Paparan Kad Menggunakan Tiada Tapi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!