Rabu, 25 Desember 2013

membuat tebel dengan PHP

“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>tabel tabel</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
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)