02 Maret 2013
0

Berikut cara buat tabel dengan  source code yaitu
1. CSS.
2. HTML.

Langkah :
 
1. Login ke Blogger

2. Pilih Template >> Edit HTML >>Centang expand

4. Copy kode dibawah ini dan sisipkan pada baris diatas code ]]></b:skin>

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%;} 

5. Copy dan Sisipkan code dibawah ini pada postingan kita pada mode HTML
 <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>
Sumber :  www.mainbom.com

0 comments:

Posting Komentar