Cara Membuat Struktur Tabel HTML

Sebelumnya, kita sudah bahas cara membuat judul tabel HTML. Sekarang, kita akan membahas bagaimana bentuk struktur tabel HTML dan bagaimana tampilannya. Berikut panduan AneIqbal selengkapnya.

Sama halnya dengan HTML, tabel di HTML pun memiliki struktur. Selama ini, tag yang kita gunakan untuk membuat tabel yakni tag <table>, <tr>, dan <td>. hanya 3 tag itu saja.

Supaya tabel HTML yang kita buat memiliki struktur, ada 3 tambahan tag lagi yakni tag <thead>, <tbody>, dan <tfoot>. Ketiga tag tersebut membagi tabel menjadi 3 bagian, yakni bagian kepala (atas/header kolom), badan (tengah/data tabel), dan kaki (bawah).

Sesuai dengan nama tagnya, tag <thead> untuk bagian kepala tabel, tag <tbody> untuk bagian badan tabel, dan tag <tfoot> untuk bagian kaki tabel. Supaya lebih enak, kita praktikkan saja.

Markicob, gan. Mari kita coba.

Buat kode HTML seperti ini.

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat struktur tabel di HTML</title>
  </head>
  <body>
    <table border="1" cellpadding="1" cellspacing="1">
     <caption>Data Jumlah Korban Jiwa Akibat Kezhaliman Penguasa</caption>
     <thead>
       <tr>
        <th>No.</th>
        <th>Negara</th>
        <th>Jumlah Korban</th>
       </tr>
     </thead>
     <tbody>
       <tr>
        <td>1.</td>
        <td>Suriah</td>
        <td>5 juta jiwa (bukan jumlah sebenarnya)</td>
      </tr>
      <tr>
        <td>2.</td>
        <td>Palestina</td>
        <td>10 juta jiwa (bukan jumlah sebenarnya)</td>
      </tr>
      <tr>
        <td>3.</td>
        <td>Rohingya</td>
        <td>3 juta jiwa (bukan jumlah sebenarnya)</td>
      </tr>
     </tbody>
     <tfoot>
       <tr>
        <td>Yuk bantu do'a.</td>
        <td>Yuk bantu do'a.</td>
        <td>Yuk bantu do'a.</td>
       </tr>
     </tfoot>
    </table>
  </body>
</html>

Simpan. Lalu jalankan. Seperti ini jadinya.

aneiqbal-tutorial-tabel-html12
tampilan tabel HTML

Kodenya jadi lebih panjang. Namun dengan dibuat terstruktur, akan memudahkan kita dalam membaca kodenya dan mengerti bagian-bagian tabelnya.

Selanjutnya >> Cara Membuat Group Kolom Tabel HTML.

 

Share yuk, ke:

Leave a Comment