Membuat Simple Table Blogspot

# Table style 1.
Kode CSS- nya silahkan copy di bawah ini dan letakan di atas kode ]]></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%; }

Dan Ini untuk menampilkan tablenya ::

<table class="nice-table" style="width: 100%px;"><tbody>
<tr> <th>Header 1</th> <th>Header 2</th> </tr>
<tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris 1</td> </tr>
<tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> </tr>
<tr> <td>kolom 1 baris 3</td> <td>kolom 2 baris 3</td> </tr>
<tr> <td>kolom 1 baris 4</td> <td>kolom 2 baris 4</td> </tr>
</tbody> </table>

# Table Style 2.
Kode SSS-nya:

table{margin:0 auto;width:80%;border-collapse:collapse;background:#ecf3eb;} caption h3{} th, td{border:1px solid #999;} th{padding:8px 0;background: #0cf;} td{padding:4px 8px;}

Dan ini Untuk Menampilkan tabel di postingan kamu::

<table>
<caption><h3>Contoh Tabel dengan CSS</h3></caption>
    <tr>
        <th>Header Kolom 1</th>
        <th>Header Kolom 2</th>
        <th>Header Kolom 3</th>
    </tr>
    <tr>
        <td>Data Cell</td>
        <td>Data Cell</td>
        <td>Data Cell</td>
    </tr>
    <tr>
        <td>Data Cell</td>
        <td>Data Cell</td>
        <td>Data Cell</td>
    </tr>
</table>

Mudah sekali kan caranya semoga bermanfaat yah

Membuat Simple Table Blogspot 2013-06-07T19:34:00+07:00 Rating: 4.5 Diposkan Oleh: Unknown