CARA MEMBUAT TABLE GRADIENT 2 KOLOM DENGAN HTML & CSS RESPONSIVE MOBILE

CARA MEMBUAT TABLE GRADIENT 2 KOLOM DENGAN HTML & CSS

Bagi sobat yang sedang mencari cara membuat table hanya 2 kolom yang responsive dengan tampilan mobile dan desktop' pada web maupun blog silahkan di coba dengan cara ini script code table sudah saya sedikit modif dengan menambahkan warna gradient dan mengurangi kolom tersebut menjadi 2 kolom saja' agar bisa lebih Responsive jika di muat via mobile phone.

monyetblog.com	kolom monyetblog 1
isi menu	menu 1
isi menu	menu 1
isi menu	menu1
isi menu	nama 1
isi menu	menu 1
isi menu	menu 2
isi menu	menu 1
isi menu	menu1
isi menu	menu 1

Silahkan langsung di copy saja css nya pada kotak text area copy di bawah ini

CODE CSS

Jika sudah tercopy lalu cari code ]]></b:skin> pada template blog milik sobat lalu letakan css tersebut tepat sebelum code di atas sehinga nanti nya akan menjadi seperti ini

css nya letak di sini
]]></b:skin>

Setelah proses di atas telah di kerjakan dengan benar maka lanjut lagi pada tahap berikut nya'
tahap di mana kita akan menampilkan table tersebut pada blog mau pun web' buat postingan dengan HTML javascript lalu copy code HTML table nya di bawah ini' dan ganti isi menu menu1' dengan menu menu yang sobat inginkan dan untuk Html table copy di text area di bawah ini

CODE HTML TABLE

Jika kamu tak ingin report repot untuk meletakan css nya pada template blog milik sobat'script ini sudah bisa di pakai langsung tanpa harus meletakan ccs pada tag ]]></b:skin> dengan cara copy code keseluruhan nya di bawah ini sudah saya kemas css dengan htm table nya menjadi satu' akan tetapi script nya akan menjadi lebih panjang dan agak sedikit sulit mengedit nya karena banyak nya script yang tercampur' silahkan copy code Full nya di bawah ini' lalu tingal kamu paste kan saja pada postingan HTML javascript pada blog milik sobat'

CODE FULL CSS & HTML TABLE

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background:linear-gradient(to left, #99ffcc 0%, #ccff99 100%);}

#customers tr:hover {background:linear-gradient(to left, #ccffcc 0%, #99ffcc 100%);}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color:linear-gradient(to left, #99ff99 0%, #00cc66 100%);
    color: orange;
}
</style>
</head>
<body>

<table id="customers">
<tr>
    <th>monyetblog.com</th>
    <th>kolom monyetblog 1</th>

</tr>
<tr>
    <td>isi menu</td>
    <td>menu 1</td>

</tr>
<tr>
    <td>isi menu</td>
    <td>menu1 </td>
    
  </tr>
<tr>
    <td>isi menu</td>
    <td>nama 1</td>

</tr>
<tr>
    <td>isi menu</td>
    <td>menu 1</td>
  
  </tr>
<tr>
    <td>isi menu</td>
    <td>menu 2</td>

</tr>
<tr>
    <td>isi menu</td>
    <td>menu 1</td>

</tr>
<tr>
    <td>isi menu</td>
    <td>menu1 </td>
   
  </tr>
<tr>
    <td>isi menu</td>
    <td>menu 1</td>

</tr>
</table>
</body>
</html>

Nah begitulah cara nya membuat table 2 kolom yang pas pada postingan blog milik sobat' dan untuk warna silahkan di atur sendiri dengan menganti code warna seperti ini #99ff99 #00cc66 ganti code warna tersebut dengan code warna yang kamu sukai' slamat mencoba....

Sekian Trimakasih...

Artikel
Blogger New (22) + 1
Tips Gadget
Lirik Lagu
Kartu Perdana
Advertising
Google Adsense
Primbon
Experimen
Html
Windows
Template
Youtube
Teknologi

Gadget Spesifikasi
Xiaomi
Nokia
Vodafone
Lenovo
Asus
Google
Samsung
Oppo
Vivo
HP
Motorola
HTC
alcatel
Huawei
BlackBerry
Apple
OnePlus
Sony

Monday, August 6, 2018

CARA MEMBUAT TABLE GRADIENT 2 KOLOM DENGAN HTML & CSS RESPONSIVE MOBILE