--> Skip to main content
Home HTML Pemrograman Web Cara Menambah Judul Tabel HTML Dengan Tag Caption

Cara Menambah Judul Tabel HTML Dengan Tag Caption

Pada tutorial dasar-dasar HTML kali ini, kita akan melanjutkan pembuatan tabel dimana dalam tutorial kali ini kita akan menambahkan judul untuk sebuah tabel yang kita buat.

Kalau pada tutorial sebelumnya kita menggunakan tag <th> untuk membuat judul kolom. Maka untuk membuat judul atau keterangan untuk sebuah tabel, kita menggunakan tag <caption>.

Membuat Judul pada Tabel HTML dengan tag <caption>

Sering kita melihat sebuah tabel memiliki sebuah judul seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Gambar.1
Jika kita melihat Gambar.1 maka dimunculkan judul : Tabel Mahasiswa. Seperti yang telah diutarakan diatas, maka dalam pembuatan sebuah tabel cukup digunakan tag <caption>. Berikut ini source code untuk membuat tabel dengan judul seperti Gambar.1 diatas :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
  <caption>Tabel Mahasiswa</caption>
  <tr style="background-color: blue;">
    <th>No</th>
    <th>Nama</th>
    <th>NIM</th>
    <th>Jenis Kelamin</th>
  </tr>
  <tr style="background-color: green;">
    <td>1</td>
    <td>Andi Fraseria</td>
    <td>220120102001</td>
    <td>Pria</td>
  </tr>
</table>
</body>
</html>

Nilai Attribute untuk tag <caption>

Secara default, judul pada sebuah tabel akan berada di posisi atas yang terletak ditengah-tengah tabel. Nah bagaimana caranya agar judul tabel berada diposisi lain ?

 Untuk membuat judul pada sebuah tabel berdasarkan posisi yang kita inginkan, kita dapat juga memanfaatkan attribut untuk tag <caption> yang berfungsi  apakah judul berada dikiri, dikanan maupun diatas atau dibawah dibawah.
Nilai Keterangan
leftJudul berada disisi kiri tabel
rightJudul berada disisi kanan tabel
topJudul berada diatas tabel (default)
bottomJudul berada dibawah tabel
Perhatian !!:
Untuk browser chrome hanya mengsupport attribute bottom dan top. 

Membuat judul tabel berada di bawah

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
  <caption align="bottom">Tabel Mahasiswa</caption>
  <tr style="background-color: blue;">
    <th>No</th>
    <th>Nama</th>
    <th>NIM</th>
    <th>Jenis Kelamin</th>
  </tr>
  <tr style="background-color: green;">
    <td>1</td>
    <td>Andi Fraseria</td>
    <td>220120102001</td>
    <td>Pria</td>
  </tr>
</table>
</body>
</html>
Outputnya ditunjukkan oleh Gambar 2 dibawah ini:
Gambar,2

 Seperti yang terlihat pada Gambar.2, judul tabel berada dibawah. Kalau kita menginginkan diatas kita dapat menggunakan:
<caption align="top">Tabel Mahasiswa</caption>
atau tanpa menggunakan attribute-nya, karena secara default berada diatas dan di posisi tengah.

 Sedangkan untuk posisi kiri dan kanan, seperti yang diutarakan diatas, pada browser chrome tidak didukung.  

 Akan tetapi kita tetap dapat membuat judul tabel berada pada posisi kiri di browser chrome dengan mengatur posisi caption (judul) kiri atau kanan dengan bantuan css.

Membuat judul tabel berada disisi kiri

Diatas disebutkan, satu-satunya cara untuk membuat judul tabel berada disisi kiri atau kanan adalah dengan bantuan css.

 Tambahkan pengaturan css untuk caption, misalnya kita akan membuat judul berada disisi kanan seperti script berikut :
<!DOCTYPE html>
<html>
<head>
<style>
caption {
    display: table-caption;
    text-align: right;
}
</style>
</head>
<body>
<table border="1">
  <caption>Tabel Mahasiswa</caption>
  <tr style="background-color: blue;">
    <th>No</th>
    <th>Nama</th>
    <th>NIM</th>
    <th>Jenis Kelamin</th>
  </tr>
  <tr style="background-color: green;">
    <td>1</td>
    <td>Andi Fraseria</td>
    <td>220120102001</td>
    <td>Pria</td>
  </tr>
</table>
</body>
</html>
Outputnya ditunjukkan oleh Gambar.3 dibawah ini :
Gambar.3

 Perhatikan script diatas pada bagian kode diantar <style>..</style>. Dibagian tersebutlah kita melakukan kode css untuk posisi judul apakah berada di posisi kiri atau kanan, cukup memainkan text-align:right atau text-align:left.

 Sekarang timbul lagi pertanyaan. Bagaimana seandainya judulnya berada dibawah dan berada diposisi kanan. Apakah hal tersebut memungkinkan ?. Tentunya sangat mungkin. Kita cukup tambahkan kode caption-side:bottom atau caption-side:top. Perhatikan contohnya dibawah.

Membuat judul tabel berada di bawah dengan posisi kanan

<!DOCTYPE html>
<html>
<head>
<style>
caption {
    display: table-caption;
    text-align: right;
 caption-side:bottom;
}
</style>
</head>
<body>
<table border="1">
  <caption>Tabel Mahasiswa</caption>
  <tr style="background-color: blue;">
    <th>No</th>
    <th>Nama</th>
    <th>NIM</th>
    <th>Jenis Kelamin</th>
  </tr>
  <tr style="background-color: green;">
    <td>1</td>
    <td>Andi Fraseria</td>
    <td>220120102001</td>
    <td>Pria</td>
  </tr>
</table>
</body>
</html>
Outputnya ditunjukkan oleh Gambar.4 dibawah :
Gambar.4

Membuat Judul Tabel HTML berada diatas dengan posisi kanan

<!DOCTYPE html>
<html>
<head>
<style>
caption {
    display: table-caption;
    text-align: right;
 caption-side:top;
}
</style>
</head>
<body>
<table border="1">
  <caption>Tabel Mahasiswa</caption>
  <tr style="background-color: blue;">
    <th>No</th>
    <th>Nama</th>
    <th>NIM</th>
    <th>Jenis Kelamin</th>
  </tr>
  <tr style="background-color: green;">
    <td>1</td>
    <td>Andi Fraseria</td>
    <td>220120102001</td>
    <td>Pria</td>
  </tr>
</table>
</body>
</html>
Outputnya ditunjukkan oleh Gambar.5 dibawah ini :
Gambar.5

 Dari kedua contoh pengaturan judul tabel diatas, kitapun dapat membuat judul tabel berada diatas dengan posisi kiri serta judul tabel dibawah dengan posisi kiri dengan melakukan perubahan disisi kode css-nya.
Tutorial Tabel HTML lainnya :

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar