Membuat Tabel Responsive Sederhana Keren di Blog

Tabel Responsive Sederhana Keren

       Hallo Sobat Blogger, disini saya akan membagikan cara gimana sih cara membuat tabel pada Blog itu ? Saya menulis di Blog ini agar nanti saya juga agar tidak lupa cara buat Tabel hehe. Disini saya akan memberikan cara yang simpel agar mudah dipahami karena saya hanya menggunakan bahasa HTML saja tanpa ada tambahan seperti CSS ataupun Javascrip, untuk lebih lanjutnya silahkan simak ^_^.

A. PENGERTIAN

       Tabel adalah data yang berisi iktisar sejumlah data informasi, biasanya berupa kata-kata dan bilangan yang tersusun secara bersistem, urut ke bawah dalam lajur dn deret tertentu dengan garis pembatas sehingga mudah untuk disimak (menurut : Kamus Besar Bahasa Indonesia).

B. LATAR BELAKANG

          Dengan menggunakan Tabel maka tampilan Website atau Blog menjadi lebih keren karena menjadi rapi dengan adanya Tabel apalagi jika tabelnya responsive maka tampilan mau di buka lewat media apapun tetap bagus.

C. MAKSUD DAN TUJUAN

           Tujuan dengan menggunakan Tabel agar tampilan pada sebuah Website menjadi lebih menarik. Salah satu agar pengunjung tetap setia dengan Website itu dikarenakan tampilannya nyaman.

D. JANGKA WAKTU

            Untuk pembuatan Tabelnya sekitar 30 menit karena harus teliti dan yang ribet itu menyesuaikan warna tabelnya agar sesuai dengan Website yang di buat.

E. ALAT DAN BAHAN

            1. Laptop

            2. Koneksi Internet

F. TAHAPAN PELAKSANAAN

1. Login pada Blogger anda terlebih dahulu.
2. Kemudian buat atau pilih artikel yang akan diberi tabel.
3. Buka dalam mode HTML karena saya akan menggunakan kode HTML.
4. Beriku ini merupakan Scriptnya dan juga Penjelasannya :

<table style=”border: 1px dashed #AAAAAA;” border=”1″ width=”100%”>

Keterangan :

- ”border: 1px - Jadi pada tabel diatas membuat tabel dengan tebal garis pada tabel atau biasa dengan sebutan border 1px.
- Pada border tersebuat diberi warna #AAAAAA dengan bilangan Hexa kalian juga bisa langsung menuliskan namanya namun lebih lengkap untuk warna yang diinginkan jika menggunakan Hexa, untuk kode warnanya bisa browsing di google untuk lebih lengkapnya.
- border="1" - Jadi pada pembuatan tabel hanya terdapat 1 border, tergantung imajinasi sobat aja.
- width = "100%" - Kode inilah yang membuat tabel ini responsive di karenakan menyesuaikan ukuran perangkat yang digunakan. Jadi tanpa bantuan CSS ataupun Javascript sudah bisa menyesuaikan sendiri.

<tbody>
<th style=”color: white;”>
<td style=”border: 1px dashed #AAAAAA;” bgcolor=”#87CEAA″> <center><b> header </b></center></td>
<td style=”border: 1px dashed #AAAAAA;” bgcolor=”#87CEAA“><center><b> haeder </b></center></td>
<td style=”border: 1px dashed #AAAAAA;” bgcolor=”#87CEAA“><center><b> header </b></center></td>
</th>

Keterangan :

- th itu digunakan untuk mendefinisikan judul kolom tabel.
- td itu digunakan untuk mendefinisikan sel baris tabel.
- Sintaknya menggunakan bahasa inggris jari mudah lah untuk dipahami sendiri.
- Pada test header bisa ubah sesuai judul kolom pada tabel yang ingin anda gunakan.
- b itu kepanjangan dari bold, cuma agar lebih terlihat saja, masih banyak juga aksesoris tag untuk mempercantik teks, namun cukup bold saja sudah menarik.
Jika ingin menambahkan kolom biar lebih banyak tinggal copas saja dari sintak - <td style= ....> sampai sintak </td>.

<tr>
<td style=”border: 1px dashed #AAAAAA;”> isi </td>
<td style=”border: 1px dashed #AAAAAA;”> isi </td>
<td style=”border: 1px dashed #AAAAAA;”> isi </td>
</tr>
</tbody>

</table>

Keterangan :

- tr itu digunakan untuk mendefinisikan baris tabel.
- Untuk text isi bisa diisi sesuai judul tabel yang dibuat tadi. Jadi untuk mengisinya urut seperti yang dibuat tadi.
- Untuk penjelasan lainnya sama seperti penjelasan diatas.

Disini saya mengambil contoh kode dari : 

Instalasi dan Konfigurasi XIBO

Ini merupakan kode HTMLnya :

<table style=”border: 1px dashed #AAAAAA;” border=”1″ width=”100%”>
<tbody>
<tr style=”color: white;”>
<td style=”border: 1px dashed #AAAAAA;” bgcolor=”#87CEAA″><center><font color="black"><b>No.</b></font></center></td>
<td style=”border: 1px dashed #AAAAAA;” bgcolor=”#87CEAA“><center><font color="black"><b>Fitur</b></font></center></td>
<td style=”border: 1px dashed #AAAAAA;” bgcolor=”#87CEAA“><center><font color="black"><b>Penjelasan</b></font></center></td>
</tr>
<tr>
<td style=”border: 1px dashed #AAAAAA;”>01</td>
<td style=”border: 1px dashed #AAAAAA;”>Schedule Management</td>
<td style=”border: 1px dashed #AAAAAA;”>Di gunakan untuk mengatur dan menanage layout yang tampil pada waktu tertentu pada setiap client</td>
</tr>
<tr>
<td style=”border: 1px dashed #AAAAAA;”>02</td>
<td style=”border: 1px dashed #AAAAAA;”>Broadcast Viewer</td>
<td style=”border: 1px dashed #AAAAAA;”>Digunakan untuk melihat layout yang aktif berdasarkan schedule.</td>
</tr>
<tr>
<td style=”border: 1px dashed #AAAAAA;”>03</td>
<td style=”border: 1px dashed #AAAAAA;”>Layout managemen</td>
<td style=”border: 1px dashed #AAAAAA;”>Di gunakan untuk memanage layouting yang di tampilkan pada client.</td>
</tr>
<tr>
<td style=”border: 1px dashed #AAAAAA;”>04</td>
<td style=”border: 1px dashed #AAAAAA;”>Library management</td>
<td style=”border: 1px dashed #AAAAAA;”>Di gunakan untuk menyimpan file – file yang sering di gunakan.</td>
</tr>
<tr>
<td style=”border: 1px dashed #AAAAAA;”>05</td>
<td style=”border: 1px dashed #AAAAAA;”>Template management</td>
<td style=”border: 1px dashed #AAAAAA;”>Di gunakan untuk memanage template . Di sini kita bisa mengatur permission setiap tempate.</td>
</tr>
<tr>
<td style=”border: 1px dashed #AAAAAA;”>06</td>
<td style=”border: 1px dashed #AAAAAA;”>Log Viewer</td>
<td style=”border: 1px dashed #AAAAAA;”>Di gunakan untuk membaca setiap kejadian dan aktifitas yang dilakukan oleh semua user.</td>
</tr>
</tbody>
</table>

Dan Hasilnya akan menjadi seperti berikut :

G. KESIMPULAN

           Jadi dengan menggunakan Tabel maka tampilan pada website menjadi lebih menarik karena tampilan terlihat rapi atau tersusun rapi. Dengan menggunakan sintak HTML sederhana sudah membuat tampilan menjadi bagus.

H. REFERENSI

            E-Book html dasar