Cara Menciptakan Tabel Keren Di Blog
Pada kesempatan ini aku akan memperlihatkan 4 pola tabel yang berbeda beserta aba-aba htmlnya. Mungkin di antara sahabat memerlukannya atau ingin mengetahui Cara Membuat Tabel Keren di Blog, untuk melengkapi postingan di blog kesayangan sobat.
Membuat tabel dalam blog, memang harus memiliki pemahaman wacana aba-aba html. Apa yang gres berguru html dapat menciptakan tabel di blog? Jawabannya dapat dong sobatku. Dalam postingan aku ini memang membahas tutorial khusus untuk pemula yang mau menciptakan tabel keren di blog.
Sobat mungkin sudah melihat beberapa tutorial membahas wacana persoalan ini, tapi belum dapat menerapkannya secara eksklusif ke blog sobat. Nah tutorial yang aku bagikan ini, mungkin berbeda dengan tutorial yang sahabat baca sebelumnya.
Berikut dibawah ini aba-aba html dan hasil dari aba-aba html tersebut apabila di terapkan ke blog.
Sobat mungkin sudah melihat beberapa tutorial membahas wacana persoalan ini, tapi belum dapat menerapkannya secara eksklusif ke blog sobat. Nah tutorial yang aku bagikan ini, mungkin berbeda dengan tutorial yang sahabat baca sebelumnya.
Berikut dibawah ini aba-aba html dan hasil dari aba-aba 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 sahabat copypaste aba-aba html diatas dan menciptakan tabel di blog sobat. Untuk warna biru pada aba-aba di atas, silahkan ganti sesuai dengan apa yang sahabat inginkan dan jikalau ingin menambahkan kolom, lihat pola pada aba-aba tersebut.
Apabila ada yang kurang terang atau ingin memperlihatkan masukan atau koreksi, silahkan sahabat tulis dalam kolom komentar. Terima kasih atas kunjungannya dan biar bermanfaat untuk sahabat pengunjung.
Sumber https://milano-ruus.blogspot.com/
Silahkan sahabat copypaste aba-aba html diatas dan menciptakan tabel di blog sobat. Untuk warna biru pada aba-aba di atas, silahkan ganti sesuai dengan apa yang sahabat inginkan dan jikalau ingin menambahkan kolom, lihat pola pada aba-aba tersebut.
Apabila ada yang kurang terang atau ingin memperlihatkan masukan atau koreksi, silahkan sahabat tulis dalam kolom komentar. Terima kasih atas kunjungannya dan biar bermanfaat untuk sahabat pengunjung.