Membuat Tabel pada HTML

Membuat Tabel pada HTML

—

by

Webbiz.ID
in

Berikut adalah Membuat Tabel responsive pada HTML

HTML
<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Nama</th>
      <th>Usia</th>
      <th>Alamat</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td>Jakarta</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>30</td>
      <td>Surabaya</td>
    </tr>
    <tr>
      <td>Michael Johnson</td>
      <td>35</td>
      <td>Bandung</td>
    </tr>
  </table>
</div>
HTML

Output:

NamaUsiaAlamat
John Doe25Jakarta
Jane Smith30Surabaya
Michael Johnson35Bandung

Penjelasan:

  • <div style="overflow-x:auto;"> digunakan untuk memberikan efek scroll horizontal pada tabel jika ukurannya melebihi lebar layar.
  • <table> digunakan untuk membuat tabel.
  • <tr> digunakan untuk membuat baris dalam tabel.
  • <th> digunakan untuk membuat sel header dalam tabel.
  • <td> digunakan untuk membuat sel data dalam tabel.

Dengan menggunakan kode di atas, tabel akan menjadi responsif dan dapat menyesuaikan ukurannya dengan baik pada berbagai perangkat dan lebar layar.

Artikel Terbaru ⭐