16 February 2015

Cara Membuat Tabel Dalam Postingan Blog


Kali ini saya akan share tentang cara membuat tabel saat posting di Blogger seperti tabel yang dimiliki oleh Google Support. Membuat tabel keren ini menggunakan dua source kode, yaitu CSS dan HTML. Dimana kode CSS akan disisipkan pada template blogger, sedangkan kode HTML yang akan disisipkan pada postingan Blog kita. Kode CSS dan HTML ini murni saya dapatkan dari halaman Google Support. So, tanpa panjang lebar mari kita simak cara membuat tabel mirip tabel yang dimiliki oleh Google.com. Tahap Pertama: 1. Login ke Blogger > Template > Edit HTML 2. Jangan lupa centang "Expand Template Widget" 3. Cari kode ]]></b:skin> lalu sisipkan kode CSS berikut ini tepat di atas ]]></b:skin>

<!-- 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-->

4. Klik Simpan template

Tahap kedua adalah saat anda membuat postingan Blogger yang akan menggunakan tabel, pastikan edit entri pada mode HTML bukan "Compose". Untuk membuat tabelnya silahkan ikuti contoh kode di bawah ini

<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>

Ini adalah contoh tabel dengan 3 kolom dan 4 baris

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


Smoga bermanfaat.





Cari Topik yang Anda Inginkan Disini

Baca juga yang ini :



Jika merasa artikel ini bermanfaat, silahkan bagikan ke teman Anda lewat tombol-tombol di bawah ini ….

Stumble
Delicious
Technorati
Twitter
Facebook
Reddit

1 comments:

sherlina halim on 24/5/15 11:35 said...

Pengen yang lebih seru ...
Ayo kunjungi wwwasianbet77com
Buktikan sendiri ..

Real Play = Real Money

- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : asianbet77@yahoo.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
http://asianbet77.com/

Post a Comment

Silahkan Sobat meninggalkan komentar, mau nanya?, kasih saran?, atau mau kritik? Biar kita makin dewasa gitu...

 

Blog Paksya. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com