Tutorial Tabel HTML: Cara Membuat Struktur Tabel di Tabel HTML

membuat struktur tabel di html

Di tutorial sebelumnya, kita sudah berhasil membuat tabel header kolom dan juga membuat judul tabel. Selanjutnya, kita akan bahas cara membuat struktur tabel.

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.

Baca juga ya..
Tutorial Tabel HTML: Cara Membuat Judul Tabel di Tabel HTML dengan Tag Caption
Tutorial Tabel HTML: Cara Membuat Tabel Header Kolom di Tabel HTML
PENTING!! 5 Hal yang Dapat Kita Lakukan untuk Membantu Aleppo

membuat struktur tabel di html

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

Selanjutnya >> Tutorial Tabel HTML: Cara Membuat Group Kolom Tabel di Tabel HTML untuk Memberi Style ke Kolom dengan Cepat


0 Komentar untuk "Tutorial Tabel HTML: Cara Membuat Struktur Tabel di Tabel HTML"