HOMECara Lengkap Membuat Tabel di Blog
Posted on - 2:05:00 PM with 7 comments
Membuat tabel di blog - Tabel merupakan suatu bagan berisi data-data untuk mengelompokkan data berdasar jenis maupun kategori. Nah keberadaan tabel di blog merupakan hal yang penting selain memudahkan para pembaca blog dalam memahami isi dari artikel blog yang anda publikasikan. Lalu bagaimana cara membuat tabel dengan baik dan benar? Akan saya jelaskan disini secara lengkap dan detail:
Secara mendasar Table di blogger memiliki kode seperti berikut:
Table : Merupakan bagan dari tabel itu sendiri bisa anda hias dengan warna garis, panjang tabel, style border dan lain sebgainya.
Tr : Merupakan baris tabel
Td : Merupakan kolom pada Tabel
Sebagai contoh berikut:
Penjelasannya sebagai berikut:
tb Merupakan Keseluruhan Tabel atau <table>
tb Merupakan baris atau <tr>
tb Merupakan kolom atau <td>
Contoh Cara penulisan di dalam artikel blog:
1.Tabel Biasa
Kode yang ditulis:
2.Tabel Biasa dengan Huruf di posisi center / tengah
Kode yang ditulis:
3.Tabel Biasa dengan Huruf di posisi center / tengah serta border tebal
Kode yang ditulis:
4.Tabel Biasa dengan 2 (dua) kolom / columns
Kode yang ditulis:
5.Tabel Biasa dengan 2 (dua) kolom / columns serta border tebal dan Posisi huruf center / tengah
Kode yang ditulis:
6.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris
Kode yang ditulis:
7.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris serta border tebal juga huruf posisi center / tengah
Kode yang ditulis:
8.Tabel Biasa dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi center / tengah
Kode yang ditulis:
9.Tabel dengan Background Warna-Warni dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi center / tengah
Kode yang ditulis:
10.Tabel yang terpisah.
Kode yang ditulis:
11.Tabel Terpisah 1 & 2 Kolom
Kode yang ditulis:
Perataan text dalam tabel
Bila tabel tidak diatur tinggi dan lebarnya, maka secara default textnya berada di tengah kiri, bila ingin mengatur posisi textnya maka perintahnya sebagai berikut. Perhatikan text yang dicetak tebal.
Berikut adalah beberapa variasi tabel yang lain, perhatikan text yang dicetak tebal.
A. Variasi garis tabel tipis
B. Garis tipis dan berwarna
Hasilnya:
Mungkin itu dulu yang dapat saya share jika ada yang mau menambahi silahkan share di komentar yang telah disediakan. Terima kasih.
Secara mendasar Table di blogger memiliki kode seperti berikut:
<table>
<tr>
<td></td>
</tr>
</table>
<tr>
<td></td>
</tr>
</table>
Table : Merupakan bagan dari tabel itu sendiri bisa anda hias dengan warna garis, panjang tabel, style border dan lain sebgainya.
Tr : Merupakan baris tabel
Td : Merupakan kolom pada Tabel
Sebagai contoh berikut:
Penjelasannya sebagai berikut:
tb Merupakan Keseluruhan Tabel atau <table>
tb Merupakan baris atau <tr>
tb Merupakan kolom atau <td>
Contoh Cara penulisan di dalam artikel blog:
1.Tabel Biasa
| Belajar Membuat Tabel |
Kode yang ditulis:
<table width="620" border="1"><tr><td>Belajar Membuat Tabel</td></tr></table>
2.Tabel Biasa dengan Huruf di posisi center / tengah
| Belajar Membuat Tabel |
Kode yang ditulis:
<table width="620" border="1"><tr><td align="center">Belajar Membuat Tabel</td></tr></table>
3.Tabel Biasa dengan Huruf di posisi center / tengah serta border tebal
| Belajar Membuat Tabel |
Kode yang ditulis:
<table width="620" border="6"><tr><td align="center">Belajar Membuat Tabel</td></tr></table>
4.Tabel Biasa dengan 2 (dua) kolom / columns
| Tabel kolom 1 | Tabel kolom 2 |
Kode yang ditulis:
<table width="620" border="1"><tr><td>Tabel kolom 1</td><td>Tabel kolom 2</td></tr></table>
5.Tabel Biasa dengan 2 (dua) kolom / columns serta border tebal dan Posisi huruf center / tengah
| Tabel kolom 1 | Tabel kolom 2 |
Kode yang ditulis:
<table width="620" border="6"><tr><td align="center">Tabel kolom 1</td><td align="center">Tabel kolom 2</td></tr></table>
6.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris
| Kolom satu | Kolom dua |
| Baris kedua | Baris kedua |
Kode yang ditulis:
<table width="620" border="1"><tr><td>Kolom satu</td><td>Kolom dua</td></tr><tr><td>Baris kedua</td><td>Baris kedua</td></tr></table>
7.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris serta border tebal juga huruf posisi center / tengah
| Kolom satu | Kolom dua |
| Baris kedua | Baris kedua |
Kode yang ditulis:
<table width="620" border="6"><tr><td align="center">Kolom satu</td><td align="center">Kolom dua</td></tr><tr><td align="center">Baris kedua</td><td align="center">Baris kedua</td></tr></table>
8.Tabel Biasa dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi center / tengah
| Kolom satu | Kolom dua |
| Baris kedua | Baris kedua |
| Baris ketiga | Baris ketiga |
| Baris keempat | Baris keempat |
Kode yang ditulis:
<table width="620" border="1"><tr><td align="center">Kolom satu</td><td align="center">Kolom dua</td></tr><tr><td align="center">Baris kedua</td><td align="center">Baris kedua</td></tr><tr><td align="center">Baris ketiga</td><td align="center">Baris ketiga</td></tr><tr><td align="center">Baris keempat</td><td align="center">Baris keempat</td></tr></table>
9.Tabel dengan Background Warna-Warni dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi center / tengah
| Kolom satu | Kolom dua |
| Baris kedua | Baris kedua |
| Baris ketiga | Baris ketiga |
| Baris keempat | Baris keempat |
Kode yang ditulis:
<table width="620" border="1"><tr><td align="center" bgcolor="red">Kolom satu</td><td align="center" bgcolor="blue">Kolom dua</td></tr><tr><td align="center" bgcolor="yellow">Baris kedua</td><td align="center" bgcolor="green">Baris kedua</td></tr><tr><td align="center" bgcolor="#00FFFF">Baris ketiga</td><td align="center" bgcolor="#FF7F50">Baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">Baris keempat</td><td align="center" bgcolor="#FF1493">Baris keempat</td></tr></table>
10.Tabel yang terpisah.
| satu | |
|---|---|
| Kolom satu | Kolom dua |
| Baris kedua | Baris kedua |
| dua | |
| Baris ketiga | Baris ketiga |
| Baris keempat | Baris keempat |
Kode yang ditulis:
<table width="620" border="1"><th>satu</th><tr><td align="center" bgcolor="red">Kolom satu</td><td align="center" bgcolor="blue">Kolom dua</td></tr><tr><td align="center" bgcolor="yellow">Baris kedua</td><td align="center" bgcolor="green">Baris kedua</td></tr><th>dua</th><tr><td align="center" bgcolor="#00FFFF">Baris ketiga</td><td align="center" bgcolor="#FF7F50">Baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">Baris keempat</td><td align="center" bgcolor="#FF1493">Baris keempat</td></tr></table>
11.Tabel Terpisah 1 & 2 Kolom
| Daftar Blogger | |
|---|---|
| No. | Name: |
| 1. | Nama Satu |
| 2. | Nama Dua |
| 3. | Nama Tiga |
Kode yang ditulis:
<table align="center" border="1" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel Terpisah 1 & 2 Kolom</b></caption><tr><th colspan="2">Daftar Blogger</th></tr><tr><th>No.</th><th>Name:</th></tr><tr><td>1.</td><td>Nama Satu</td></tr><tr><td>2.</td><td>Nama Dua</td></tr><tr><td>3.</td><td>Nama Tiga</td></tr></table>
<caption align="top"><b>Tabel Terpisah 1 & 2 Kolom</b></caption><tr><th colspan="2">Daftar Blogger</th></tr><tr><th>No.</th><th>Name:</th></tr><tr><td>1.</td><td>Nama Satu</td></tr><tr><td>2.</td><td>Nama Dua</td></tr><tr><td>3.</td><td>Nama Tiga</td></tr></table>
Perataan text dalam tabel
Bila tabel tidak diatur tinggi dan lebarnya, maka secara default textnya berada di tengah kiri, bila ingin mengatur posisi textnya maka perintahnya sebagai berikut. Perhatikan text yang dicetak tebal.
| BELAJAR | MEMBUAT |
| TABEL |
<table border="1" height="200" width="620">
<TR>
<td valign="top">BELAJAR</td><td>MEMBUAT</td>
</tr>
<tr>
<td>TABEL</td><td><center>BLOG</center></td>
</tr>
</table>
<TR>
<td valign="top">BELAJAR</td><td>MEMBUAT</td>
</tr>
<tr>
<td>TABEL</td><td><center>BLOG</center></td>
</tr>
</table>
Berikut adalah beberapa variasi tabel yang lain, perhatikan text yang dicetak tebal.
A. Variasi garis tabel tipis
<TABLE WIDTH="620" STYLE="BORDER-COLLAPSE:COLLAPSE;" border="1">
<TR>
<TD>BELAJAR</TD><TD>MEMBUAT</TD>
</TR>
<TR>
<TD>TABEL</TD><TD>BLOG</TD>
</TR>
</TABLE>
Hasilnya :<TR>
<TD>BELAJAR</TD><TD>MEMBUAT</TD>
</TR>
<TR>
<TD>TABEL</TD><TD>BLOG</TD>
</TR>
</TABLE>
| BELAJAR | MEMBUAT |
| TABEL | BLOG |
B. Garis tipis dan berwarna
<TABLE WIDTH="620" STYLE="BORDER-COLLAPSE:COLLAPSE;" bordercolor="red" border="1">
<TR>
<TD>IDE</TD><TD>KAMU</TD>
</TR>
<TR>
<TD>YANG</TD><TD>INOVATIF</TD>
</TR>
</TABLE>
<TR>
<TD>IDE</TD><TD>KAMU</TD>
</TR>
<TR>
<TD>YANG</TD><TD>INOVATIF</TD>
</TR>
</TABLE>
Hasilnya:
| IDE | KAMU |
| YANG | INOVATIF |
Mungkin itu dulu yang dapat saya share jika ada yang mau menambahi silahkan share di komentar yang telah disediakan. Terima kasih.
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips & Cara
 |
Artikel Terkait Dengan "Cara Lengkap Membuat Tabel di Blog "
7 comments:
Ketentuan Berkomentar:
1. Menautkan link aktif (anchor text) pada komentar secara otomatis akan kami hapus
2. Gunakan fasilitas Name/URL untuk menempatkan link anda
3. Dilarang berkomentar diluar topik artikel (SARA, pornography, provokasi,promosi produk)
4. Dilarang komentar spam
5. Berkomentarlah dengan baik dan sopan
6. Komentar yang tidak sesuai dengan poin diatas tidak akan dipublikasikan
Admin Tips & Cara
Terimakasih.. tulisannya sangat bermanfaat..semoga sukses...
ReplyDeleteMy blog
My Campus
Terimakasih.. tulisannya sangat bermanfaat..semoga sukses...
ReplyDeleteMy blog
My Campus
Terimakasih.. tulisannya sangat bermanfaat..semoga sukses...
ReplyDeleteMy blog
My Campus
Setelah beberapa kali mencoba, akhirnya bisa membuat form Kursus Online. Thanks gan
ReplyDeletemksih mas.... bermanfaat banget
ReplyDeleteMaaf saya ingin bertanya...
ReplyDeleteKalau membuat tabel (bukan tulisan dalam tabelnya) dalam posisi align center bisa gak? Kalau bisa, tolong beri tau caranya kak. Terima kasih...
Coba dulu gan 👍
ReplyDelete