Home › Blogger › Memasang Tabel Di Blogger

Memasang Tabel Di Blogger

November 03, 2017

Blogger Cara Membuat / Memasang Tabel di Postingan

memasang tabel di postingan blog responsive

Untuk memasnag tabel di template ini cukup mudah, kalian bisa menggunakan struktur tabel default atau menambahkan beberapa class sehingga tampilannya menjadi lebih rapi

Struktur Dasar HTML Table


<table>
<thead>
    <tr>
    <th> </th>
    <th> </th>
    <th> </th>
    <th> </th>
    </tr>
</thead>

<tbody>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
</tbody>
</table>

Jika kalian menggunakan kode html default maka hasilnya seperti ini #Table Default

Untuk membuat tampilannya menjadi landscape kalian cukup tambahkan class='landscape' di bagian <table>, sehingga hasilnya seperti ini <table class='landscape'>, Untuk tampilannya bisa liat disini #Table Default Landscape

Nah, Sekarang kita akan menambahkan / menampilkan Judul / Nama Colom di samping kiri tabel untuk tampilan landscape dan mobile (Responsive)

Untuk menampilkannya cukup mudah, kalian tinggal menambah class='datath' di bagian <table>, sehingga hasilnya seperti ini <table class='datath'>...

dan tambahkan juga data-th='Nama TH' di bagian <td>. Maka nanti struktur tabelnya menjadi seperti dibawah ini

Sesuaikan Nama TH dengan baris dan kolom dari tabel tersebut...


<table class='datath'>
<thead>
    <tr>
    <th>Nama TH1</th>
    <th>Nama TH2</th>
    <th>Nama TH3</th>
    <th>Nama TH4</th>
    </tr>
</thead>

<tbody>
<tr>
    <td data-th='Nama TH1'> </td>
    <td data-th='Nama TH2'> </td>
    <td data-th='Nama TH3'> </td>
    <td data-th='Nama TH4'> </td>
</tr>
<tr>
    <td data-th='Nama TH1'> </td>
    <td data-th='Nama TH2'> </td>
    <td data-th='Nama TH3'> </td>
    <td data-th='Nama TH4'> </td>
</tr>
<tr>
    <td data-th='Nama TH1'> </td>
    <td data-th='Nama TH2'> </td>
    <td data-th='Nama TH3'> </td>
    <td data-th='Nama TH4'> </td>
</tr>
</tbody>
</table>

Untuk tampilan landscapenya tinggal rubah bagian <table class='datath'> menjadi <table class='datath landscape'>

Table With Data TH

Resize your browser to view responsive tables

Name	Unicode	Info Class
Facebook	f09a	fa-facebook
Twitter	f099	fa-twitter
Instagram	f16d	fa-instagram
Google	f1a0	fa-google
Pinterest	f231	fa-pinterest-p

Table Landscape With Data TH

Name	Unicode	Info Class
Facebook	f09a	fa-facebook
Twitter	f099	fa-twitter
Instagram	f16d	fa-instagram
Google	f1a0	fa-google
Pinterest	f231	fa-pinterest-p

Table Without Data TH