Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Tabel di HTML Beserta Contoh Kegunaannya

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris terdiri atas kolom-kolom yang menunjukkan kelompok data dalam satu kesatuan.

Cara Membuat Tabel di HTML Beserta Contoh Kegunaannya - Dalam HTML selain untuk menyajikan data, tabel juga digunakan sebagai wadah untuk menempatkan text atau gambar agar tampilan web enak untuk dilihat. Text akan dapat diatur penempatanya sehingga tampil dengan terstruktur, berdasarkan tabel yang dijadikan kerangka.

Adapun gambar disusun dalam tabel tujuanya untuk mempercepat loading. Caranya adalah gambar dapat di potong-potong dan disusun kembali dengan menggunakan tabel sebagai kerangkanya.

Cara Membuat Tabel di HTML Beserta Contoh Kegunaannya_
image source: mybloggertricks.com

Untuk membuat tabel pada HTML digunakan tiga pasang tag utama yang harus ada pada sebuah tabel yaitu:
  • <table>....</table> untuk mendifinisikan sebuah tabel
  • <tr>....</tr> (table row) untuk mendifisikan sebuah baris
  • <td>.....</td> (table data) untuk mendifinisikan kolom

Pengunaan Table

Cara pengunaan table berdsarkan tag-tag yang sudah dijelaskan dapat dilihat pada contoh berikut ini:

Contoh 1:


<table>
<tr><td>kolom 1 baris1</td><td>kolom 2 baris 1</td></tr>
<tr><td>kolom 1 baris 2</td><td>kolom 2 baris 2</td></tr>
.......
<tr><td>kolom 1 baris n</td><td>kolom 2 baris n</td></tr>
</table>

*Untuk melihat batasan-batasan antara kolom dan tabel kita dapat menyertakan atribut border dengan ini nilai dalam pixel yaitu 1, dimana secara default border bernilai 0 sehingga garis akan tidak terlihat.

Tampilan 1:

.......
kolom 1 baris1kolom 2 baris 1
kolom 1 baris 2kolom 2 baris 2
kolom 1 baris nkolom 2 baris n

Membuat Judul Tabel

Untuk membuat judul pada sebuah tabel maka yang kita butuhkan adalah meletakan tag <caption>judul tabel</caption> di bawah tag <table>. Berikut contoh untuk membuat judul tabel:

Contoh 2:

<table>
<caption>judul tabel</caption>
<tr><td>kolom 1 baris 1</td><td>kolom 2 baris 1</td></tr>
<tr><td>kolom 1 baris 2</td><td>kolom 2 baris 2</td></tr>
<tr><td>kolom 1 baris 3</td><td>kolom 2 baris 3</td></tr>
</table>

*Tag <caption> memiliki atribut align dengan isi top, buttom, left, right , fungsinya adalah untuk menentuan posisi judul.

Tampilan 2:

judul tabel
kolom 1 baris 1kolom 2 baris 1
kolom 1 baris 2kolom 2 baris 2
kolom 1 baris 3kolom 2 baris 3

Membuat judul kolom pada tabel

Dan apabila kita ingin memberikan judul pada tiap-tiap kolom pada tabel maka yang perlu dilakukan adalah menganti tag kolom pertama dari <td>judul kolom</td> menjadi <th>judul kolom</th>

Penggunaan tag <th> akan membuat judul kolom ditebalkan/bold/strong secara default. Berikut contohnya:

Contoh 3:

<table>
<tr><th>Judul Kolom 1</th><th>Judul Kolom 2</th></tr>
<tr><td>Kolom 1 Baris 2</td><td>Kolom 2 Baris 2</td></tr>
</table>

Hasil 3:


Judul Kolom 1Judul Kolom 2
Kolom 1 Baris 2Kolom 2 Baris 2

Atribut CELLSPACING & CELLPADDING

Atribut CELLSPACING digunakan untuk mengatur spasi/jarak diantara kolom dalam tabel dan antara kolom dengan batas luar. Sedangkan atribut CELLPADDING berguna untuk mengatur teks dengan batas dalam. Adapun satuan dari atribut CELLSPACING dan CELLPADDING adalah pixel.

Atribut COLSPAN

Untuk mengabungkan beberapa kolom pada tabel dapat menggunakan atribut colspan

Contoh 4:

<table border=2 cellpadding=4>
<tr> <td colspan=2>Production</td> </tr>
<tr> <td>Raha Mutisya</td> <td>1493</td> </tr>
<tr> <td>Buraka</td> <td>3829</td> </tr>
<tr> <td colspan=2>Sales</td> </tr>
<tr> <td>Claire Horne</td> <td>4827</td> </tr>
<tr> <td>Bruce Eckel</td> <td>7246</td> </tr>
</table>

Hasil 4:

Production
Raha Mutisya 1493
Buraka 3829
Sales
Claire Horne 4827
Bruce Eckel 7246

Atribut ROWSPAN

Dan untuk menggabungkan baris pada table dapat menggunakan atribut rowspan

Contoh 5:

<table border=2 cellpadding=4>
<tr><td rowspan=2 >Production</td><td>Raha Mutisya</td><td>1493</td></tr>
<tr><td>Buraka</td> <td>3829</td></tr>
<tr><td rowspan=2 >Sales</td><td>Claire Horne</td> <td>4827</td></tr>
<tr><td>Bruce Eckel</td> <td>7246</td></tr>
</table>

Hasil 5:

ProductionRaha Mutisya1493
Buraka 3829
SalesClaire Horne 4827
Bruce Eckel 7246

Atribut Width

Untuk menentukan lebar dari sebuah table atau kolom kita dapat menambahkan atribut width. Atribut width dapat berisi pixel atau persen (terhadap lebar layar). Atribut width dapat diletakan pata tag <table> dan tag <td>

Contoh 6:

<table width="100%">
<tr><td width="50%">kolom 1 baris 1</td><td width="50%">kolom 2 baris 1</td></tr>
<tr><td>kolom 1 baris 2</td><td>kolom 2 baris 2</td></tr>
<tr><td>kolom 1 baris 3</td><td>kolom 2 baris 3</td></tr>
</table>

Hasil 6:

kolom 1 baris 1kolom 2 baris 1
kolom 1 baris 2kolom 2 baris 2
kolom 1 baris 3kolom 2 baris 3

Contoh 7:

<table width="500">
<tr><td width="60%">kolom 1 baris 1</td><td width="40%">kolom 2 baris 1</td></tr>
<tr><td>kolom 1 baris 2</td><td>kolom 2 baris 2</td></tr>
<tr><td>kolom 1 baris 3</td><td>kolom 2 baris 3</td></tr>
</table>

Hasil 7:


kolom 1 baris 1kolom 2 baris 1
kolom 1 baris 2kolom 2 baris 2
kolom 1 baris 3kolom 2 baris 3

Atribut Align dan Valign

Untuk menentukan posisi tabel dan text pada field tabel kita dapat menggunakan atribut align. Atribut align memiliki value left, center dan right. Sedangkan untuk menetukan posisi text secara vertikal pada kolom/baris dalam sebuah tabel dapat menggunakan valign. Atribut valign mempunyai value top, middle, bottom, baseline

Contoh 8:

<table width="100%" align="center">
<tr><td width="50%" align="center" valign="middle">kolom 1 baris 1</td><td width="50%" valign="middle">kolom 2 baris 1</td></tr>
<tr><td valign="middle">kolom 1 baris 2</td><td valign="middle">kolom 2 baris 2</td></tr>
<tr><td valign="middle">kolom 1 baris 3</td><td valign="middle">kolom 2 baris 3</td></tr>
</table>

Hasil 8:

kolom 1 baris 1kolom 2 baris 1
kolom 1 baris 2kolom 2 baris 2
kolom 1 baris 3kolom 2 baris 3

Pewarnaan pada Table

Untuk lebih membuat menarik tabel maka kita dapat memberikan warna pada tabel. Pemberian warna pada tabel bisa mencakup pada tabelnya sendiri, cell, dan baris.

Atribut untuk memberikan warna pada table adalah bgcolor degan value nama warna atau kode warna.

Atribut bgcolor tersebut dapat kita sisipkan pada tag <table>, <tr> dan <td>

Contoh 9:

<table width="100%" align="center" bgcolor="#999999">
<tr><td width="50%" align="center" valign="middle" bgcolor="#000000">kolom 1 baris 1</td><td width="50%" valign="middle">kolom 2 baris 1</td></tr>
<tr><td valign="middle">kolom 1 baris 2</td><td valign="middle">kolom 2 baris 2</td></tr>
<tr><td valign="middle">kolom 1 baris 3</td><td valign="middle">kolom 2 baris 3</td></tr>
</table>

Hasil 9:

kolom 1 baris 1kolom 2 baris 1
kolom 1 baris 2kolom 2 baris 2
kolom 1 baris 3kolom 2 baris 3

Sekian artikel tentang Cara Membuat Tabel di HTML Beserta Contoh Kegunaannya. Semoga bermanfaat bagi kita semua.
Nikita Dini
Nikita Dini Blogger, Internet Marketer, Web Designer