Mempercantik Table dengan Css pada ebsofmedia V.2 - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Mempercantik Table dengan Css pada ebsofmedia V.2, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Belajar CSS, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Mempercantik Table dengan Css pada ebsofmedia V.2
link : Mempercantik Table dengan Css pada ebsofmedia V.2

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 .

Demikianlah Artikel Mempercantik Table dengan Css pada ebsofmedia V.2

Sekianlah artikel Mempercantik Table dengan Css pada ebsofmedia V.2 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Mempercantik Table dengan Css pada ebsofmedia V.2 dengan alamat link https://dev-create.blogspot.com/2013/05/mempercantik-table-dengan-css-pada.html