Menggunakan CSS untuk Menetapkan Pelapisan dan Jarak Sel Jadual

Lucas Simon

Ahad, 30 Jun 2024 11:26:03 PTG

Menggayakan Pelapik Jadual dan Jarak dengan CSS
Dalam jadual HTML, atribut `cellpadding` dan `cellspacing` secara tradisinya digunakan untuk menetapkan jarak dalam dan antara sel jadual. Walau bagaimanapun, apabila pembangunan web berkembang, penggunaan CSS untuk tujuan penggayaan ini menjadi lebih berleluasa, menawarkan fleksibiliti dan kawalan yang lebih baik.
Artikel ini meneroka cara untuk meniru kesan `cellpadding` dan `cellpacing` menggunakan CSS. Dengan memahami kaedah ini, pembangun boleh mencapai kod yang lebih boleh diselenggara dan berskala sambil mematuhi piawaian web moden.

Perintah Penerangan

border-collapse: separate; Menetapkan semula sifat runtuh sempadan kepada lalai, membenarkan penggunaan jarak sempadan.

border-spacing Menentukan jarak antara sempadan sel bersebelahan dalam jadual.

padding Menetapkan padding di dalam sel jadual, serupa dengan atribut cellpadding HTML.

querySelectorAll Memilih semua elemen yang sepadan dengan pemilih CSS tertentu dalam dokumen.

forEach Melaksanakan fungsi yang disediakan sekali untuk setiap elemen tatasusunan, biasanya digunakan dengan NodeList daripada querySelectorAll.

style Mendapat atau menetapkan atribut gaya elemen, membenarkan kemas kini dinamik pada sifat CSS melalui JavaScript.

Perintah	Penerangan
border-collapse: separate;	Menetapkan semula sifat runtuh sempadan kepada lalai, membenarkan penggunaan jarak sempadan.
border-spacing	Menentukan jarak antara sempadan sel bersebelahan dalam jadual.
padding	Menetapkan padding di dalam sel jadual, serupa dengan atribut cellpadding HTML.
querySelectorAll	Memilih semua elemen yang sepadan dengan pemilih CSS tertentu dalam dokumen.
forEach	Melaksanakan fungsi yang disediakan sekali untuk setiap elemen tatasusunan, biasanya digunakan dengan NodeList daripada querySelectorAll.
style	Mendapat atau menetapkan atribut gaya elemen, membenarkan kemas kini dinamik pada sifat CSS melalui JavaScript.

Melaksanakan CSS untuk Pelapisan Meja dan Jarak

Dalam skrip pertama, kami menggunakan HTML dan CSS asas untuk meniru kesan daripada dan sifat-sifat. Dengan menetapkan kepada separate, kami memastikan sel jadual tidak runtuh menjadi satu sempadan, yang membolehkan kami menentukan jarak antara sel menggunakan harta benda. Ini bersamaan dengan tetapan dalam HTML. Begitu juga dengan harta di dalam td dan pemilih meniru atribut dengan menetapkan padding 1 piksel dalam setiap sel. Pendekatan ini menyediakan kaedah mudah untuk mencapai jarak yang diingini semata-mata melalui CSS, meningkatkan fleksibiliti dan kebolehselenggaraan kod.

Skrip kedua menunjukkan kaedah dinamik menggunakan JavaScript bersama CSS. Selepas mentakrifkan struktur jadual awal dan penggayaan asas dalam HTML, kami menggunakan JavaScript untuk melaraskan jarak jadual secara dinamik. The fungsi digunakan untuk memilih jadual mengikut IDnya. Kami kemudian meletakkan meja harta kepada '1px' untuk mencapai kesan yang sama seperti atribut. Seterusnya, kita gunakan querySelectorAll untuk memilih semua dan elemen dalam jadual, dan kaedah untuk mengulangi elemen ini, menggunakan 1 piksel padding kepada setiap. Skrip ini mempamerkan cara JavaScript boleh digunakan untuk mempertingkatkan kefungsian CSS, membenarkan kemas kini dinamik pada penggayaan jadual berdasarkan keadaan tertentu atau interaksi pengguna.

Menukar Pelapik dan Jarak Sel Jadual kepada CSS

Menggunakan HTML dan CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: separate; /* Resets spacing */
      border-spacing: 1px; /* Equivalent to cellspacing="1" */
    }
    td, th {
      padding: 1px; /* Equivalent to cellpadding="1" */
    }
  </style>
</head>
<body>
  <table>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </table>
</body>
</html>

Pendekatan Dinamik untuk Melaraskan Pelapik Meja dan Jarak

Menggunakan JavaScript dan CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: separate;
    }
    td, th {
      padding: 1px;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </table>
  <script>
    const table = document.getElementById('myTable');
    table.style.borderSpacing = '1px';
    const cells = table.querySelectorAll('td, th');
    cells.forEach(cell => {
      cell.style.padding = '1px';
    });
  </script>
</body>
</html>

Teknik Lanjutan untuk Penggayaan Jadual dengan CSS

Di luar pelapik asas dan jarak, CSS menawarkan pelbagai teknik lanjutan untuk menggayakan jadual HTML. Salah satu teknik tersebut ialah penggunaan pseudo-class seperti dan untuk menggayakan baris atau lajur tertentu. Sebagai contoh, menggunakan boleh menggunakan gaya pada baris genap, membenarkan lorekan baris bergantian yang meningkatkan kebolehbacaan. Kaedah ini amat berguna untuk set data yang besar di mana pembezaan visual adalah penting. Kaedah lanjutan lain melibatkan penggunaan CSS Grid untuk membuat susun atur jadual yang kompleks. Walaupun Grid CSS biasanya digunakan untuk tujuan susun atur, ia juga boleh digunakan pada elemen jadual untuk mengawal kedudukan dan jarak sel, baris dan lajur dengan ketepatan.

Selain itu, menggabungkan peralihan CSS dan animasi dengan penggayaan jadual boleh meningkatkan pengalaman pengguna dengan ketara. Dengan menggunakan peralihan kepada kesan pada baris atau sel jadual, anda boleh mencipta jadual yang lebih interaktif dan menarik secara visual. Contohnya, menambah sedikit perubahan warna atau kesan penskalaan pada tuding memberikan maklum balas segera kepada pengguna yang berinteraksi dengan jadual. Tambahan pula, memanfaatkan memastikan bahawa jadual adalah responsif dan boleh diakses pada pelbagai peranti. Pertanyaan media membolehkan anda melaraskan reka letak jadual, saiz fon dan padding sel berdasarkan saiz skrin, memastikan pengalaman pengguna yang konsisten merentas desktop, tablet dan peranti mudah alih.

Bagaimanakah saya boleh menggunakan warna baris ganti dalam jadual?
guna atau dalam CSS anda untuk menyasarkan dan menggayakan baris ganti.
Bagaimanakah saya boleh menjadikan jadual responsif dengan CSS?
guna untuk melaraskan reka letak dan gaya jadual berdasarkan saiz skrin yang berbeza.
Apakah faedah menggunakan Grid CSS untuk jadual?
Grid CSS menyediakan kawalan tepat ke atas kedudukan dan jarak elemen jadual, membolehkan susun atur yang lebih kompleks dan fleksibel.
Bolehkah saya menambah kesan tuding pada baris jadual?
Ya, anda boleh menggunakan kelas pseudo untuk menggunakan gaya apabila pengguna menuding pada baris atau sel jadual.
Bagaimanakah cara saya menggunakan CSS untuk menyerlahkan lajur tertentu?
guna untuk menyasarkan dan menggayakan lajur tertentu dalam jadual anda.
Apakah faedah menggunakan kelas pseudo dengan jadual?
Pseudo-kelas seperti dan membenarkan penggayaan disasarkan, menjadikannya lebih mudah untuk menggunakan gaya tertentu pada baris atau lajur tertentu.
Bagaimanakah saya boleh menambah animasi pada sel jadual?
guna atau untuk mencipta kesan dinamik pada sel jadual, meningkatkan interaksi pengguna.
Adakah mungkin untuk menggayakan pengepala jadual secara berbeza daripada jadual yang lain?
Ya, anda boleh menggunakan pemilih untuk menggunakan gaya tertentu pada pengepala jadual, membezakannya daripada sel jadual lain.

Menggunakan CSS untuk mengurus jadual dan menawarkan alternatif moden dan cekap kepada atribut HTML tradisional. Dengan menggunakan sifat CSS seperti dan padding, anda boleh mencapai kesan visual yang sama dengan lebih fleksibiliti dan kawalan. Kaedah ini meningkatkan kebolehselenggaraan dan kebolehskalaan kod anda, memastikan jadual anda kekal responsif dan menarik secara visual merentas peranti dan saiz skrin yang berbeza.