Bagaimana menempatkan tabel di tengah

Belajar cara menggunakan CSS untuk menempatkan tabel di tengah.

Tabel di tengah:

Depan Nama Belakang Nama Umur
Jill Smith 50
Eve Jackson 94
John Doe 80

Bagaimana membuat tabel di tengah

Langkah pertama - Tambahkan HTML:

<table class="center">
  <tr>
    <th>Depan Nama</th>
    <th>Belakang Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Langkah kedua - Tambahkan CSS:

Untuk menempatkan tabel di tengah, atur margin kiri dan kanan menjadi otomatis:

.center {
  margin-left: auto;
  margin-right: auto;
}

Coba sendiri

Perhatikan, jika lebar diatur menjadi 100% (lebar penuh), tabel tidak dapat diutamakan.

Halaman yang berhubungan

Tutorial:Tabel CSS