Result

HTML

CSS

<h3>Kerangka Tabel Paling Sederhana</h3>
<table>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

<h3>Header Tabel</h3>
<table>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

<h3>Menambahkan Border</h3>
<table border="1">
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

<h3>Caption/Judul Tabel</h3>
<table border="1">
    <caption>Judul Tabel</caption>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

<h3>Menggabungkan Sel-Sel Tabel (Merge Cell)</h3>
<table border="1">
    <caption>Judul Tabel</caption>
    <tr><th colspan="2">Colspan=2</th><!-- th>Header 2</th --><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

<table border="1">
    <caption>Judul Tabel</caption>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td rowspan="2">Rowspan=2</td><td>1.2</td><td>1.3</td></tr>
    <tr><!-- td>2.1</td --><td>2.2</td><td>2.3</td></tr>
</table>

<h3>Mengubah Tampilan Tabel dengan CSS</h3>
<table border="1" class="custom-table">
    <caption>Judul Tabel</caption>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td rowspan="2">Rowspan=2</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.2</td><td>2.3</td></tr>
</table>

<h3>Footer Tabel</h3>
<table border="1" class="custom-table">
    <caption>Judul Tabel</caption>
    <thead>
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tfoot>
        <tr><td>Footer</td><td>XXX</td><td>YYY</td></tr>
    </tfoot>
    <tbody>
        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
    </tbody>
</table>

body {
  padding:0 10px 3em;
  background-color:white;
  color:black;
}

h3 {
  margin:6em 0 3em;
  border-top:1px solid;
  padding:.5em 1em;
  background-color:#ffa;
}

table.custom-table {
  width:100%; /* lebar tabel menjadi sama dengan lebar kontainer */
  font:normal normal 13px/1.4 Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse; /* untuk menghilangkan jarak antar sel */
}

table.custom-table caption {
  padding:.2em 0;
  font-style:italic;
  font-weight:bold;
  text-align:left;
  border-top:2px solid black;
}

table.custom-table,
table.custom-table th,
table.custom-table td {
  border:1px solid black;
}

table.custom-table th,
table.custom-table td {
  padding:.5em .7em;
  vertical-align:top; /* membuat semua konten tabel menjadi rata atas */
  text-align:left; /* membuat semua teks di dalam tabel menjadi rata kiri */
}

table.custom-table th {
  background-color:#080;
  color:white;
}

/* footer tabel */
table.custom-table tfoot {background-color:#bbb}

Download Template IdnThemes Template Premiun Geratis

Download Template IdnThemes Template Premiun Geratis - halo para bloger, para pemburu template pemium gratis, kali ini saya akan membagian sebuah template premium gratis yang bisa anda gunakan untuk mempercantik tampilan blog anda, salah satunya adalah Template IdnThemes Template Premium Gratis.Template ini adalah salah satu Template yang di gunakan oleh situs idnthenes.com

Template IdnThemas Template Premium gratis sangat ramah pada mesin pencarian google dalam artiam Template ini ada Seo Friendly, Selain Seo Template ini juga memiliki tampilan yang Responsive dan sangat lah keren, Baiklah langsung saja berikut ini Template IdnThemes, dan silahkan anda download, untuk tampilan mungkin agak sedikit berbeda, karena telah saya rubah sedikitnya.

Download Template IdnThemes Template Premiun Geratis

DEMO 

DOWNLOAD

Jika ada kesalahan atau kesulitan dalam melakukan Download silahkan tanam sebuah komentar di halaman komentar, anda juga bisa shear artikel ini untuk membantu saya memperbanyak pengunjung, Terimakasih senoga dapat bermanfaat untuk agan-agan semua.