Di bawah ini kita akan mempelajari cara memusatkan tabel dengan CSS.
Center Tabel
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } table.center { margin-left: auto; margin-right: auto; } </style> </head> <body> <h2>Center a Table</h2> <p>Untuk menengahkan tabel, atur margin kiri dan kanan ke otomatis:</p> <table class="center"> <tr> <th>Nama</th> <th>Usia</th> </tr> <tr> <td>Avril</td> <td>50</td> </tr> <tr> <td>John</td> <td>44</td> </tr> <tr> <td>Fataya</td> <td>20</td> </tr> </table> </body> </html>
Cara Menengahkan Tabel
Langkah 1) Tambahkan HTML:
Contoh
<table class="center">
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Avril</td>
<td>50</td>
</tr>
<tr>
<td>John</td>
<td>44</td>
</tr>
<tr>
<td>Fataya</td>
<td>20</td>
</tr>
</table>Langkah 2) Tambahkan CSS:
Untuk menengahkan tabel, setel margin kiri dan kanan ke auto:
Contoh
.center {
margin-left: auto;
margin-right: auto;
}Perhatikan bahwa tabel tidak dapat dipusatkan jika lebarnya diatur ke 100% (lebar penuh).
