Cara Membuat Tabel Warna-Warni di Blog

Kadang, kita membutuhkan data dalam bentuk tabel.
Kode Keterangan
Kode Keterangan
Kode Keterangan Link
Kode Keterangan Link
<table cellpadding="0" cellspacing="0" style="text-align: left;">

<tr>           
<th>Kode</th>           
<th>Keterangan</th>       
</tr>

<tr>           
<td>Kode</td>           
<td>Keterangan</td>       
</tr>

<tr>           
<td>Kode</td>           
<td>Keterangan <a href="http://gerryindrapratamaatje.blogspot.co.id/2017/10/kreasi-menulis-di-postingan-blog_30.html" rel="nofollow" target="_blank"> Link</a></td>       
</tr>

<tr>           
<td>Kode</td>           
<td>Keterangan <a href="http://gerryindrapratamaatje.blogspot.co.id/2017/10/kreasi-menulis-di-postingan-blog_30.html" rel="nofollow" target="_blank"> Link</a></td>       
</tr>

</table>

Kadang kita membutuhkan variasi ...

Title 1Title 2Title 3
Row 1Row 1Row 1
Row 2Row 2Row 2
Row 2Row 2Row 2
Row 3Row 3Row 3

<script type="text/javascript">
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
var css = '<style>.CSSTableGenerator{margin:0;padding:0;width:100%;box-shadow:10px 10px 5px #888;border:1px solid #fff;-moz-border-radius-bottomleft:15px;-webkit-border-bottom-left-radius:15px;border-bottom-left-radius:15px;-moz-border-radius-bottomright:15px;-webkit-border-bottom-right-radius:15px;border-bottom-right-radius:15px;-moz-border-radius-topright:15px;-webkit-border-top-right-radius:15px;border-top-right-radius:15px;-moz-border-radius-topleft:15px;-webkit-border-top-left-radius:15px;border-top-left-radius:15px}.CSSTableGenerator table{width:100%;height:100%;margin:0;padding:0}.CSSTableGenerator tr:last-child td:last-child{-moz-border-radius-bottomright:15px;-webkit-border-bottom-right-radius:15px;border-bottom-right-radius:15px}.CSSTableGenerator table tr:first-child td:first-child{-moz-border-radius-topleft:15px;-webkit-border-top-left-radius:15px;border-top-left-radius:15px}.CSSTableGenerator table tr:first-child td:last-child{-moz-border-radius-topright:15px;-webkit-border-top-right-radius:15px;border-top-right-radius:15px}.CSSTableGenerator tr:last-child td:first-child{-moz-border-radius-bottomleft:15px;-webkit-border-bottom-left-radius:15px;border-bottom-left-radius:15px}.CSSTableGenerator tr:nth-child(odd){background-color:#aad4ff}.CSSTableGenerator tr:nth-child(even){background-color:#fff}.CSSTableGenerator td{vertical-align:middle;border:1px solid #fff;border-width:0 1px 1px 0;text-align:left;padding:7px;font-size:10px;font-family:Georgia;font-weight:400;color:#000}.CSSTableGenerator tr:last-child td{border-width:0 1px 0 0}.CSSTableGenerator tr td:last-child{border-width:0 0 1px 0}.CSSTableGenerator tr:last-child td:last-child{border-width:0 0 0 0}.CSSTableGenerator tr:first-child td{background:-o-linear-gradient(bottom,#005fbf 5%,#003f7f 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#005fbf),color-stop(1,#003f7f));background:-moz-linear-gradient(center top,#005fbf 5%,#003f7f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf",endColorstr="#003f7f");background:-o-linear-gradient(top,#005fbf,003f7f);background-color:#005fbf;border:0 solid #fff;text-align:center;border-width:0 0 1px 1px;font-size:14px;font-family:Georgia;font-weight:700;color:#fff}.CSSTableGenerator tr:first-child:hover td{background:-o-linear-gradient(bottom,#005fbf 5%,#003f7f 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#005fbf),color-stop(1,#003f7f));background:-moz-linear-gradient(center top,#005fbf 5%,#003f7f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf",endColorstr="#003f7f");background:-o-linear-gradient(top,#005fbf,003f7f);background-color:#005fbf}.CSSTableGenerator tr:first-child td:first-child{border-width:0 0 1px 0}.CSSTableGenerator tr:first-child td:last-child{border-width:0 0 1px 1px}</style>';
style.appendChild(document.createTextNode(css));
head.appendChild(style);
</script>

<br />
<div class="CSSTableGenerator">
<table><tbody>
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td></tr>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td></tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td></tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td></tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td></tr>
</tbody></table>
</div>

Yang terakhir ini paling keren.

<div class="w3-container">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <table class="w3-table w3-striped w3-bordered w3-border w3-hoverable">
    <thead>
      <tr class="w3-light-grey">
        <th>Minggu 1</th>
        <th>Keterangan</th>
        <th>Pujian</th>
      </tr>
    </thead>
    <tr>
      <td>Minggu 2</td>
      <td>Keterangan</td>
      <td>Pujian</td>
    </tr>
    <tr>
      <td>Minggu 3</td>
      <td>Keterangan</td>
      <td>Pujian</td>
    </tr>
    <tr>
      <td>Minggu 4</td>
      <td>Keterangan</td>
      <td>Pujian</td>
    </tr>
  </table>
</div>

Hasilnya:
Minggu 1 Keterangan Pujian
Minggu 2 Keterangan Pujian
Minggu 3 Keterangan Pujian
Minggu 4 Keterangan Pujian
Previous
Next Post »