<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}