Sunday 6 July 2014

Desain Tabel dengan CSS

By    20:21 // No comments
Gan ada yang bingung pengen buat warna tabel yang lebih menarik dengan css.
mungkin tutorial singkat saya dapat membantu.
Simpan dengan table.html.
----------------------------------------------------------------------------------------------
<html>
  <head>
  <style>
  table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  }
  tbody {
  color: #7F4614;
  border-left: 1px solid #D9CFB8;
  font-size: 12px;
  font-weight: normal;
  }
  table th, table td {
  padding: 5px 10px;
  border: 1px solid #A65B1A;
  }
  table tr {
  font: normal 11px Tahoma, Geneva, sans-serif;
  background: #FFF;
  }
  table td {
  -webkit-transition: all 0.7s ease-in-out 0s;
  -moz-transition: all 0.7s ease-in-out 0s;
  -o-transition: all 0.7s ease-in-out 0s;
  transition: all 0.7s ease-in-out 0s;
 
  }
  table tr:nth-child(2n+0) {
  background: #F0E5CC;
 
  }
  table td:hover, table td:nth-child(2n+0):hover {
  background: #EEF7FB;
  }
  table th {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #A65B1A), color-stop(1, #7F4614) );
  background:-moz-linear-gradient( center top, #A65B1A 5%, #7F4614 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#A65B1A', endColorstr='#7F4614');
  background-color:#A65B1A;
  color:#ffffff;
  font-size: 14px;
  font-weight: bold;
  border-left: 1px solid #A65B1A;
  }
 
  @media only screen and (max-width: 800px) {
  table td:nth-child(2),
  table th:nth-child(2),
  table td:nth-child(6),
  table th:nth-child(6),
  table td:nth-child(8),
  table th:nth-child(8) {display: none;}
  }
 
  @media only screen and (max-width: 600px) {
  table td:nth-child(4),
  table th:nth-child(4),
  table td:nth-child(6),
  table th:nth-child(6),
  table td:nth-child(7),
  table th:nth-child(7),
  table td:nth-child(9),
  table th:nth-child(9){display: none;}
  }
</style>
  </head>
  <body>
  <table>
  <thead>
  <tr>
  <th>Code</th>
  <th>Company</th>
  <th class="numeric">Price</th>
  <th class="numeric">Change</th>
  <th class="numeric">Change %</th>
  <th class="numeric">Open</th>
  <th class="numeric">High</th>
  <th class="numeric">Low</th>
  <th class="numeric">Volume</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>AAC</td>
  <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
  <td class="numeric">$1.38</td>
  <td class="numeric">-0.01</td>
  <td class="numeric">-0.36%</td>
  <td class="numeric">$1.39</td>
  <td class="numeric">$1.39</td>
  <td class="numeric">$1.38</td>
  <td class="numeric">9,395</td>
  </tr>
  <tr>
  <td>AAC</td>
  <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
  <td class="numeric">$1.38</td>
  <td class="numeric">-0.01</td>
  <td class="numeric">-0.36%</td>
  <td class="numeric">$1.39</td>
  <td class="numeric">$1.39</td>
  <td class="numeric">$1.38</td>
  <td class="numeric">9,395</td>
  </tr>
  </tbody>
  </table>
  </body>
  </html>


 ---------------------------------------------------------------------------------------------
selamat mencoba

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)