Wednesday, July 4, 2012

Cara Membuat Tampilan Tabel Menjadi Belang-Belang

Berbicara mengenai table dalam website, tentunya kita mengetahui bahwa HTML bisa membuat table dengan mudah. Namun yang menjadi permasalahannya adalah table tersebut tidaklah cantik dan enak untuk dilihat. Coba perhatikan gambar di bawah ini yang merupakah table yang dibentuk dengan menggunakan HTML biasa tanpa CSS.

Tabel HTML tanpa CSS

Nah dari gambar diatas kelihatan bahwa kode HTML biasa tidak mampu untuk mencetak Tabel yang cantik dan indah untuk dilihat. Nah kekurangan HTML ini bisa diatasi dengan memadukannya dengan kode style yaitu CSS. Cara memadukan kode CSS dengan HTML sangatlah mudah yaitu dengan cara memanggil langsung file CSS didalah kode HTML. Perhatikan kode di bawah ini :


  1. <html>
    2. 

  2. <head>
    3. 

  3.   <title>Aplikasi Tabel Zebra Cantik dengan CSS | AplikasiPHP.Com</title>
    4. 

  4.   <link href="table.css" rel="stylesheet" type="text/css" />
    5. 

  5. </head>
    6.


Kode diatas akan memanggil file CSS yaitu “Table.css”, sehingga style yang sudah kita buat akan di masukkan kedalam table sehingga mempercantik tampilan table. Adapun kode CSS yang kita gunakan adalah seperti kode di bawah ini :
  1. /* Tabel Properti  */
    2. 

  2. #mytable {
    3. 

  3.  padding: 0;
    4. 

  4.  margin: 0;
    5. 

  5. }
    6. 

  6.  
    7. 

  7. #mytable td {
    8. 

  8.  border-right: 1px solid #ccc;
    9. 

  9.  border-bottom: 1px solid #ccc;
    10. 

  10.  background: #efefefe; 
    11. 

  11.  color: #0066ff;
    12. 

  12.  padding: 2px;
    13. 

  13. }
    14. 

  14.  
    15. 

  15. #mytable td.genap {
    16. 

  16.  border-right: 1px solid #ccc;
    17. 

  17.  border-bottom: 1px solid #ccc;
    18. 

  18.  color: #0066ff;
    19. 

  19.  background: #eeee22;
    20. 

  20.  padding: 2px;
    21. 

  21. }
    22. 

  22.  
    23. 

  23. #mytable td.alt {
    24. 

  24.  background:#0099ff;
    25. 

  25.  color: #fff;
    26. 

  26.  border-top: 1px solid #ccc;
    27. 

  27.  text-align: center;
    28. 

  28.  font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    29. 

  29.  padding: 2px;
    30. 

  30. }
    31. 

  31.  
    32. 

  32.  
    33. 

  33. #mytable td.spec {
    34. 

  34.  border-left: 1px solid #ccc;
    35. 

  35.  border-top: 0;
    36. 

  36.  background: #efefefe;
    37. 

  37.  padding: 2px;
    38. 

  38. }
    39. 

  39.  
    40. 

  40. #mytable td.spec1 {
    41. 

  41.  border-left: 1px solid #ccc;
    42. 

  42.  border-top: 0;
    43. 

  43.  background: #eeee22;
    44. 

  44.  padding: 2px;
    45. 

  45. }
    46. 

  46.  
    47. 

  47. #mytable td.specalt {
    48. 

  48.  background: #0099ff;
    49. 

  49.  border-top: 1px solid #ccc;
    50. 

  50.  border-left: 1px solid #ccc;
    51. 

  51.  font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    52. 

  52.  color: #fff;
    53. 

  53.  text-align: center;
    54. 

  54.  padding: 2px;
    55. 

  55. }
    56.



Sedangkan file tampilannya akan kita buat seperti kode dibawah ini :

  1. <html>
    2. 

  2. <head>
    3. 

  3.   <title>Aplikasi Tabel Zebra Cantik dengan CSS | AplikasiPHP.Com</title>
    4. 

  4.   <link href="table.css" rel="stylesheet" type="text/css" />
    5. 

  5. </head>
    6. 

  6. <body>
    7. 

  7. <table id=mytable cellspacing="0" width=48%>
    8. 

  8.   <tr>
    9. 

  9.  <td width="5px" class=specalt ><center>No</center></td>
    10. 

  10.  <td width="100px" class=alt ><center>Sender</center></td>
    11. 

  11.  <td width="100px" class=alt ><center>Received Time</center></td>
    12. 

  12.  <td width="200px" class=alt ><center>Message</center></td>
    13. 

  13.    </tr>
    14. 

  14.   <tr>
    15. 

  15.  <td width="5px" class=spec>1</td>
    16. 

  16.  <td>08136141xxxx</td>
    17. 

  17.  <td>21 Maret 2012</td>
    18. 

  18.  <td>Ini contoh pesan aja</td>
    19. 

  19.    </tr>  
    20. 

  20.    <tr>
    21. 

  21.  <td width="5px" class=spec1>2</td>
    22. 

  22.  <td class="genap">08136141xxxx</td>
    23. 

  23.  <td class="genap">21 Maret 2012</td>
    24. 

  24.  <td class="genap">Ini contoh pesan aja</td>
    25. 

  25.    </tr>
    26. 

  26.    <tr>
    27. 

  27.  <td width="5px" class=spec>3</td>
    28. 

  28.  <td>08136141xxxx</td>
    29. 

  29.  <td>21 Maret 2012</td>
    30. 

  30.  <td>Ini contoh pesan aja</td>
    31. 

  31.    </tr>
    32. 

  32. </body>
    33. 

  33. </html>
    34.


Jika kode tersebut di jalankan, maka hasilnya akan terlihat seperti gambar di bawah ini :

Tabel HTML dengan CSS Source : http://aplikasiphp.com/


Anda ingin mencari refrensi dan contoh program lengkap ? Kami ada. Sekarang Anda bisa mencari Aplikasi PHP MySQL di situs ini : http://www.bunafitkomputer.com. Koleksi program lengkap di sana, proyek PHP dan MySQL, juga jQuery dan Framework. Bukunya juga ada.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)