Membuat Tabel Responsive Simple Pada Blog

Ketika saya sedang mencari sebuah ide untuk artikel saya menemukan cara membuat tabel yang responsive tapi simple tidak berbelit-belit dan memusingkan pembuatnya meskipun saya pernah mengalaminya dulu hehehe.

Kurang lebih seperti ini sebuah tabel yang responsive simple. Coba anda resize ukuran layar anda dan lihat hasilnya perubahan pada tabelnya. 

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	50	50	50	50	50	50	50	50	50	50
Eve	Jackson	94	94	94	94	94	94	94	94	94	94
Adam	Johnson	67	67	67	67	67	67	67	67	67	67

Caranya bagaimana membuatnya, sangat sederhana sekali dengan beberapa kode css yang sedikit dan yang pasti anda harus memahami untuk pembuatan judul sub pada tabel seperti First Name, Last Name, dll itu saya artikan dulu sebagai judul sub tabel dan yang Jill Smith sampai Adam itu disebut dengan konten tabel. 

Mari kita bahas cara membuatnya 

Pertama anda masuk ke dashboard blogger

Kemudian ke Tema - Edit HTML. Lalu masukan kode css dibawah ini\

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    border: none;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

Kemudian anda tinggal membuat sebuah artikel yang memuat sebuah tabel saya beri contoh seperti contoh diatas. anda masukan kode dibawah ini pada artikel dalam mode HTML

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

Nah untuk memodif sebuah tabel anda bisa dengan cara menambahkan sebuah kode dengan menggunakan pemanggil kode colspan ini untuk bagian kolom yaitu yang deret kesamping dan rowspawn ini untuk bagian baris yang deret kebawah.

Nanti hasilnya akan seperti ini :

Sebuah contoh kolom di merge
First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	50	50	50	50	50	50	50	50	50	50
	Jackson	94	94	94	94	94	94	94	94	94	94
Adam	Johnson	67	67	67	67	67	67	67	67	67	67

Sebagai contoh kita masukan kode pemanggil tersebut. Kodenya dibawah

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th colspan="12">Sebuah contoh kolom di merge</th>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td rowspan="2">Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

Mudah bukan cara membuatnya. silahkan anda coba :)

Referensi : w3scholls.com

Terima kasih anda telah membaca artikel Membuat Tabel Responsive Simple Pada Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: