Tuesday, April 4, 2017

Membuat Tabel Keren dengan HTML dan CSS

     No comments
Pada tutorial kali ini saya akan membuat Tabel pada HTML dengan CSS.

Berikut adalah tampilan gambar dari tutorial ini :


Langsung saja elemen css dibawah ini :
<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 10px 5px;

        table-layout: auto;

        empty-cells: hide;

}

thead th,

tfoot th,

tfoot td { background: #eee;

}

th, td { border: 1px solid #ccc;

         padding: 10px;

}

thead th:first-child {

  text-align: left;

}

tbody th,

tfoot th { text-align: left;

}

tbody tr:nth-child( even ) {

  background: #ddd;

}

-->


dan berikut adalah kode untuk tabel standar :

<table>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

dan untuk kode lengkapnya :

<html>

<head>

<title>Tabel Keren dengan CSS</title>

<style type="text/css">

<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 10px 5px;

        table-layout: auto;

        empty-cells: hide;

}



thead th,

tfoot th,

tfoot td { background: #eee;

}



th, td { border: 1px solid #ccc;

         padding: 10px;

}



thead th:first-child {

  text-align: left;

}



tbody th,

tfoot th { text-align: left;

}



tbody tr:nth-child( even ) {

  background: #ddd;

}

-->

</style>

</head>

<body>



<table>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

</body>

</html>




0 comments:

Post a Comment