09 December 2010

Membuat Border Tabel menjadi Tipis

Masih banyak para blogger yang enggan menggunakan tabel dalam postingannya. Banyak alasan kenapa mereka tidak mau menggunakan tabel. Salah satunya adalah karena garis yang ada terlalu tebal meskipun sudah diberi angka 1 pada border. Sehingga mereka terpaksa menghindarinya, daripada postingan jadi kelihatan tidak ca'em. Padahal, ada cara sederhana untuk membuat border pada table menjadi tipis atau setebal garis biasa.

Ini contoh tabel seperti yang biasa Anda gunakan.
Kalau kita ketikkan kode html seperti di bawah ini,

<table border="1">
<tr align="center">
<td>Baris pertama colom pertama juga</td>
<td>baris pertama tapi kolom kedua</td></tr>
<tr align="center"><td>Yang ini baris kedua di kolom pertama</td>
<td>kalau yang ini baris dan kolomnya kedua</td></tr></table>

maka hasilnya akan seperti ini
Baris pertama colom pertama juga baris pertama tapi kolom kedua
Yang ini baris kedua di kolom pertama kalau yang ini baris dan kolomnya kedua

tapi bila kita tambahkan kata style="border-collapse:collapse;" setelah kata border sehingga kodenya menjadi seperti ini

<table border="1" style="border-collapse:collapse;">
<tr align="center">
<td>Baris pertama colom pertama juga</td>
<td>baris pertama tapi kolom kedua</td></tr>
<tr align="center"><td>Yang ini baris kedua di kolom pertama</td>
<td>kalau yang ini baris dan kolomnya kedua</td></tr></table>

maka tabelnya akan menjadi seperti ini

Baris pertama colom pertama juga baris pertama tapi kolom kedua
Yang ini baris kedua di kolom pertama kalau yang ini baris dan kolomnya kedua

Gimana, mudahkan?

2 komentar:

and on August 15, 2013 at 3:58 AM said...

Sipp, ini yg ane cari2, thanks bo

Ghifar Goodunk on September 8, 2017 at 11:47 PM said...

thanks gan.. sangat bermanfaat

Post a Comment

Berikan komentar Anda dengan santun

 
free counters

Pokjar nGeblog