Tabel merupakan sarana yang efektif untuk menampilkan informasi dalam bentuk sel yang terdiri dari kolom (table data) dan baris (table row).
Untuk membuat tabel di HTML anda bisa menggunakan 3 tag, antara lain :
| 1. | Tag <table> | : merupakan tag utama dari table, yang digunakan untuk memulai pembuatan tabel Tag tabel pada HTML selalu dimulai dengan <table> dan diakhiri dengan tag penutup </table>. Tag <table> memiliki atribut-atribut yang mengatur tampilan bagaimana tabel ditampilkan pada browser. |
| 2. | Tag <tr> | : Tag <tr> mendefinisikan baris pada tabel dan tag ini harus berada di dalam tag <table>. Pada tag <tr> terdapat tag <td> dan <th>. Attribute yang terdapat pada tag ini diantaranya adalah bgcolor, height, dll. |
| 3. | Tag <td> dan Tag <th> |
: Tag <th> dan <td> merupakan informasi pada tabel. Tag <td> (table data) merupakan tag yang berfungsi untuk membuat data cell. Tag <th> (table header) mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Tag <th> dan <td> ini harus terletak di dalam tag <tr>. Attribute kedua element diantaranya adalah align, valign, bgcolor, colspan, rowspan. |
Contoh pembuatan table pada HTML :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
<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>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
<tr>
<td>Baris 4, Kolom 1</td>
<td>Baris 4, Kolom 2</td>
<td>Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
Sintak tersebut saya simpan (save as) dengan nama belajartable.html dan hasilnya seperti berikut :
Terlihat dari hasil gambarnya, akan terbuat 1 table, yang memiliki 4 baris, dan di setiap baris memiliki 3 kolom, lalu pada tag table juga terdapat atribut dengan valuenya 1 (border=”1″) yang artinya akan memberikan garis tepi pada table dengan besar 1 pixel.
Tag <table> memiliki atribut-atribut yang mengatur tampilan bagaimana tabel ditampilkan pada browser.
1. Attribute Border di tabel HTML
Attribute border digunakan untuk mengatur ukuran garis tepi yang ada pada tabel html, satuan yang digunakan adalah satuan pixel (px). Jika kita tidak memberikan nilai pada bagian border maka tabel akan ditampilkan tanpa memiliki garis.
Atribut border digunakan untuk menentukan ketebalan garis yang mengelilingi tabel. Secara default, nilai pada atribut ini jika tidak didefinisikan adalah 0.
Cotoh seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table>
<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>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
<tr>
<td>Baris 4, Kolom 1</td>
<td>Baris 4, Kolom 2</td>
<td>Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
hasilnya :
2. Atribut bordercolor
Kita dapat merubah warna dari border tabel dengan menambahkan atribut bordercolor. Atribute bordercolor harus disertai dengan atribute border dengan valuenya minimal 1.
Browser Opera tidak mendukung atribut ini, gunakan Browser IE/Firefox/Google Chrome untuk melihat efek dari penggunaan atribut ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1" bordercolor="red">
<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>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
<tr>
<td>Baris 4, Kolom 1</td>
<td>Baris 4, Kolom 2</td>
<td>Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
Hasilnya :
3. Tag caption di tabel HTML
Tag caption digunakan untuk memberikan judul dari tabel, sebenarnya bisa saja langsung menuliskan judul dari tabel dengan langsung menuliskan text yang diletakkan di atas bagian tabel, tetapi HTML sendiri telah menyediakan pembuatan judul langsung dengan menggunakan tag caption.
Tag ini harus berada di dalam tag <table> dan mempunyai atribute align dengan nilai top (judul terletak di atas tabel), dan bottom (judul terletak di bawah tabel), secara defult tanpa atrubute posisi judul terletak di atas table.
<!DOCTYPE html>
<html>
<head>
<title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan Caption</h1>
<table border="1">
<caption>Tabel Data Siswa</caption>
<tr>
<th>No</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Aris Samsudin</td>
</tr>
<tr>
<td>2</td>
<td>Taufik Hidayat</td>
</tr>
</table>
</body>
</html>
Hasilnya :
Terlihat tabelnya memiliki judul pada bagian atas dari tabel.
3. Atribut align
Atribut align yang diterapkan pada tag <table> akan menentukan posisi dari tabel tersebut. Nilai/value dari atribut ini adalah:
- left
- center
- right
Secara default apabila atribut align tidak dituliskan makan posisi table berada di kiri.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Tabel</title>
</head>
<body>
<table border="1">
<caption align="bottom">Tabel Tanpa Align</caption>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
<table border="1" align="right">
<caption align="bottom">Tabel Align Kanan</caption>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
<table border="1" align="center">
<caption align="bottom">Tabel Align Tengah</caption>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
<table border="1" align="left">
<caption align="bottom">Tabel Align Kiri</caption>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>
Hasilnya :
4. Atribut background
Atribut background berfungsi untuk menampilkan image sebagai latar belakang, dengan valuenya merupakan url file gambar yang akan ditampilkan. Contoh saya tampilkan gambar bunga.jpg yang berada di folder gambar :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1" background="gambar/bunga.jpg">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
</tr>
</table>
</body>
</html>
Hasilnya :
5. Atribut bgcolor
Atribut bgcolor digunakan untuk menetapkan warna latar belakang (background) dari tabel/cell.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
<tr bgcolor="yellow">
<td width="30px">No</td>
<td width="200px">Nama</td>
</tr>
<tr>
<td bgcolor="aqua">1</td>
<td bgcolor="red">Ahmad</td>
</tr>
<tr>
<td bgcolor="blue">2</td>
<td bgcolor="green">Budi</td>
</tr>
</table>
</body>
</html>
Hasilnya :
6. Atribut width
Atribut width dapat juga diterapkan pada tabel, dengan menggunakan atribut ini kita dapat menentukan seberapa lebar tabel yang akan ditampilkan pada halaman web. Nilai/value pada atribut ini dapat berupa persentase ataupun berupa pixel.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Tabel</title>
</head>
<body>
<table border="1">
<caption align="bottom">Tanpa Width</caption>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
<br>
<table border="1" width="100px">
<caption align="bottom">Tabel Lebar 100px</caption>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
<br>
<table border="1" width="800px">
<caption align="bottom">Tabel Lebar 800px</caption>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
<br>
<table border="1" width="800px">
<caption align="bottom">Tabel Lebar 800px --> kolom 1 Lebar 200px</caption>
<tr>
<td width="200px">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>
Hasilnya :
7. Atribut height
Untuk menentukan ukuran tinggi cell digunakan atribut height, dengan nilai dalam ukuran pixels.
Hasilnya :
8. Attribute Cellspacing di Tabel HTML
Attribute Cellspacing digunakan untuk mengatur jarak luar antar masing masing cell, untuk satuannya juga sama seperti border yaitu pixel, contoh skripnya adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan border 1 cellspacing 1</h1>
<table border="1" cellspacing="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
<br/>
<h1>Tabel dengan border 1 cellspacing 10</h1>
<table border="1" cellspacing="10">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
Hasilnya :
Jika kita perhatikan antara tabel 1 dan tabel 2 :
- Tabel pertama kita set cellspacingnya adalah 1 sehingga jarak antar cell hanya 1 pixel
- Tabel kedua kita set cellspacingnya adalah 10 sehingga jarak antar cell adalah 10 pixel
Jelas sekali perbedaannya, dimana yang cellspacingnya 10 terlihat ada jarak yang begitu lebar dibanding dengan yang cellspacingnya 1.
9. Attribute Cellpadding di tabel HTML
Attribute cellpadding digunakan untuk mengatur ukuran dari garis di masing masing cell dan objek yang ada didalamnya.
<!DOCTYPE html>
<html>
<head>
<title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan border 1 cellpadding 1</h1>
<table border="1" cellpadding="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
<br/>
<h1>Tabel dengan border 1 cellpadding 10</h1>
<table border="1" cellpadding="10">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
Hasilnya :
- Tabel pertama antara garis di bagian cell dan textnya hampir tidak memiliki jarak karena kita hanya menggunakan cellpadding 1
- Tabel kedua kita menggunakan cellpadding 10 sehingga jarak antara baris dan textnya memiliki jarak sebesar 10 pixel
10. Attribute Rowspan dan Colspan di tabel HTML
Kedua Attribute ini hampir memiliki fungsi yang sama, yaitu untuk menggabungkan beberapa bagian dari tabel. Kedua attribute ini diletakkan di bagian tag <td>.
- Attribute Rowspan digunakan untuk menggabungkan bagian tabel (cell) yang berada di bawahnya atau bisa kita sederhanakan untuk menggabungkan bagian tabel secara vertical.
- Attribute Colspan digunakan untuk menggbungkan bagian tabel (cell) yang berada di sebelahnya atau bisa kita sederhanakan untuk menggabungkan bagian tabel secara horizontal.
<!DOCTYPE html>
<html>
<head>
<title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan menggunakan rowspan</h1>
<table border="1">
<tr>
<td rowspan="2">Baris 1 Kolom 1 dan Baris 2 Kolom 1 </td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
<br/>
<h1>Tabel dengan menggunakan colspan</h1>
<table border="1">
<tr>
<td colspan="2">Baris 1 Kolom 1 dan Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
Hasilnya :
maka hasilnya adalah sebagai berikut :
- Tabel pertama yang menggunakan rowspan otomatis akan menggabungkan dari baris 1 kolom 1 dan baris 2 kolom 1 karena kita menggunakan attribute rowspan pada tag <td> di baris 1 kolom 1
- Tabel kedua yang menggunakan colspan otomatis akan menggabungkan baris 1 kolom 1 dan baris 1 kolom 2 karena kita menggunakan attribute rowspan pada tag <td> di baris 1 kolom 1
11. Attribute TH di tabel HTML
Attribute ini digunakan untuk menggantikan tag <td> pada bagian header dari tabel, bagian header itu biasanya adalah baris pertama yang ada pada bagian tabel, biasanya digunakan sebagai keterangan dari data masing masing kolom.
Perbedaan <td> dan <th> adalah jika kita menggunakan tag <th> maka text akan ditampilkan dengan huruf tebal (bold) serta textnya akan berada di tengah (center).
<!DOCTYPE html>
<html>
<head>
<title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel dengan menggunakan rowspan</h1>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Aris Samsudin</td>
</tr>
<tr>
<td>2</td>
<td>Taufik Hidayat</td>
</tr>
</table>
</body>
</html>
Hasilnya :
Hasilnya terlihat untuk kolom yang menggunakan tag <th> ditampilkan dengan huruf tebal (bold) serta berada di tengah (center).
12. Tag <thead>, <tbody>, dan <tfoot> di tabel HTML
Seperti yang kita ketahui bahwa tabel biasanya digunakan untuk menampilkan data dalam bentuk tabel, jika tabel diperlukan untuk menampilkan data yang kompleks, pasti akan membutuhkan strukutur tabel yang mudah dipahami agar ketika merubah style tabel di css dapat lebih mudah.
Di HTML terdapat fitur untuk membagi strukutur tabel menjadi beberapa bagian yang akan diwakili oleh 3 tag antara lain :
- <thead></thead> : untuk mendeklarasikan bagian header dari tabel
- <tbody></tbody> : untuk mendeklarasikan bagian body dari tabel
- <tfoot></tfoot> : untuk mendeklarasikan bagian footer dari tabel
Sekilas jika kita menggunakan tag ini memang tidak ada yang berbeda dalam hasil tabel yang dihasilkan, tetapi jika kita menggunakan skrip css untuk merubah stylenya, kita dapat terbantu dengan adanya 3 tag ini.
<!DOCTYPE html>
<html>
<head>
<title>Tabel di HTML</title>
<style type="text/css">
thead
{
background-color:red;
}
tbody
{
background-color:green;
}
tfoot
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Tabel dengan menggunakan thead, tbody, tfoot</h1>
<table border="1">
<thead>
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Harga Satuan</th>
<th>Jumlah</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Telur</td>
<td>Rp 1.000</td>
<td>2</td>
<td>Rp.2000</td>
</tr>
<tr>
<td>2</td>
<td>Sawi</td>
<td>Rp 500</td>
<td>2</td>
<td>Rp.1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td colspan="4" style="text-align:right;">Rp. 3.000,-</td>
</tr>
</tfoot>
</table>
</body>
</html>
Hasulnya :
13. Tag Colgroup dan Tag col di tabel HTML
Kedua tag ini digunakan untuk mengelompokkan kolom yang kita buat, sehingga memudahkan untuk proses set style CSS di masing-masing kolom.
Secara default jika kita ingin memberikan warna yang berbeda di masing masing kolom, kita harus menuliskan style di masing-masing kolom, tetapi dengan menggunakan kedua tag ini kita dapat dengan mudah memberikan style yang berbeda di masing-masing kolom dengan hanya memberikan style di bagian tag colnya saja.
<!DOCTYPE html>
<html>
<head>
<title>Tabel di HTML</title>
</head>
<body>
<h1>Tabel Menggunakan tag colgroup dan tag col</h1>
<table border="1">
<colgroup>
<col style='background-color:green;width:25px;'></col>
<col style='background-color:orange;width:500px;'></col>
<col style='background-color:yellow;width:200px;'></col>
</colgroup>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Aris Samsudin</td>
<td>3mm3</td>
</tr>
<tr>
<td>2</td>
<td>Taufik Hidayat</td>
<td>2mm3</td>
</tr>
</table>
</body>
</html>
Hasilnya :
hasilnya masing-masing kolom memiliki warna yang berbeda, hal tersebut karena kita menambahkan skrip di baris 10 hingga 12.
- pada col pertama di berikan background-color:green sehingga kolom akan berwarna hijau, lalu anda juga mengatur ukuran width adalah 25 px
- pada col kedua diberikan background-color:orange sehingga kolom akan berwarna orange, lalu anda juga mengatur ukuran width adalah 500 px
- pada col ketiga diberikan background-color:yellow sehingga kolom akan berwarna yellow, lalu anda juga mengatur ukuran width adalah 200 px
Referensi :
- https://www.warungbelajar.com/belajar-html-part-19-cara-membuat-tabel-di-html.html
- https://www.duniailkom.com/belajar-html-cara-membuat-tabel-di-html-tag-table/
Be the first to comment