Tutorial HTML terusan 14 ~ infoku.net

Setelah mempelajari Tutorial HTML terusan 13 sekarang kita akanlanjutkan ke Tutorial HTML terusan 14.

Fungsi Tag caption

Tag caption berfungsi untuk membuat judul tabel di dalam HTML. Tag ini agak jarang digunakan, namun sebenarnya sangat bermanfaat. Dengan mempelajari tag caption ini, kita mengetahui bahwa HTML telah menyediakan tag khusus untuk membuat judul tabel.

Tag caption digunakan untuk membuat judul maupun memberikan keterangan untuk sebuah tabel HTML. Penulisan tag caption harus ditulis setelah tag pembuka tabel (setelah tag table).
Kita langsung saja ke contoh penggunaan tag caption ini. Silahkan buka aplikasi text editor, ketikkan kode berikut, dan savelah sebagai tabelcaption.html
Contoh penggunaan tag caption:

<!DOCTYPE html>
<html>
   <head>
       <title>Cara Penulisan Tag Caption Tabel HTML</title>
   </head>
<body>
<h2>Belajar Tag caption untuk Tabel HTML</h2>
<table border="1">
<caption>Contoh Caption Tabel</caption>
    <tr>
        <th>Judul 1</th>
        <th>Judul 2</th>
        <th>Judul 3</th>
    </tr>
    <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>
</table>
</body>
</html>

Ketika dijalankan pada web browser, tag caption tersebut akan ditampilkan sebelum tabel, sehingga cocok untuk membuat keterangan dari tabel.

Selain menggunakan tag caption, banyak web developer menggunakan tag header untuk judul dari kolom, seperti tag h3 atau h4 karena bisa meningkatkan nilai judul tabel di dalam search engine (Search Engine Optimization). Namun setidaknya kita mengetahui bahwa HTML menyediakan tag caption ini sebagai fitur dalam membuat tabel HTML agar tampak lebih informatif.

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).

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:

<!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>

Kembali kedalam kode HTML diatas, perhatikan tag pembuka dan penutup untuk setiap tag tr dalam tabel. Terlihat bahwa kita menggunakan 3 tag baru, yakni tag thead, tfoot dan tbody (singkatan dari table header, table 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.

Tag thead, tfoot dan tbody mungkin tidak akan sering dipakai, terutama untuk membuat tabel sederhana dengan jumlah baris kurang dari 10. Namun untuk tabel yang kompleks, struktur HTML seperti ini akan memudahkan dalam ‘mengatur’ tampilan tabel, terutama jika menggunakan kode CSS nantinya.

Sebagai contoh penggunaan tag ini, silahkan buka aplikasi text editor, lalu ketikkan kode berikut, dan save sebagai tabelcol.html
Contoh penggunaan tag colgroup dan tag col :

<!DOCTYPE html>
<html>
   <head>
        <title>Penggunaan tag colgroup dan col dalam Tabel</title>
   </head>
<body>
<h3>Belajar Tag colgroup dan col dalam Tabel</h3>
<table border="1">
    <colgroup>
        <col style="background-color:yellow" />
        <col style="background-color:green" />
        <col />
    </colgroup>
    <tr>
        <th>Judul 1</th>
        <th>Judul 2</th>
        <th>Judul 3</th>
    </tr>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr style="color:blue">
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Untuk contoh diatas, saya menggunakan tag style untuk ‘memasukkan’ kode CSS. Lebih jauh tentang CSS.

Di dalam kode HTML tersebut, tag colgroup dan tag col dibuat pada baris pertama sebelum tag tr tabel. Setiap tag col harus disesuaikan dengan jumlah kolom dari tabel. Dengan merubah style pada tag col, efeknya seluruh sel tabel pada kolom tersebut juga akan berubah. Untuk baris, hal yang sama dapat kita lakukan dengan merubah atribut dari tag tr.

Penggunaan atribut width pada tag col

Salah satu atribut yang bisa kita gunakan pada tag col adalah atribut width. Atribut ini digunakan untuk mengatur lebar dari masing-masing kolom dalam tabel.
Buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelcolwidth.html
Contoh penggunaan atribut width pada tag col :

<!DOCTYPE html>
<html>
   <head>
      <title>Belajar atribut width dalam Tabel</title>
   </head>
<body>
<h3>Belajar atribut width dalam Tabel</h3>
<table border="1">
    <colgroup>
        <col width="75px" style="background-color:blue" />
        <col width="150px" />
        <col width="300px" />
    </colgroup>
    <tr>
        <th>Judul 1</th>
        <th>Judul 2</th>
        <th>Judul 3</th>
    </tr>
    <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>
</table>
</body>
</html>

Dari contoh kode HTML diatas, saya menggunakan atribut width untuk mengatur lebar dari kolom tabel. Misalnya untuk kolom pertama, atribut width=”75px” digunakan untuk membuat lebar kolom menjadi 75 pixel. Lebih lanjut tentang atribut width.

Sekian dulu penjelasan dari saya,semoga jelas,kita lanjut lagi Dalam tutorial selanjutnya di Tutorial HTML terusan 15.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.