Bagaimana Menambahkan Spasi Antar Kolom Tanpa Mempengaruhi Baris dalam Tabel HTML?
Properti padding left dan right digunakan untuk menambah spasi antar kolom tanpa mempengaruhi tata letak tabel secara keseluruhan. Properti ini memungkinkan pengembang untuk menambahkan spasi ekstra dan spasi ini tidak memengaruhi baris.
Ikuti langkah-langkah di bawah ini:
Langkah 1: Buat Struktur Tabel
Misalkan ada tabel di file HTML yang berisi empat baris dan tiga kolom:
< meja >
< tr >
< th > Nama < / th >
< th > Kelas < / th >
< th > Kota < / th >
< / tr >
< tr >
< td > Yohanes < / td >
< td > Kimia BS < / td >
< td > London < / td >
< / tr >
< tr >
< td > Alexander < / td >
< td > Matematika BS < / td >
< td > Tokyo < / td >
< / tr >
< tr >
< td > Yusuf < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / meja >
Setelah mengeksekusi halaman web kode di atas terlihat seperti ini:
Output mengonfirmasi bahwa struktur tabel telah dibuat.
Langkah 2: Menerapkan Horizontal Padding
Untuk menambahkan spasi antar kolom dari sisi kiri, gunakan tombol “ padding-kiri ” Properti CSS. Setelah menerapkan properti ini, data terlihat seperti perataan yang tepat. Pasalnya padding hanya diterapkan dari sisi kiri.
Sekarang pilih elemen 'td' di bagian CSS dari gaya yang dapat diterapkan menggunakan metode inline. Kemudian, tambahkan bantalan “ 50px ” untuk menambahkan spasi dan menambahkan properti perbatasan untuk tujuan visualisasi yang lebih baik:
td {padding-kiri: 50px;
berbatasan : 2px merah pekat;
}
Setelah mengeksekusi kode, halaman web terlihat seperti ini:
Output menampilkan bahwa spasi ditambahkan di antara kolom tabel.
Sekarang, untuk menyetel padding dari sisi kanan, tombol “ padding-kanan ” properti digunakan. Dengan cara yang sama, tetapi sekarang data sel terlihat “ rata kiri ”. Kodenya adalah:
td {padding-kiri: 50px;
berbatasan : 2px merah pekat;
}
Setelah mengeksekusi kode di atas, halaman web terlihat seperti ini:
Output menegaskan bahwa ruang antara kolom meningkat dengan menerapkan padding di sisi kanan.
Langkah 3: Kombinasi Bantalan Kiri dan Kanan
Seperti pada langkah di atas, data tidak sejajar tengah dalam kedua kasus dan itu membuat data menjadi tidak profesional. Untuk membuatnya menonjol tanpa merusak selera desain. Kedua properti dapat digunakan pada saat yang sama seperti di bawah ini:
td {padding-kanan: 60px;
padding-kiri: 60px;
berbatasan : 2px merah pekat;
}
Setelah mengeksekusi kode di atas, halaman web terlihat seperti ini:
Output mengonfirmasi bahwa ruang ditambahkan di antara kolom dan data juga rata tengah.
Kesimpulan
Ruang antara kolom tabel dapat ditambahkan dengan bantuan bantalan properti kiri dan kanan. Properti ini menambah ruang ekstra dari arah kanan dan kiri ke sel. Kedua properti tersebut dapat digunakan secara bersamaan atau terpisah. Artikel ini telah berhasil mendemonstrasikan cara menambahkan spasi antar kolom tabel tanpa mempengaruhi baris.