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.
Untuk membuat tabel pada HTML digunakan tiga pasang tag utama yang harus ada pada sebuah tabel yaitu:
Pengunaan Table
Cara pengunaan table berdsarkan tag-tag yang sudah dijelaskan dapat dilihat pada contoh berikut ini:
Contoh 1:
*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:
.......
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:
*Tag <caption> memiliki atribut align dengan isi top, buttom, left, right , fungsinya adalah untuk menentuan posisi judul.
Tampilan 2:
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:
Hasil 3:
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:
Hasil 4:
Atribut ROWSPAN
Dan untuk menggabungkan baris pada table dapat menggunakan atribut rowspan
Contoh 5:
Hasil 5:
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:
Hasil 6:
Contoh 7:
Hasil 7:
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:
Hasil 8:
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:
Hasil 9:
Sekian artikel tentang Cara Membuat Tabel di HTML Beserta Contoh Kegunaannya. Semoga bermanfaat bagi kita semua.
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.
 |
| 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 baris1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1 baris n | kolom 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:
| kolom 1 baris 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1 baris 3 | kolom 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 1 | Judul Kolom 2 |
|---|---|
| Kolom 1 Baris 2 | Kolom 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:
| Production | Raha Mutisya | 1493 |
| Buraka | 3829 | |
| Sales | Claire 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 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1 baris 3 | kolom 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 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1 baris 3 | kolom 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 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1 baris 3 | kolom 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 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1 baris 3 | kolom 2 baris 3 |
Sekian artikel tentang Cara Membuat Tabel di HTML Beserta Contoh Kegunaannya. Semoga bermanfaat bagi kita semua.
