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