Mempercantik Table dengan Css pada ebsofmedia V.2

Pada Kesempatan Kali ini ebsof akan memposting artikel tentang Mempercantik Table dengan Css pada pembuatan website dinamis dengan PHP MYSQl ,

 

Setelah pada artikel sebelumnya kita Memodifikasi Textarea dengan Editor WYSIWYG , agar lebih memudahkan kita dalam membuat artikel pada website kita, , sekarang kita akan memodifikasi tampilan table pada halaman admin, agar lebih enak di lihat dan tampil menawan. Nah berikut screen shot nya , bagi anda yang belum mengupdate website anda silahkan simak artikel nya :

Ok, kita tinggalkan tentang artikel memodifikasi textarea dengan editor WYSIWYG. .. dan kita lanjut pada inti sari artikel "Mempercantik Table dengan Css pada ebsofmedia V.2"

Pada website dinamis Ebsofmedia V.2 , saya sudah menyertakan source code , yang siap untuk dikembangkan , sehingga menjadi website yang siap pakai. dan pada kesempatan kali ini, saya akan memposting artikel yang merupakan pengembangan dari pembuatan website dinamis.

Ok , Langsung aja pada artikel " Mempercantik Tampilan Table dengan CSS pada Website Dinamis Ebsofmedia V.2 "

Pada Website dinamis ebsofmedia V.2 , tampilan table nya tampak seperti ini :

Perhatikan table pada kategorinya : belum sempurna bukan... ? Table nya gak ada garisnya, sehingga gak bagus di pandang bukan ?

 Nah untuk lebih jelasnya lihatlah contoh table di bawah ini :

 Tampilan Table Sebelum

warnanya agak berbeda, tapi gak masalah... yang penting intinya table nya kurang bagus bukan .. ?

Nah.. Sekarang kita akan memodifikasi tablenya sehingga tampilannya akan tampil seperti gambar di bawah ini :

Tampilan Table Yang Sudah di Modifikasi Dengan CSS

Kasih Jempol Dong.. ? heee

Ok.. Simak Langkah Demi Langkah Untuk Mengubah Tampilan Table Dengan CSS Pada Website Ebsofmedia V.2 , Jika anda tidak mempunya source code nya, silahkan download dengan merequest di artikel Ebsofmedia V.2 .

Langkah-Langkah :

1. Modifikasi File style.css yang terdapat dalam folder  adminweb , buka dengan menggunakan editor anda :

2. Setelah itu, tambahkan coding CSS di bawah ini (Copy Paste)  : 

#table {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 10pt;
    border-width: 1px;
    border-style: solid;
    border-color: #999999;
    border-collapse: collapse;
    margin: 10px 0px;
}
#td{
    padding: 0.5em;
    vertical-align: top;
    border-width: 1px;
    border-style: dotted;
    border-color: #969BA5;
    border-collapse: collapse;
}

3. Simpan file Style.css ,

4. Setelah itu kita akan melakukan sedikit modifikasi pada Modul Adminweb , Pilih Folder Adminweb>Modul kategori> kategori.php , buka file kategori.php menggunakan editor anda , kemudia pada script Tampil Kategori  tambahkan id CSS yang sudah kita buat tadi pada Tag <table> dan <td> , 

berikut contohnya : <table id='table'> , dan pada tag <td> menjadi  <td id='td'>

Nah untuk lebih jelasnya lihat gambar di bawah ini :

Klik Gambar untuk Memperbesar :

Hal ini Juga berlaku Pada Modul Tampil Data Yang Lainnya seperti Modul Artikel. 

Demikianlah Artikel " Mempercantik Tampilan Table Dengan CSS " semoga bermanfaat, Jika anda menemukan masalah, silahkan tinggalkan komentar anda .