Custom Tabel
N
ah berikut ini tips mempercantik tabel di blog, mungkin sobat ada yang menggunakan tabel untuk membuat suatu artikel dipostingan. Pasti sobat juga pengen dong membuat style table tersebut terlihat menarik dan gak monoton. Nah kali ini saya akan berbagi tips sederhana membuat tabel sedikit menarik dan terlihat tidak membosankan. Karena dengan membuat postingan tampil cantik dan menarik pasti akan membuat pengunjung blog akan merasa betah dan berlama-lama, apalagi kalau artikel yang disajikan pun juga menarik, berkualitas dan bermanfaat. Oke sobat langsung saja silahkan dilihat dibaca dan dipraktekan tipsnya dibawah ini.
Dibawah ini adalah contoh default tabel yang belum di custom
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Line 1 Column 1 | Line 1 Column 2 | Line 1Column 3 |
| Line 2 Column 1 | Line 2 Column 2 | Line 2 Column 3 |
Kodenya seperti ini
<table border="2" style="margin: 0 auto;"><tbody>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
<tr><td>Line 1 Column 1</td><td>Line 1 Column 2</td><td>Line 1Column 3</td></tr>
<tr><td>Line 2 Column 1</td><td>Line 2 Column 2</td><td>Line 2 Column 3</td></tr>
</tbody></table>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
<tr><td>Line 1 Column 1</td><td>Line 1 Column 2</td><td>Line 1Column 3</td></tr>
<tr><td>Line 2 Column 1</td><td>Line 2 Column 2</td><td>Line 2 Column 3</td></tr>
</tbody></table>
* Dibawah ini adalah tabel yang sedikit di custom
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Line 1 Column 1 | Line 1 Column 2 | Line 1Column 3 |
| Line 2 Column 1 | Line 2 Column 2 | Line 2 Column 3 |
| Three Column in One line | ||
Kodenya seperti dibawah ini
<table border="2" style="background: #f00; -webkit-box-shadow: 5px 5px 8px #000;-moz-box-shadow: 5px 5px 8px #000; box-shadow: 5px 5px 8px #000; color: #fff; font-size: 20px; margin: 0 auto;"><tbody>
<tr><th style="background: #000; color: #fff; font-size: 30px;">Column 1</th><th style="background: #000; color: white; font-size: 30px;">Column 2</th><th style="background: #000; color: white; font-size: 30px;">Column 3</th></tr>
<tr><td>Line 1 Column 1</td><td>Line 1 Column 2</td><td>Line 1Column 3</td></tr>
<tr><td>Line 2 Column 1</td><td>Line 2 Column 2</td><td>Line 2 Column 3</td></tr>
<tr style="background: #000; color: white; font-size: 20px; text-align: center;"><td colspan="3">Three Column in One line</td></tr>
</tbody></table>
<tr><th style="background: #000; color: #fff; font-size: 30px;">Column 1</th><th style="background: #000; color: white; font-size: 30px;">Column 2</th><th style="background: #000; color: white; font-size: 30px;">Column 3</th></tr>
<tr><td>Line 1 Column 1</td><td>Line 1 Column 2</td><td>Line 1Column 3</td></tr>
<tr><td>Line 2 Column 1</td><td>Line 2 Column 2</td><td>Line 2 Column 3</td></tr>
<tr style="background: #000; color: white; font-size: 20px; text-align: center;"><td colspan="3">Three Column in One line</td></tr>
</tbody></table>
* Contoh dengan background gambar
| About | Kode HTML | |
|---|---|---|
| Ini adalah contoh sederhana dengan menggunakan background gambar, dan untuk lebih jelas perhatikan kodenya disamping. | <table border="2" style="-moz-box-shadow: 5px 5px 8px #000; -webkit-box-shadow: 5px 5px 8px #000; background: #f00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtYTYWEgihq0GgDpk4-k_jknbRZZKRc3ItUVPWRKrhFmbQxV3yLTsW3Zw6oyXPmES1XNQJKvuWwZE4zLdnLIsoUOdLDCxM1YKCAD90TUJWgrGwcngj5YRuRekfD3Auq6kclKP8LsKt-W7C/s1600/tempik.gif) repeat; border: 10px groove; box-shadow: 5px 5px 8px #000; color: black; font-size: 14px; margin: 0 auto; text-align: justify;"><tbody> <tr><th style="background: #000; border: 18px groove; color: white; font-size: 30px; text-align: center;">About</th><th style="background: #000; border: 18px groove; color: white; font-size: 30px; text-align: center;">Kode HTML</th></tr> <tr><td style="border: 4px groove;">Here U content</td><td style="border: 4px groove;">Here U content</td></tr> <tr style="background: #000; color: white; font-size: 20px; text-align: center;"><td colspan="3">Bagaimana menarik bukan</td></tr> </tbody></table> | |
| Bagaimana menarik bukan | ||
- Untuk kode yang berwarna biru (margin:0 auto) adalah pengaturan letak dari posisi tabel content, bisa diganti dengan, float:left atau float right.
- Sedangkan kode yang berwarna merah adalah judul dan isi dari tabel.
Oke sobat sekian dulu tips/cara membuat tabel di blog dan meng-custom tabel.
Semoga bermanfaat
Posted On : 7 Juni 2012 Time : 15.18
