Tutorial HTML kali ini akan membahas mengenai pembuatan tabel. Pembuatan tabel agak sedikit membingungkan tapi saya akan mengajarkannya secara bertahap agar proses pembelajaran pembuatan tabel ini menjadi lebih mudah. Tabel juga merupakan suatu hal mutlak untuk dipelajari karena kita akan menjumpai banyak halaman website yang memuat tabel data bahkan ada sebagian orang memanfaatkan table sebagai kerangka pembuatan template halaman website.
Saya akan coba terangkan dengan lebih detil langkah demi langkah agar mudah dimengerti tapi tutorial ini akan menjadi sangat panjang. Oleh karena itu, tutorial HTML mengenai tabel ini akan dipecah menjadi 3 bagian karena cara penggunaan table agak berbelit dan sedikit susah dipelajari. Semoga tutorial tabel HTML ini akan menjadi lebih mudah untuk Anda pelajari.
Tutorial HTML – Tabel(Dasar) – Bagian 14-1 (Bahasa Indonesia)
Pada pembuatan tabel, kita menggunakan gabungan dari beberapa tag untuk membuat sebuah tabel, contohnya: table, tbody, thead, tfoot, tr, th dan td. Pertama-tama kita akan mempelajari cara pembuatan tabel secara sederhana. Saya akan mengajarkan tabel paling sederhana terlebih dahulu. Pada tabel yang paling sederhana kita akan menggunakan tag table, tr dan td. Kita sementara tidak akan menyentuh tag lainnya.
Tabel paling sederhana
Pada pembuatan tabel paling sederhana kita harus menggunakan 3 buah tag yang masing-masing adalah tag table, tr dan td. Mari kita lihat penjelasannya masing-masing:
- table – membentuk sebuah tabel
- tr – menentukan sebuah baris di dalam tabel
- td – isi atau data dari sebuah sel di dalam tabel
Untuk lebih jelasnya tentang penggunaan tag yang disebutkan di atas kita akan langsung melihat ke dalam contoh kode HTML berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <title>Tutorial Tabel</title> </head> <body> <h1>Tutorial Tabel</h1> <table> <tr> <td>apel</td> <td>ayam</td> <td>toge</td> </tr> </table> </body> </html> |
Silahkan perhatikan hasil tampilannya
Sekilas tabel di atas tidak terlihat seperti sebuah tabel. Tabel di atas malah terlihat seperti sebuah kalimat. Untuk lebih jelasnya saya akan tambahkan semua atribut border pada tag table. Berikut ini adalah kode yang saya ubah.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <title>Tutorial Tabel</title> </head> <body> <h1>Tutorial Tabel</h1> <table border="1"> <tr> <td>apel</td> <td>ayam</td> <td>toge</td> </tr> </table> </body> </html> |
Silahkan perhatikan hasil tampilan sesudah penambahan border pada tabel.
Nah, sekarang akan terlihat seperti sebuah tabel. Saya yakin Anda pasti berpikir tabel ini terlalu sederhana. Ya, memang sederhana tapi ini adalah langkah awal agar Anda bisa mempelajari tabel ini dengan lebih mudah.
Penambahan baris ke dalam tabel
Saya sekarang akan menambahkan lagi baris baru ke dalam table. Perhatikan kode yang saya tambahkan.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <title>Tutorial Tabel</title> </head> <body> <h1>Tutorial Tabel</h1> <table border="1"> <tr> <td>apel</td> <td>ayam</td> <td>toge</td> </tr> <tr> <td>pisang</td> <td>sapi</td> <td>bayam</td> </tr> <tr> <td>melon</td> <td>ikan</td> <td>sawi hijau</td> </tr> </table> </body> </html> |
Pada kode di atas saya menambahkan dua baris data ke dalam tabel. Setiap baris memiliki 3 buah elemen data di dalamnya. Pada contoh di atas kita akan dengan mudah mengetahui bahwa tag tr digunakan untuk menambahkan baris ke dalam tabel dan tag td untuk menambahkan data atau sel tabel dengan suatu baris. Berikut ini adalah hasil tampilan dari kode HTML di atas:
Pada hasil screenshot di atas kita akan mengetahui bahwa tabel yang tercetak dengan 3 baris dan 3 kolom. Masing-masing sudah terisi dengan data tapi tabel tersebut terlihat tidak rapi karena lebar setiap kolom tidak sama. Kita melihat kolom yang ke-dua merupakan kolom paling sempit. Bila lebar kolom tidak diatur maka lebar kolom akan menyesuaikan dengan panjang data terpanjang di dalam kolom tersebut. Hal ini bisa kita lihat pada kolom ke 3. Kolom ke-tiga merupakan kolom terlebar karena kolom ini menyesuaikan lebarnya terhadap data terpanjang, yaitu “sawi hijau” yang terletak pada baris ke 3 dan kolom ke 3.
Pengaturan lebar kolom tabel
Lebar kolom pada tabel dapat diatur dengan menambahkan atribut width pada tag td. Namun penambahan atribut width pada tag td tidak perlu dilakukan pada setiap tag td. Atribut width pada tag td hanya perlu dilakukan sekali pada salah satu kolom. Lebar kolom tabel akan mengikuti setelah pengaturan sudah dilakukan. Mari kita simak kembali kode HTML berikut ini yang sudah diubah pengaturan lebar kolomnya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <title>Tutorial Tabel</title> </head> <body> <h1>Tutorial Tabel</h1> <table border="1"> <tr> <td width="100">apel</td> <td width="100">ayam</td> <td width="100">toge</td> </tr> <tr> <td>pisang</td> <td>sapi</td> <td>bayam</td> </tr> <tr> <td>melon</td> <td>ikan</td> <td>sawi hijau</td> </tr> </table> </body> </html> |
nilai atribut width saya berikan 100 artinya 100 pixels. Saya hanya berikan atribut pada baris pertama dan selanjutnya saya tidak berikan atribut width pada tag td baris selanjutnya. Dengan pemberian atribut width 1 kali saja sudah cukup pada sebuah kolom. Anda juga bisa memberikan atribut tag pada baris lain selain baris pertama dan hasilnya akan sama. Mari kita lihat hasil tampilan dari kode HTML di atas.
Pengaturan tinggi baris tabel
Selain lebar kolom tinggi baris juga dapat diatur. Pengaturan tinggi baris dapat dilakukan dengan cara memberikan atribut height pada tag tr atau salah satu tag td pada baris yang ingin diatur tingginya. Perhatikan contoh berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <title>Tutorial Tabel</title> </head> <body> <h1>Tutorial Tabel</h1> <table border="1"> <tr height="100"> <td width="100">apel</td> <td width="100">ayam</td> <td width="100">toge</td> </tr> <tr> <td>pisang</td> <td height="50">sapi</td> <td>bayam</td> </tr> <tr> <td>melon</td> <td>ikan</td> <td>sawi hijau</td> </tr> </table> </body> </html> |
Kemudian coba perhatikan hasil tampilan HTML berikut ini:
Setelah dibandingkan kita akan mengetahui kita bisa melakukan salah satu cara yang paling kita sukai dan hasilnya akan sama. Kita bisa memasangkan atribut height pada tag tr maupun td pada baris yang kita inginkan.
Pengaturan posisi tulisan
Penganturan posisi tulisan atau isi di dalam tabel juga dapat dilakukan pada setiap sel tabel yang kita inginkan. Pengaturan posisi tulisan dapat diatur dari dua arah, baik secara horisontal dan secara vertikal. Gunakan atribut align untuk mengatur posisi tulisan secara horisontal dan atribut valign untuk mengatur posisi tulisan secara vertikal. Perhatikan cara pengisian atribut berikut ini:
| Atribut | Nilai | Penjelasan |
|---|---|---|
| align | left | posisi tulisan kiri(rata kiri) |
| align | center | posisi tulisan tengah(antara kiri dan kanan) |
| align | right | posisi tulisan kanan(rata kanan) |
| valign | top | posisi tulisan atas |
| valign | middle | posisi tulisan tengah(antara atas dan bawah) |
| valign | bottom | posisi tulisan bawah |
Mari kita uji coba melalui kode berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<table border="1"> <tr> <th>Atribut</th> <th>Nilai</th> <th>Penjelasan</th> </tr> <tr> <td>align</td> <td>left</td> <td>posisi tulisan kiri(rata kiri)</td> </tr> <tr> <td>align</td> <td>center</td> <td>posisi tulisan tengah(antara kiri dan kanan)</td> </tr> <tr> <td>align</td> <td>right</td> <td>posisi tulisan kanan(rata kanan)</td> </tr> <tr> <td>valign</td> <td>top</td> <td>posisi tulisan atas</td> </tr> <tr> <td>valign</td> <td>middle</td> <td>posisi tulisan tengah(antara atas dan bawah)</td> </tr> <tr> <td>valign</td> <td>bottom</td> <td>posisi tulisan bawah</td> </tr> </table> |
Kode di atas akan menghasilkan tampilan seperti di bawah ini:
Setelah Anda bandingkan hasil tampilan di atas dengan kodenya, Anda akan mengetahui bawah bila Anda melakukan pengaturan melalui tag tr maka seluruh baris tersebut akan mendapatkan efek yang sama. Bila Anda mengatur pada tag td maka sel tabel yang bersangkutan yang akan mendapatkan efek pengaturan tersebut.
Ok, setelah kita testing kode selama berkali-kali di dalam tutorial ini. Kita akan mengakhiri sesi Tutorial HTML – Tabel(Dasar). Kita akan lanjutkan lagi ke Tutorial HTML – Tabel(Menengah).
Tutorial HTML – Tabel(Menengah) – Bagian 14-2 (Bahasa Indonesia)
