Cara Mudah Membuat Table Sangat Keren Pada Blogger - Apakah kalian sangat sulit dan kebingungan pada saat membuat table blogger? Yap, pada postingan ini saya akan menjelaskan bagaimana cara membuat table keren pada posting blogger. Saya share cara membuat table keren di blogger hanya untuk bagi yang belum tau aja, tapi yang udah tau juga silahkan lihat table yang keren ini.
Cara Membuat Tabel dalam Posting Blogger
Sebelum mencoba tabel yang saya maksudkan alangkah baiknya kamu liat dulu previewnya yang sudah saya sertakan dibawah ini. Kalau sebelum melihat, sudah kamu pasang takutnya nanti tidak sesuai apa yang kamu inginkan. Dan setelah melihat previewnya kamu putuskan sendiri saja, mau ikut memasang atau tidak usah dipasang, karena saya tidak memaksa kamu harus pakai tabel ini.Lihat previewnya baik baik, kira kira sudah cocok atau tidak dengan keinginan kamu tablenya, jika cocok silahkan dicoba..
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| kolom 1 baris 1 | kolom 2 baris 1 | kolom 3 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 | kolom 3 baris 2 |
| kolom 1 baris 3 | kolom 2 baris 3 | kolom 3 baris 3 |
| kolom 1 baris 4 | kolom 2 baris 4 | kolom 3 baris 4 |
Langkah-Langkah Pasang Tabel
Kalau sudah cocok lihat previewnya lalu siapkan diri untuk mencoba pasang tabel pada blog kamu. Langsung aja kebahan pembicaraannya.- Pertama yang harus kamu lakukan adalah login akun blogger dan cari kode ]]></b:skin> pada edit html blog kamu, lalu pasang kode CSS berikut tepat diatasnya.
- Setelah terpasang lalu simpan saja, keluar dan coba bikin posting dengan menyertakan kode berikut dalam postingan kamu. Pasang kodenya dalam kondisi penulisan HTML ya kawan, umumnya kan langsung Compose, nah untuk yang ini pakai yang HTML dulu.
- Jika ingin menambah atau mengurangi jumlah kolom dan baris, silahkan mengedit dengan memperhatikan kode <td> dan <tr>
- Disetiap kolom akan ada kode <td> dan </td>
- Disetiap baris akan ada kode <tr> dan </tr>
- "Tahap Pertama" cukup dilakukan sekali saja, dan "Tahap Kedua" dilakukan setiap membuat tabel
- <!-- Nice Table Mainbom.com-->
- table th {
- padding-top: 7px;
- text-align: left;
- }
- .nice-table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- .nice-table tr:first-child th {
- border-top: 0 none;
- }
- .nice-table th:first-child {
- border-left: 0 none;
- }
- .nice-table tr:first-child th:last-child {
- border-right-color: #5C6785;
- }
- .nice-table th {
- background-color: #5C6785;
- color: white;
- font-weight: bold;
- }
- .nice-table th, .nice-table td {
- border: 1px solid #EBEBEB;
- padding: 3px 10px;
- }
- .nice-table td {
- background-color: #E6E6E6;
- border-color: #E5E5E5 #CCCCCC #E5E5E5 #E5E5E5;
- color: #444444;
- }
- .nice-table td:last-child {
- border-right-color: #E5E5E5;
- }
- .nice-table tr:nth-of-type(2n) td {
- background-color: #FFFFFF;
- border-right-color: #E5E5E5;
- }
- .nice-table.spaced-table td, .nice-table.spaced-table th {
- padding: 10px;
- }
- .nice-table.wide {
- width: 95%;
- }
- .nice-table.narrow {
- width: 75%;
- }
- .nice-table.narrower {
- width: 50%;
- }
- .nice-table.narrowest {
- width: 35%;
- }
- <!-- Nice Table Mainbom.com-->
- <table class="nice-table" width="100%" ><tbody>
- <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr>
- <tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris 1</td> <td>kolom 3 baris 1</td> </tr>
- <tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> <td>kolom 3 baris 2</td> </tr>
- <tr> <td>kolom 1 baris 3</td> <td>kolom 2 baris 3</td> <td>kolom 3 baris 3</td> </tr>
- <tr> <td>kolom 1 baris 4</td> <td>kolom 2 baris 4</td> <td>kolom 3 baris 4</td> </tr>
- </tbody> </table>
sangat tidak cocok
ReplyDelete