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}