2 design table responsive


Dengan adanya era smartphone dan tablet, maka desain web pun mengikuti supaya terlihat bagus dan responsive jika dibuka di tablet atau smartphone yang memiliki resolusi layar lebih kecil dari pc. secara default memang, ukuran tulisan dan layout halaman web akan mengecil jika dilihat di gadget, dan untuk memperbesar tulisan atau isi web, biasanya dengan menggunakan zoom.

ada tehnik lain yaitu dengan membuat desain web secara otomatis menyesuaikan resolusi layar (responsive), sehingga jika dibuka di device yang layarnya lebih kecil semisal smartphone, maka otomatis menyesuaikan.

nah, kali ini ada contoh tehnik responsive desain yang diterapkan pada table.

jika dilihat dengan desktop atau laptop, tabel akan terlihat seperti ini:

responsive table css

 

dan jika dilihat dengan smartphone dengan layar yang kecil, akan terlihat seperti ini:

copy dan paste code ini di bagian head

lalu copy dan paste code ini di bagian body halaman web anda,

 

berikut ini penjelasan mengubah code css, untuk digunakan di web blog anda,

untuk merubah background table, ganti #e39e1c pada css, cari tulisan seperti di bawah

    /* warna row pada table yang selang seling */
    tr:nth-of-type(odd) {
        background: #e39e1c;
    }

 

 

untuk merubah header nama kolom tabel, ganti #c18f17 dengan code warna anda.

warna huruf : white , ganti dengan warna atau code warna anda.


    th {
        background: #c18f17;
        color: white;
        font-weight: bold;
    }

 

 

untuk merubah jenis huruf pada tabel, cari code berikut


   
    /* jenis huruf, warna huruf, warna garis tabel dll */
    td, th {
        padding: 6px;
        border: 1px solid #ccc;
        text-align: left;
        font-size: 12px;
        font-family: "arial", verdana;

    }



jasa edit template blogspot, modifikasi web dan blog