#39 Cara mengatur posisi tabel pada HTML

Mengatur posisi tabel pada HTML

pada tutorial sebelumnya kita telah belajar mengatur lebar tabel dan tinggi baris tabel, sekarang kita akan belajar cara mengatur posisi tabel html dengan membuat rata tengah dan rata kanan tabel menggunakan atribut style.

HTML5 tidak mensupport atau mendukung lagi atribut align, jadi untuk membuat posisi tabel harus menggunakan CSS.

secara default posisi tabel pada HTML menggunakan rata kiri seperti tampilan dibawah ini.

posisi tabel rata kiri pada html
posisi rata kiri

Baca juga: struktur dasar dan cara membuat tabel pada HTML

Cara mengatur tabel rata tengah

cara lama untuk mengatur rata tengah sangat mudah seperti dibawah ini.

    <table align="center">
        ...
    </table>Code language: HTML, XML (xml)

sekarang atribut “align” sudah ditinggalkan pada versi HTML5, karena menggunakan CSS (Cascading Style Sheet) adalah cara yang bagus, jika kita menggunakan CSS lebih mudah mengatur tampilan untuk mobile atau responsive.

cara baru untuk mengatur rata tengah sebagai berikut.

tambahkan atribut border=”1″ di tag <table> untuk melihat garis tabel.

<!DOCTYPE html>
<html>
<head>
    <title> mengatur posisi tabel rata tengah pada tabel </title>
</head>
<body>
    <table style="margin-left:auto;margin-right:auto" border="1">
        <thead>
            <tr>
                <th>Bulan</th>
                <th>Penjualan</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mei</td>
                <td>100.000</td>
            </tr>
            <tr>
                <td>Juni</td>
                <td>200.000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Jumlah</td>
                <td>300.000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>Code language: HTML, XML (xml)

hasilnya

posisi tabel rata tengah pada html
posisi tabel rata tengah

Cara mengatur tabel rata kanan

untuk mengatur tabel rata kanan juga menggunakan CSS, kita bisa mencobanya langsung dengan menekan tombol “Coba Script” warna biru di pojok atas kode 🙂

<!DOCTYPE html>
<html>
<head>
    <title> mengatur posisi tabel rata kanan pada tabel </title>
</head>
<body>
    <table style="float:right" border="1">
        <thead>
            <tr>
                <th>Bulan</th>
                <th>Penjualan</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mei</td>
                <td>100.000</td>
            </tr>
            <tr>
                <td>Juni</td>
                <td>200.000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Jumlah</td>
                <td>300.000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>Code language: HTML, XML (xml)

hasilnya

posisi tabel rata kanan

Pencarian di thohirdev:

  • belajar mengatur posisi tabel html
  • merubah posisi tabel html
  • membuat posisi tabel ditengah html
  • atribut align sudah usang di atribut table
  • membuat tabel rata tengah html

  • Share
  • 35,414
  • byMuhammad Thohir S.Kom
  • Posted
  • Categories Html

    • Tutorial Terbaru