Saat membuat tabel pada blogger.com, mungkin begitu banyak orang komplain. "Lho, koq jadi banyak spasi begini?". Hohohoho... Tenang saja ada solusinya. Yups, actually ada 2 solusi yang aku tahu selama aku belajar nge-blog. Kata orang ilmu seseorang kan nambah jika dibagi-bagikan. So, biar ilmuku nambah, akan kubagikan ilmuku ini. Simak terusss...
Btw, kenapa muncul banyak spasi ketika kita buat tabel (lewat tag HTML tentunya)? Karena saat kita membuat tabel, biasanya kita akan menekan tombol ENTER pada tiap peralihan command HTML dengan tujuan supaya tag tersebut bisa dibaca dengan nyaman oleh mata manusia. Ya enggak? Nah, ENTER yang kepencet akan terakumulasi sehingga membuat jarak spasi yang banyaknya.
maka tag HTML-nya:
<table width="96%" align="center" border="1" bordercolor="black">
<tbody>
<tr style="text-align: center; font-weight: bold;">
<td>Nama</td>
<td>NIM</td>
<td>IPK</td>
</tr>
<tr>
<td>Paijo</td>
<td>113090001</td>
<td>3.9</td>
</tr>
<tr>
<td>Painem</td>
<td>113090002</td>
<td>3.9</td>
</tr>
</tbody>
</table>
Nah, jika kamu pake tag macam itu, nanti akan muncul spasi diatas tabel yang memisahkan text terakhir mu dengan tabel. So, ini solusinya:
1. Jangan gunakan tombol Enter, jadi begini:
<table width="96%" align="center" border="1" bordercolor="black"><tbody><tr style="text-align: center; font-weight: bold;"><td>Nama</td><td>NIM</td><td>IPK</td></tr><tr><td>Paijo</td><td>1130900019</td><td>3.9</td></tr><tr><td>Painem</td><td>113090002</td><td>3.9</td></tr><tbody></table>
Tapi menggunakan cara itu menjadikan tag HTML yang kita buat menjadi sangat tidak nyaman untuk dilihat. Terus, gimana donk? Tenang masih ada cara ke-2
2. Tambahkan kode berikut:
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
//Put Your HTML table tag here//
</div>
Nah, nanti kodenya jadi seperti ini:
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table width="96%" align="center" border="1" bordercolor="black">
<tbody>
<tr style="text-align: center; font-weight: bold;">
<td>Nama</td>
<td>NIM</td>
<td>IPK</td>
</tr>
<tr>
<td>Paijo</td>
<td>113090001</td>
<td>3.9</td>
</tr>
<tr>
<td>Painem</td>
<td>113090002</td>
<td>3.9</td>
</tr>
</tbody>
</table>
</div>
Dengan demikian, tag HTML tetap enak dipandang namun tabel yang kita buat tetap dalam kondisi normal tanpa spasi yang berlebihan.
Yosh, mungkin segitu saja untuk postingan kali ini. Semoga bermanfaat...
Btw, kenapa muncul banyak spasi ketika kita buat tabel (lewat tag HTML tentunya)? Karena saat kita membuat tabel, biasanya kita akan menekan tombol ENTER pada tiap peralihan command HTML dengan tujuan supaya tag tersebut bisa dibaca dengan nyaman oleh mata manusia. Ya enggak? Nah, ENTER yang kepencet akan terakumulasi sehingga membuat jarak spasi yang banyaknya.
maka tag HTML-nya:
<table width="96%" align="center" border="1" bordercolor="black">
<tbody>
<tr style="text-align: center; font-weight: bold;">
<td>Nama</td>
<td>NIM</td>
<td>IPK</td>
</tr>
<tr>
<td>Paijo</td>
<td>113090001</td>
<td>3.9</td>
</tr>
<tr>
<td>Painem</td>
<td>113090002</td>
<td>3.9</td>
</tr>
</tbody>
</table>
Nah, jika kamu pake tag macam itu, nanti akan muncul spasi diatas tabel yang memisahkan text terakhir mu dengan tabel. So, ini solusinya:
1. Jangan gunakan tombol Enter, jadi begini:
<table width="96%" align="center" border="1" bordercolor="black"><tbody><tr style="text-align: center; font-weight: bold;"><td>Nama</td><td>NIM</td><td>IPK</td></tr><tr><td>Paijo</td><td>1130900019</td><td>3.9</td></tr><tr><td>Painem</td><td>113090002</td><td>3.9</td></tr><tbody></table>
Tapi menggunakan cara itu menjadikan tag HTML yang kita buat menjadi sangat tidak nyaman untuk dilihat. Terus, gimana donk? Tenang masih ada cara ke-2
2. Tambahkan kode berikut:
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
//Put Your HTML table tag here//
</div>
Nah, nanti kodenya jadi seperti ini:
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table width="96%" align="center" border="1" bordercolor="black">
<tbody>
<tr style="text-align: center; font-weight: bold;">
<td>Nama</td>
<td>NIM</td>
<td>IPK</td>
</tr>
<tr>
<td>Paijo</td>
<td>113090001</td>
<td>3.9</td>
</tr>
<tr>
<td>Painem</td>
<td>113090002</td>
<td>3.9</td>
</tr>
</tbody>
</table>
</div>
Dengan demikian, tag HTML tetap enak dipandang namun tabel yang kita buat tetap dalam kondisi normal tanpa spasi yang berlebihan.
Yosh, mungkin segitu saja untuk postingan kali ini. Semoga bermanfaat...
Tidak ada komentar:
Posting Komentar