#Yoss kalau sebelumnya saya berbagi cara buat tabel sederhana sekarang saya akan berbagi tentang cara buat tabel dengan CSS di blogger. Dan pada awalnya saya bertanya-tanya bagaimana cara buat tabeldengan css ?, karena di blogger gak ada tombol untuk buat tabel seperti di ms. word. Lalu saya mencari-cari di google dan ketemu tetapi hanya menemukan tabel yang biasa-biasa saja lalu saya mencari yang ada cssnya dan akhinya ketemu dan sekarang bisa membuat tabel sendiri. Yosha langsung saja kalian simak :
1) kerangka html sebagai berikut
2) Dan ini yang paling penting utk menghias yaitu CSS sebagai berikut :
3) Cara pemasangan di blog :
Cara pertama : CSS tsb taruh di antara B:skin atau </Style>
Setelah menaruh CSS saatnya menaruh HTMLnya ke postingan dan copas di html bukan compos.
Cara ketiga : cara kedua ini tak perlu uprek" template tinggal copas kode berikut ke html bukan kompos.
Ketiga cara tersebut yang Admin pakai yaitu 1 dan 2 karena sebenarnya 1 dan 2 itu sama cuman kalau yang pertama gak usah nampahin <style> tinggal di copaskan di style/b:skin yang sudah tersedia di template.
Yosha semoga informasi berguna dan menambah wawasan di dunia Blogging. Sebelum ganti artikel yang lain silahkan tinggalkan komentar kalian. Happy Blogging and Ganbate_^
1) kerangka html sebagai berikut| < > | HTML |
|---|---|
| <table class="tabelcss" style="width: 100%;text-align:center;"> <tr><th> no</th><th>nama</th><th>keterangan</th></tr> <tr> <tr><td> 1 </td><td> Nama</td><td>keterangan</td></tr> <tr> <tr> <tr><td> 2 </td><td>nama</th><td>keterangan</td></tr> <tr><td> 3 </td><td>nama</th><td>keterangan</td></tr> <tr><td> 4 </td><td>nama</th><td>keterangan</td></tr> <tr><td> 5 </td><td>nama</th><td>keterangan</td></tr> <tr> </tbody> </table> | |
2) Dan ini yang paling penting utk menghias yaitu CSS sebagai berikut :
| < > | CSS |
|---|---|
| /* kode CSS Tabel Ayberonta */ .table th { padding-top: 7px; } .tabelcss { border-collapse: collapse; border-spacing: 0; } .tabelcss th { background-color: blue; color: #fff; font-weight: bold; } .tabelcss th, .tabelcss td {border: 2px solid darkblue; pading 4px 11px;} .tabelcss td { background-color: #fff; color: #444444; } .tabelcss tr:nth-of-type(2n) td{ background-color: #E6E6E6 ;color: black; } | |
3) Cara pemasangan di blog :
Cara pertama : CSS tsb taruh di antara B:skin atau </Style>
Setelah menaruh CSS saatnya menaruh HTMLnya ke postingan dan copas di html bukan compos.
Cara ketiga : cara kedua ini tak perlu uprek" template tinggal copas kode berikut ke html bukan kompos.
| < > | HTML |
|---|---|
| <style type="text/css"> /* kode CSS Tabel Ayberonta */ .table th { padding-top: 7px; } .tabelcss { border-collapse: collapse; border-spacing: 0; } .tabelcss th { background-color: blue; color: #fff; font-weight: bold; } .tabelcss th, .tabelcss td {border: 2px solid darkblue; pading 4px 11px;} .tabelcss td { background-color: #fff; color: #444444; } .tabelcss tr:nth-of-type(2n) td{ background-color: #E6E6E6 ;color: black; } </style> </head> <body> <table class="tabelcss" style="width: 100%;text-align:center;"> <tr><th> no</th><th>nama</th><th>keterangan</th></tr> <tr> <tr><td> 1 </td><td> Nama</td><td>keterangan</td></tr> <tr> <tr> <tr><td> 2 </td><td>nama</th><td>keterangan</td></tr> <tr><td> 3 </td><td>nama</th><td>keterangan</td></tr> <tr><td> 4 </td><td>nama</th><td>keterangan</td></tr> <tr><td> 5 </td><td>nama</th><td>keterangan</td></tr> <tr> </tbody> </table> | |
Ketiga cara tersebut yang Admin pakai yaitu 1 dan 2 karena sebenarnya 1 dan 2 itu sama cuman kalau yang pertama gak usah nampahin <style> tinggal di copaskan di style/b:skin yang sudah tersedia di template.
Yosha semoga informasi berguna dan menambah wawasan di dunia Blogging. Sebelum ganti artikel yang lain silahkan tinggalkan komentar kalian. Happy Blogging and Ganbate_^
Advertisement
