Bagaimana untuk Menambah Ruang Antara Lajur Tanpa Menjejaskan Baris dalam Jadual HTML?
Sifat padding kiri dan kanan digunakan untuk menambah jarak antara lajur tanpa menjejaskan reka letak keseluruhan jadual. Sifat ini membenarkan pembangun menambah jarak tambahan dan jarak ini tidak menjejaskan baris.
Ikuti langkah di bawah:
Langkah 1: Buat Struktur Jadual
Katakan terdapat jadual dalam fail HTML yang mengandungi empat baris dan tiga lajur:
< meja >
< tr >
< ke > Nama < / ke >
< ke > Kelas < / ke >
< ke > Bandar < / ke >
< / tr >
< tr >
< td > John < / td >
< td > BS Chem < / td >
< td > London < / td >
< / tr >
< tr >
< td > Alexander < / td >
< td > BS Matematik < / td >
< td > Tokyo < / td >
< / tr >
< tr >
< td > Yusuf < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / meja >
Selepas melaksanakan halaman web kod di atas kelihatan seperti ini:
Output mengesahkan bahawa struktur jadual telah dibuat.
Langkah 2: Memohon Padding Mendatar
Untuk menambah jarak antara lajur dari sebelah kiri, gunakan ' padding-left ” Harta CSS. Selepas menggunakan sifat ini, data kelihatan seperti penjajaran yang betul. Sebabnya padding hanya digunakan dari sebelah kiri.
Sekarang pilih elemen 'td' dalam bahagian CSS gaya yang boleh digunakan menggunakan kaedah sebaris. Kemudian, tambahkan pelapik ' 50px ” untuk menambah jarak dan menambah sifat sempadan untuk tujuan visualisasi yang lebih baik:
td {padding-left: 50px;
sempadan : 2px merah pepejal;
}
Selepas melaksanakan kod, halaman web kelihatan seperti ini:
Output memaparkan bahawa ruang ditambah antara lajur jadual.
Sekarang, untuk menetapkan pelapik dari sebelah kanan, “ padding-kanan ” harta digunakan. Dengan cara yang sama, tetapi kini data sel kelihatan ' dijajar ke kiri ”. Kodnya ialah:
td {padding-left: 50px;
sempadan : 2px merah pepejal;
}
Selepas melaksanakan kod di atas, halaman web kelihatan seperti ini:
Output mengesahkan bahawa ruang antara lajur ditambah dengan menggunakan padding di sebelah kanan.
Langkah 3: Gabungan Padding Kiri dan Kanan
Seperti dalam langkah di atas, data tidak dijajarkan ke tengah dalam kedua-dua kes dan itu menjadikan data tidak profesional. Untuk menjadikannya menonjol tanpa melanggar rasa reka bentuk. Kedua-dua sifat boleh digunakan pada masa yang sama seperti di bawah:
td {padding-kanan: 60px;
padding-left: 60px;
sempadan : 2px merah pepejal;
}
Selepas melaksanakan kod di atas, halaman web kelihatan seperti ini:
Output mengesahkan bahawa ruang ditambah antara lajur dan data juga dijajarkan ke tengah.
Kesimpulan
Ruang antara lajur jadual boleh ditambah dengan bantuan padding sifat kiri dan kanan. Sifat ini menambah ruang tambahan dari arah kanan dan kiri ke sel. Kedua-dua sifat boleh digunakan pada masa yang sama atau secara berasingan. Artikel ini telah berjaya menunjukkan cara menambah jarak antara lajur jadual tanpa menjejaskan baris.