Cara Membuat Struktur Tabel HTML (tag thead, tfoot dan tbody).

Untuk tabel yang lebih kompleks, HTML menyediakan tag-tag yang dapat digunakan untuk ‘membagi’ tabel menjadi bagian-bagian yang terpisah, misalnya bagian judul (head), bagian penutup (foot), dan bagian isi tabel (body). Untuk keperluan tersebut, pada tutorial tabel HTML kali ini kita akan mempelajari Cara Membuat Struktur Tabel HTML dengan tag thead, tfoot dan tbody.


 

Seperti yang telah kita pelajari dalam tutorial tentang pembuatan tabel, sebuah tabel dapat dirancang dengan menggunakan 3 tag saja, yaitu tag table, tag tr, dan tag td. Namun jika kita membutuhkan pembagian struktur tabel HTML yang lebih jelas, HTML menyediakan tag khusus untuk keperluan ini, terdiri dari tag thead, tfoot dan tbody.

Untuk lebih memahami maksud dan cara penggunaan tag thead, tfoot dan tbody, langsung saja kita tampilkan kode HTMLnya. Silahkan buka aplikasi text editor, lalu ketikkan kode berikut, dan save sebagai tabelstruktur.html.

Contoh penggunaan tag thead, tfoot dan tbody:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
   <head>
      <title>Penggunaan Tag thead, tfoot dan tbody dalam Tabel</title>
   </head>
<body>
<h3>Belajar Tag thead, tfoot dan tbody dalam Tabel</h3>
<table border="1">
    <thead>
        <tr>
          <th>Judul 1</th>
          <th>Judul 2</th>
          <th>Judul 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
          <td>Footer 1</td>
          <td>Footer 2</td>
          <td>Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
          <td>Baris 1, Kolom 1</td>
          <td>Baris 1, Kolom 2</td>
          <td>Baris 1, Kolom 3</td>
        </tr>
        <tr>
           <td>Baris 2, Kolom 1</td>
           <td>Baris 2, Kolom 2</td>
           <td>Baris 2, Kolom 3</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Contoh Cara Membuat Struktur Tabel HTML (thead, tfoot dan tbody)Kode HTML diatas terasa sedikit panjang untuk membuat sebuah tabel bila dibandingkan sewaktu membuat tabel sederhana dalam tutorial Cara Membuat tabel di HTML (tag table).

Kembali kedalam kode HTML diatas, perhatikan tag pembuka dan penutup untuk setiap tag trdalam tabel. Terlihat bahwa kita menggunakan 3 tag baru, yakni tag thead, tfoot dan tbody(singkatan dari table headertable foot, dan table body). Ketiga tag tersebut digunakan untuk membagi struktur tabel menjadi 3 bagian.

Perhatikan pula urutan penulisan tabel diatas. Dapat dilihat bahwa untuk tag tfoot, walaupun dibuat persis setelah thead pada awal tabel, namun web browser akan menampilkannya pada baris terakhir dari tabel.

 

Sumber : DuniaIlkom

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *