Cara Membuat Tabel Keren di Blog
Cara Membuat Tabel Keren di Blog - Hallo sahabat Khusus Dewasa, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Tabel Keren di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Kode, Artikel Tips Blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.Judul : Cara Membuat Tabel Keren di Blog
link : Cara Membuat Tabel Keren di Blog
Pada kesempatan ini saya akan memberikan 4 contoh tabel yang berbeda beserta kode htmlnya. Mungkin di antara sobat memerlukannya atau ingin mengetahui Cara Membuat Tabel Keren di Blog, untuk melengkapi postingan di blog kesayangan sobat.
Membuat tabel dalam blog, memang harus mempunyai pemahaman tentang kode html. Apa yang baru belajar html bisa membuat tabel di blog? Jawabannya bisa dong sobatku. Dalam postingan saya ini memang membahas tutorial khusus untuk pemula yang mau membuat tabel keren di blog.
Sobat mungkin sudah melihat beberapa tutorial membahas tentang masalah ini, tapi belum bisa menerapkannya secara langsung ke blog sobat. Nah tutorial yang saya bagikan ini, mungkin berbeda dengan tutorial yang sobat baca sebelumnya.
Berikut dibawah ini kode html dan hasil dari kode html tersebut apabila di terapkan ke blog.
Sobat mungkin sudah melihat beberapa tutorial membahas tentang masalah ini, tapi belum bisa menerapkannya secara langsung ke blog sobat. Nah tutorial yang saya bagikan ini, mungkin berbeda dengan tutorial yang sobat baca sebelumnya.
Berikut dibawah ini kode html dan hasil dari kode html tersebut apabila di terapkan ke blog.
Kode Tabel 1
<table style="border-collapse: collapse; border: 1px solid black; color: black; text-align: left; width: 300px;"><tbody>
<tr><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Firstname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Lastname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Age</div>
</th></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Milano</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Ruus</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
17</div>
</td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Drily</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Ruus</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
18</div>
</td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Grego</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Ruus</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
19</div>
</td></tr>
</tbody></table>
<tr><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Firstname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Lastname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Age</div>
</th></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Milano</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Ruus</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
17</div>
</td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Drily</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Ruus</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
18</div>
</td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Grego</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
Ruus</div>
</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><div style="text-align: left;">
19</div>
</td></tr>
</tbody></table>
Hasil Tabel 1 :
Firstname | Lastname | Age |
|---|---|---|
Milano | Ruus | 17 |
Drily | Ruus | 18 |
Grego | Ruus | 19 |
Kode Tabel 2 :
<table id="t01" style="background-color: cyan; border-collapse: collapse; border: 1px solid black; color: black; text-align: left; width: 300px;"><tbody>
<tr><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Firstname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Lastname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Age</div>
</th></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">➤Milano</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">Ruus</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">17</span></b></td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">➤Drily</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">Ruus</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">18</span></b></td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">➤Grego</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">Ruus</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">19</span></b></td></tr>
</tbody></table>
<tr><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Firstname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Lastname</div>
</th><th style="border-collapse: collapse; border: 1px solid black; padding: 5px; text-align: left;"><div style="text-align: center;">
Age</div>
</th></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">➤Milano</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">Ruus</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">17</span></b></td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">➤Drily</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">Ruus</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">18</span></b></td></tr>
<tr><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">➤Grego</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">Ruus</span></b></td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;"><b><span style="color: red;">19</span></b></td></tr>
</tbody></table>
Hasil Tabel 2 :
Firstname | Lastname | Age |
|---|---|---|
| ➤Milano | Ruus | 17 |
| ➤Drily | Ruus | 18 |
| ➤Grego | Ruus | 19 |
Kode Tabel 3 :
<table style="border-collapse: collapse; color: black; font-family: arial, sans-serif; width: 323px;"><tbody>
<tr><th style="border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Nama</th><th style="border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Marga</th><th style="border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Kota</th></tr>
<tr style="background-color: #dddddd;"><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Gendri</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Ruus</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Manado</td></tr>
<tr><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Meigy</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Soda</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Bitung</td></tr>
<tr style="background-color: #dddddd;"><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Milano</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Ruus</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Manado</td></tr>
<tr><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Gracia</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Soda</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Bitung</td></tr>
<tr style="background-color: #dddddd;"><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Evan</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Saribatiang</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Manado</td></tr>
<tr><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Celona</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Ruus</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Bitung</td></tr>
</tbody></table>
<tr><th style="border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Nama</th><th style="border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Marga</th><th style="border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Kota</th></tr>
<tr style="background-color: #dddddd;"><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Gendri</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Ruus</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Manado</td></tr>
<tr><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Meigy</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Soda</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Bitung</td></tr>
<tr style="background-color: #dddddd;"><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Milano</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Ruus</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Manado</td></tr>
<tr><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Gracia</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Soda</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Bitung</td></tr>
<tr style="background-color: #dddddd;"><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Evan</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Saribatiang</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Manado</td></tr>
<tr><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Celona</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Ruus</td><td style="border: 1px solid rgb(221, 221, 221); padding: 8px;">Bitung</td></tr>
</tbody></table>
Hasil Tabel 3 :
| Nama | Marga | Kota |
|---|---|---|
| Gendri | Ruus | Manado |
| Meigy | Soda | Bitung |
| Milano | Ruus | Manado |
| Gracia | Soda | Bitung |
| Evan | Saribatiang | Manado |
| Celona | Ruus | Bitung |
Kode Tabel 4 :
<table id="t01" style="border-collapse: collapse; border: 1px solid black; color: black; width: 323px;"><tbody>
<tr style="background-color: white;"><th style="background-color: blue; border-collapse: collapse; border: 1px solid black; color: white; padding: 5px; text-align: left;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Nama </span></span></th><th style="background-color: green; border-collapse: collapse; border: 1px solid black; color: white; padding: 5px; text-align: left;">Marga</th><th style="background-color: pink; border-collapse: collapse; border: 1px solid black; color: white; padding: 5px; text-align: left;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Usia</span></span></th></tr>
<tr style="background-color: #eeeeee;"><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Gendri</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Ruus</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">31</td></tr>
<tr style="background-color: white;"><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Meigy</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Soda</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">30</td></tr>
<tr style="background-color: #eeeeee;"><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Milano</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Ruus</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">06</td></tr>
</tbody></table>
<tr style="background-color: white;"><th style="background-color: blue; border-collapse: collapse; border: 1px solid black; color: white; padding: 5px; text-align: left;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Nama </span></span></th><th style="background-color: green; border-collapse: collapse; border: 1px solid black; color: white; padding: 5px; text-align: left;">Marga</th><th style="background-color: pink; border-collapse: collapse; border: 1px solid black; color: white; padding: 5px; text-align: left;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Usia</span></span></th></tr>
<tr style="background-color: #eeeeee;"><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Gendri</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Ruus</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">31</td></tr>
<tr style="background-color: white;"><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Meigy</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Soda</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">30</td></tr>
<tr style="background-color: #eeeeee;"><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Milano</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">Ruus</td><td style="border-collapse: collapse; border: 1px solid black; padding: 5px;">06</td></tr>
</tbody></table>
Hasil Tabel 4
| Nama | Marga | Usia |
|---|---|---|
| Gendri | Ruus | 31 |
| Meigy | Soda | 30 |
| Milano | Ruus | 06 |
Keterangan :
Silahkan sobat copypaste kode html diatas dan membuat tabel di blog sobat. Untuk warna biru pada kode di atas, silahkan ganti sesuai dengan apa yang sobat inginkan dan jika ingin menambahkan kolom, lihat contoh pada kode tersebut.
Apabila ada yang kurang jelas atau ingin memberikan masukan atau koreksi, silahkan sobat tulis dalam kolom komentar. Terima kasih atas kunjungannya dan semoga bermanfaat untuk sobat pengunjung.
Silahkan sobat copypaste kode html diatas dan membuat tabel di blog sobat. Untuk warna biru pada kode di atas, silahkan ganti sesuai dengan apa yang sobat inginkan dan jika ingin menambahkan kolom, lihat contoh pada kode tersebut.
Apabila ada yang kurang jelas atau ingin memberikan masukan atau koreksi, silahkan sobat tulis dalam kolom komentar. Terima kasih atas kunjungannya dan semoga bermanfaat untuk sobat pengunjung.
Tidak Ada Komentar