Cara membuat tulisan dalam tabel html

Question

Table of Contents Show

Membuat Judul pada Tabel HTML dengan tag <caption>
Nilai Attribute untuk tag <caption>
Membuat judul tabel berada di bawah
Membuat judul tabel berada disisi kiri
Membuat judul tabel berada di bawah dengan posisi kanan
Membuat Judul Tabel HTML berada diatas dengan posisi kanan
Bagaimana membuat tabel HTML?
Bagaimana cara membuat baris pada tabel HTML?
Tag align HTML untuk apa?
Bagaimana struktur tabel dalam HTML?

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.1Jika 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 KeteranganleftJudul berada disisi kiri tabelrightJudul berada disisi kanan tabeltopJudul 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.

Bagaimana membuat tabel HTML?

Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:.

Tag <table> untuk membungkus tabelnya..

Tag <thead> untuk membungkus bagian kepala tabel..

Tag <tbody> untuk membungkus bagian body dari tabel..

Tag <tr> (tabel row) untuk membuat baris..

Tag <td> (table data) untuk membuat sel..

Bagaimana cara membuat baris pada tabel HTML?

Tabel didefinisikan dengan tag <table> sebagai kontainer, lalu tag <thead> untuk bagian header, tag <tbody> untuk bagian body table, dan tag <tfoot> untuk bagian footer. Sedangkan untuk membuat baris pada tabel kita menggunakan tag <tr> , dan untuk cell-nya kita bisa menggunakan baik tag <td> atau pun tag <th> .

Tag align HTML untuk apa?

Atribut HTML align merupakan atribut yang digunakan untuk menata perataan teks. Atribut align biasanya digunakan pada HTML element pada tingkatan blok seperti DIV, P (paragraf), header dan lainnya. Atribut align juga dapat diterapkan pada tabel agar konten pada data tabel nilai perataannya dapat diatur.

Bagaimana struktur tabel dalam HTML?

Struktur dasar membuat tabel pada HTML adalah tag <table>, <tr> dan <td>. Artinya, hanya dengan 3 tag tersebut kita sudah bisa menampilkan tabel pada web browser.

kode html