Belajar HTML Part 19 Cara Membuat Tabel di HTML

Tutorial kali ini akan membahas mengenai cara membuat tabel di HTML, tabel digunakan untuk menampilkan data, baik itu data statis ataupun data dinamis dari database misalnya

baik langsung saja ya kita coba bahas beberapa hal yang ada di tabel HTML.

---

Video Tutorial Belajar HTML – Cara Membuat Tabel di HTML

 

Cara Membuat tabel HTML dengan tag<table>,<tr>,<td>

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
2. Tag <tr>              : merupakan tag yang digunakan untuk membuat baris pada tabel
3. Tag <td>             : merupakan tag yang digunakan untuk membuat kolom di masing – masing baris pada tabel

bagaimana langsung kita coba ya… silahkan anda ketikkan skrip di bawah ini :

lalu saya simpan dengan nama semisal tabel.html dan dibuka di browser kesayangan anda :

terlihat dari hasil gambarnya, akan terbuat 1 table, yang memiliki 2 baris, dan di setiap baris memiliki 2 kolom, mudah kan, lalu pada tag table saya juga menambahkan border=”1″ yang artinya akan memberikan garis tepi pada table dengan besar 1 pixel.

 

Attribute Border di tabel HTML

Attribute border digunakan untuk mengatur ukuran garis tepi yang ada pada tabel html, satuan yang digunakan adalah satuan pixel.

jika anda tidak memberikan nilai pada bagian border maka tabel akan ditampilkan tanpa memiliki garis, baik langsung kita coba ya dan kita coba bandingkan.

lalu saya simpan semisal dengan nama border_tabel.html , lalu saya buka di browser maka hasilnya adalah sebagai berikut :

hasilnya ada 2 tabel :

• Tabel yang bagian atas karena menggunakan border 0 sehingga tidak memiliki garis
• Tabel kedua yang menggunakan border 8, memiliki garis yang tepi dengan besar 8 pixel

gimana mudahkan untuk mengatur dari tabel.

 

Attribute Cellspacing di Tabel HTML

Attribute Cellspacing digunakan untuk mengatur jarak luar antar masing masing cell, bagaimana bingung ya ?

baik akan kita coba untuk membuat skrip sederhanya, untuk satuannya juga sama seperti border yaitu pixel, contoh skripnya adalah sebagai berikut :

lalu saya simpan semisal dengan nama cellspacing_table.html , jika kita buka di browser hasilnya adalah sebagai berikut :

jika anda 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 kan perbedaannya, dan mudah sekali bukan cara penggunaannya

 

Attribute Cellpadding di tabel HTML

Attribute  cellpadding digunakan untuk mengatur ukuran dari garis di masing masing cell dan objek yang ada didalamnya, baik langsung aja kita coba buat, agar tidak bingung hehe…

lalu saya simpan semisal dengan nama cellpadding_table.html , lalu saya buka di browser, maka hasilnya adalah sebagai berikut :

Maka hasilnya adalah :

• 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

 

Attribute Rowspan dan Colspan di tabel HTML

Kedua Attribute ini hampir memiliki fungsi yang sama, yaitu untuk menggabungkan beberapa bagian dari tabel, lalu apa yang membedakan, mari kita bahas…

• 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.

kedua attribute ini diletakkan di bagian tag <td>, agar tidak bingung kita akan membuat skrip html sederhana agar anda lebih mengerti dari penggunaan attribute rowspan dan colspan.

lalu saya simpan semisal dengan nama colspan_rowspan_tabel.html , lalu saya buka di browser, maka hasilnya adalah sebagai berikut :

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

 

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.

Lalu apa perbedaanya jika kita menggunakan <td> dan <th> ?

perbedaanya adalah jika kita menggunakan tag <th> maka text akan ditampilkan dengan huruf tebal (bold) serta textnya akan berada di tengah (center),  lalu saya buat skrip sederhana dibawah ini :

lalu saya simpan dengan nama semisal tag_th_tabel.html, lalu saya buka di browser :

hasilnya terlihat untuk kolom yang menggunakan tag <th> ditampilkan dengan huruf tebal (bold) serta berada di tengah (center), bagaimana mudah kan ?..

 

Tag caption di tabel HTML

Tag caption digunakan untuk memberikan judul dari tabel, sebenarnya anda bisa saja langsung menuliskan judul dari tabel dengan langsung menuliskan text yang diletakkan di atas bagian tabel, tetapi dari pihak HTML sendiri telah menyediakan pembuatan judul langsung dengan menggunakan tag caption.

Tag Caption bisa anda letakkan setelah tag tabel pembuka dan sebelum tag <tr> untuk baris pertama.

baik langsung saja kita buat skrip sederhana.

lalu saya akan simpan semisal dengan nama caption_tabel.html, lalu saya buka di browser.

terlihat tabelnya memiliki judul pada bagian atas dari tabel, jadi gimana mudahkan untuk membuat caption di dalam tabel html.

 

Tag <thead>, <tbody>, dan <tfoot> di tabel HTML

Seperti yang anda ketahui bahwa tabel biasanya digunakan untuk menampilkan data dalam bentuk tabel, nah jika tabel diperlukan untuk menampilkan data yang kompleks.

Anda pasti akan membutuhkan strukutur tabel yang mudah dipahami agar ketika merubah style tabel di css dapat lebih mudah.

Nah 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 anda menggunakan tag ini memang tidak ada yang berbeda dalam hasil tabel yang dihasilkan, tetapi jika anda menggunakan skrip css untuk merubah stylenya anda dapat terbantu dengan adanya 3 tag ini, baik langsung saja kita coba ya, kita akan buat skrip sederhana :

silahkan disimpan dengan nama semisal table_thead_tbody_tfoot.html, lalu silahkan buka di browser maka hasilnya adalah sebagai berikut :

beberapa style dari tabel, antara lain :

• Headernya berwarna merah karena di css thead kita buat background-color:red;
• Isi tabel berwarna hijau karena di css tbody kita buat background-color:green;
• Footer tabel berwarna kuning karena di css tfoot kita buat background-color:yellow;

 

Tag Colgroup dan Tag col di tabel HTML

Kedua tag ini digunakan untuk mengelompokkan kolom yang anda buat, sehingga memudahkan untuk proses set style CSS di masing – masing kolom.

Secara default jika anda ingin memberikan warna yang berbeda di masing masing kolom, pasti anda harus menuliskan style di masing – masing kolom, tetapi dengan menggunakan kedua tag ini anda dapat dengan mudah memberikan style yang berbeda di masing – masing kolom dengan hanya memberikan style di bagian tag colnya saja.

Bagaimana bingung gak ? baik kita langsung coba buat, beberapa skrip sederhana :

baik semisal kita simpan dengan nama tag_colgroup_tag_col_html.html, lalu silahkan buka di browser, hasilnya adalah seperti ini :

terlihat 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

gimana mudah kan  ? nah itu fungsi dari tag colgroup dan tag col pada tabel html, anda dapat mengatur masing – masing kolom di dengan hanya mengatur style di masing – masing tag col.

 

Attribute Rules pada Tabel HTML

Attribute Rules pada tabel digunakan untuk membuat dan mengatur garis yang ada pada di antara cell satu dengan cell lain di tabel, dalam attribute rules html memiliki 4 values antara lain :

• rows (digunakan untuk menampilkan garis pada bagian baris tabel di html)
• cols (digunakan untuk menampilkan garis pada bagian kolom tabel di html)
• all (digunakan untuk menampilkan garis pada bagian baris dan kolom tabel di html)
• none (digunakan untuk mengatur agar garis pada kolom dan tabel tidak tampil)

baik langsung saja kita coba buat skrip sederhana :

semisal nih kita simpan dengan nama attribute_rules_tabel_html.html, lalu simpan dan buka di browser.

nah hasilnya adalah seperti itu, jika anda perhatikan :

• Pada tabel pertama baris yang ditampilkan di bagian baris karena kita menggunakan values rows pada attribute rules
• Pada tabel kedua baris yang ditampilkan di bagian kolom karena kita menggunakan values cols pada attribute rules
• Pada tabel ketiga baris yang ditampilkan adalah bagian kolom dan baris karena kita menggunakan values all pada attribute rules
• Pada tabel keempat baris yang ditampilkan hanya di bagian luar tabel, karena kita menggunakan values none pada attribute rules, dan kita mengatur bordernya sehingga garisnya berada diluar tabel

 

Mengatur ukuran lebar pada bagian tabel

Secara default ukuran lebar dari tabel ditentukan dari panjang isi di dalam tabel itu sendiri, jadi lebar tabel akan menyesuaikan, tetapi dari HTML sendiri memiliki attribute yang memang digunakan untuk mengatur ukuran lebar dari tabel.

Attribute width dapat digunakan untuk mengatur ukuran lebar tabel itu sendiri, satuan yang digunakan adalah satuan pixel dan juga persen, attribute width dapat anda gunakan pada beberapa tag antara lain :

• tag table
• tag th
• tag td
• tag col

baik agar mempermudah anda dalam memahami penggunaan dari attribute width ini silahkan anda tuliskan skrip dibawah :

semisal kita simpan dengan nama width_tabel_html.html, lalu kita buka di browser maka hasilnya adalah :

nah yang terlihat adalah seperti gambar diatas, keterangannya adalah seperti berikut :

• Tabel pertama saya menggunakan attribute width di tag table dengan value 600 px maka otomatis tabel akan memiliki ukuran lebar 600 px
• Tabel kedua saya menggunakan attribute width di tag table hanya saja untuk value saya menggunakan 50% yang otomatis ukuran lebar tabel akan 50 % dari browser karena parent tabel Tersebut adalah tag body yang otomatis menyesuaikan ukuran browser
• Tabel ketiga menggunakan attribute width yang dipasang di tag th
• Tabel ketiga menggunakan attribute width yang dipasang di tag td
• Tabel keempat menggunakan attribute width yang dipasang di tag col

 

 

Mengatur Tinggi pada tabel HTML

Setelah di bagian sebelumnya kita sudah mengenal attribute width yang digunakan untuk mengatur lebar tabel di HTML, nah di tutorial kali ini kita akan membahas attribute yang digunakan untuk mengatur dari tinggi tabel HTML, berbeda dengan attribute width yang dapat digunakan di beberapa tag seperti tabel, th, td ataupun col, untuk attribute height hanya bisa digunakan di bagian tag table dan tag tr saja

Untuk satuan yang bisa anda gunakan hanyalah satuan pixel saja, anda tidak dapat menggunakan satuan persen di attribute ini.

baik langsung saja kita buat sebuah skrip sederhana agar kita bisa lebih paham :

semisal kita beri nama attribute_height_html.html, lalu kita buka di browser :

nah terlihat kita memiliki 2 tabel, keduanya kita berikan attribute height :

• tabel 1 kita berikan attribute height pada tag tabel dengan value 150px, hasilnya tabel  memiliki tinggi keseluruhan yaitu 150px
• tabel 2 kita berikan attribute height pada tag tr dengan nilai yang berbeda sehingga menyebabkan tinggi dari masing – masing baris juga berbeda.

nah bagaimana mudah kan untuk mengatur attribute height di dalam tabel html.

 

Nah sekian dulu pembahasan mengenai bagaimana cara membuat tabel di HTML serta pembahasan mengenai beberapa attribute dan tag lain yang bisa anda gunakan tabel di HTML, jika ada diskusi bisa di kolom komentar, sampai jumpa di tutorial HTML lainnya.

[stextbox id=”info”] Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]