Ketahui cara membuat sempadan jadual CSS hanya dalam masa lima minit
Anda mungkin pernah mendengar bahawa jadual CSS dan HTML tidak bercampur-campur. Ini tidak benar. Ya, menggunakan jadual HTML untuk susun atur bukan lagi amalan terbaik reka bentuk web, telah digantikan dengan gaya susun atur CSS, tetapi jadual masih merupakan markup yang betul untuk digunakan untuk menambah data jadual ke laman web.
Sayangnya, kerana begitu banyak profesional web telah menjauhkan diri dari meja yang berfikir bahawa mereka adalah racun, ramai profesional yang mempunyai sedikit pengalaman bekerja dengan unsur HTML biasa ini dan perjuangan ketika mereka harus mengendalikannya di laman web. Sebagai contoh, jika anda mempunyai jadual pada halaman dan anda ingin menambah baris dalaman ke sel jadual.
Border Jadual CSS
Apabila anda menggunakan CSS untuk menambah sempadan pada jadual, ia hanya menambah sempadan di luar meja. Sekiranya anda mahu menambah baris dalaman ke sel individu di dalam jadual itu, anda perlu menambah sempadan ke elemen CSS dalaman. Anda juga boleh menggunakan tag HR untuk menambah baris dalam sel individu.
Untuk menggunakan gaya yang diliputi dalam artikel ini, anda sepatutnya mempunyai jadual di laman web anda. Anda perlu membuat helaian gaya sebagai hela gaya dalaman di kepala dokumen anda (kemungkinan besar anda hanya akan melakukan ini jika "laman" anda adalah halaman tunggal) atau melekat pada dokumen sebagai hela gaya luaran (inilah yang anda akan dilakukan jika laman web anda adalah berbilang halaman - membolehkan anda menyusun semua halaman dari satu helaian luaran). Anda akan meletakkan gaya untuk menambah garisan dalaman ke dalam helaian gaya itu.
Sebelum awak mula
Mula-mula anda perlu membuat keputusan di mana anda ingin baris muncul di dalam jadual anda. Anda mempunyai beberapa pilihan, termasuk:
- Mengelilingi semua sel untuk membentuk grid;
- Memaparkan garis antara hanya lajur;
- Hanya di antara baris; atau
- Antara lajur atau baris tertentu.
Anda juga boleh meletakkan garis di sekeliling sel individu atau di dalam sel-sel individu.
Cara Menambah Talian Sekitar Semua Sel dalam Jadual
Untuk menambah garisan di sekeliling semua sel di dalam jadual anda, buat kesan grid seperti itu, tambahkan yang berikut ke helaian gaya anda:
td, th {
sempadan: pepejal 1px hitam;
}
Cara Menambah Talian Antara Hanya Lajur dalam Jadual
Untuk menambah baris di antara lajur (ini mewujudkan garis menegak yang berjalan dari atas ke bawah pada lajur jadual), tambahkan yang berikut pada helaian gaya anda:
td, th {
border-left: pepejal 1px hitam;
}
Kemudian, jika anda tidak mahu mereka muncul di lajur pertama, anda perlu menambah kelas kepada sel-sel dan sel td . Dalam contoh ini, kami mengandaikan kami mempunyai kelas tidak ada sempadan pada sel-sel tersebut dan kami mengalih keluar sempadan dengan peraturan CSS yang lebih spesifik ini. Jadi di sini adalah kelas HTML yang akan kami gunakan:
kelas = "no-border">
Dan kemudian kami dapat menambah gaya berikut dengan helaian gaya kami:
.no-border {
border-left: none;
}
Bagaimana Menambah Talian Hanya Antara Baris dalam Jadual
Seperti menambah garis di antara lajur, anda boleh melakukan ini dengan hanya satu gaya ringkas yang ditambahkan pada helaian gaya anda. CSS di bawah ini akan menambah baris menegak antara setiap baris jadual kami:
tr {
sempadan bawah: pepejal 1px hitam;
}
Dan untuk mengalih keluar sempadan dari bahagian bawah jadual, anda sekali lagi akan menambah satu kelas kepada tag tr:
kelas = "no-border">
Tambahkan gaya berikut pada helaian gaya anda:
.no-border {
sempadan bawah: tiada;
}
Bagaimana Menambah Talian Antara Lajur atau Baris Tertentu dalam Jadual
Jika anda hanya mahukan garis antara baris atau lajur tertentu, anda perlu menggunakan kelas pada sel atau baris tersebut. Menambah garis di antara lajur sedikit lebih sukar daripada barisan kerana anda perlu menambah kelas ke setiap sel dalam lajur tersebut. Jika jadual anda dihasilkan secara automatik dari CMS semacam ini, ini mungkin tidak mungkin, tetapi jika anda adalah pengekodan tangan halaman, anda boleh menambah kelas yang sesuai seperti yang diperlukan untuk mencapai kesan ini.
class = "border-side">
Menambah barisan di antara baris adalah lebih mudah, kerana anda hanya boleh menambah kelas ke barisan yang anda mahukan garis pada.
kelas = "border-bottom">
Kemudian tambah CSS pada helaian gaya anda:
.border side {
border-left: pepejal 1px hitam;
}
.border-bottom {
sempadan bawah: pepejal 1px hitam;
}
Bagaimana Menambah Talian Sekitar Sel Individu dalam Jadual
Untuk menambah garisan di sekeliling sel-sel individu, anda menambah kelas ke sel yang anda mahu sempadan di sekeliling:
kelas = "sempadan">
Dan kemudian tambahkan CSS berikut ke helaian gaya anda:
.border {
sempadan: pepejal 1px hitam;
}
Bagaimana Menambah Talian Di Dalam Sel Individu dalam Jadual
Jika anda ingin menambah baris di dalam kandungan sel, cara termudah untuk melakukan ini adalah dengan tag peraturan mendatar (
).
Tips berguna
Sekiranya anda perhatikan jurang di sempadan anda, anda mesti pastikan gaya keruntuhan sempadan diset pada jadual anda. Tambahkan perkara berikut dengan helaian gaya anda:
jadual {
runtuhan sempadan: runtuh;
}
Anda boleh mengelakkan semua CSS di atas dan menggunakan atribut sempadan dalam tag jadual anda. Sedarilah, bagaimanapun, bahawa atributnya, walaupun tidak ditolak, adalah kurang fleksibel daripada CSS, kerana anda hanya dapat menentukan lebar sempadan dan hanya dapat memilikinya di sekeliling semua sel di meja atau tidak.