Mengatur Jarak Sel dalam Tabel Menggunakan CSS

Contoh Kasus:

Saya ingin memisahkan masing-masing sel dengan jarak 5px seperti terlihat pada gambar dibawah ini:

Pertanyaan:
Bagaimana cara membuatnya … ?

Jawaban:

Buatlah satu file HTML bernama jarak_sel_tabel.html dengan isi seperti dibawah ini:

<style> 

table{

border-collapse:separate;

border-spacing:5px;

}

table, td{

border:1px solid black;

}
</style>

 

<table>

<tr>

<td>Sel 1</td><td>Sel 2</td>

</tr>

<tr>

<td>Sel 3</td><td>Sel 4</td>

</tr>

</table>

Keterangan:

  • border-collapse:separate, Kode ini digunakan untuk membuat jenis border terpisah sehingga masing-masing selnya terpisah seperti terlihat pada gambar diatas.
  • border-spacing:5px, Kode ini digunakan untuk membuat jarak 5px antara masing-masing sel.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *