Home » How To » Cara Membuat Tabel Berada Tengah

Cara Membuat Tabel Berada Tengah

by Hanifah Nurbaeti
by Hanifah Nurbaeti

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).

You may also like