Untuk membuat sebuah tabeldengan HTML dapat dilakukan dengan menggunakan sebuah <tag> yaitu
<table>. Tag ini merupakan sebuah tag yang memang fungsinya khusus untuk digunakan dalam
pembuatan tabel, jelas nama tagnya pun tag <table> sudah pasti fungsinya
untuk membuat tabel. Banyak sekali efek
yang dapat diterapkan pada tag <table> ini, sama seperti banyak perintah
lain dalam HTML yang dapat dberi efek seperti warna, bentuk, dan hal lainnya
sesuai denngan keinginan/kebutuhan. Namun yang ingin dijelaskan oleh penulis
dalam hal ini ialah untuk masalah judul,
baris dan kolom dari tabel tersebut. Perhatikan, sesuaikan dan pahami
antara contoh program dengan hasil dalam gambar d berikut:
<html>
<head>
<title>Goomilar
table</title>
</head>
<body>
<center><table border="1"
width="400px" height="700px">
<tr><td>
<center>
<h1><font
color="brown">Membuat top heading table dengan
HTML</font></h1>
<table
border="1" width="300px" height="200px">
<tr>
<th>menu1</th>
<th>menu2</th>
<th>menu3</th>
<th>menu4</th>
<th>menu5</th>
</tr>
<tr>
<td>isi1.a</td>
<td>isi2.a</td>
<td>isi3.a</td>
<td
colspan="2"><center>isi4-5.a</center></td>
</tr>
<tr>
<td>isi1.b</td>
<td>isi2.b</td>
<td>isi3.b</td>
<td>isi4.b</td>
<td>isi5.b</td>
</tr>
<tr>
<td
rowspan="2">isi1.c-d</td>
<td>isi2.c</td>
<td>isi3.c</td>
<td>isi4.c</td>
<td>isi5.c</td>
</tr>
<tr>
<td>isi2.d</td>
<td>isi3.d</td>
<td>isi4.d</td>
<td>isi5.d</td>
</tr>
</table><br/><br/>
<h1><font
color="orange">Membuat left heading table dengan
HTML</font></h1>
<table
border="1" width="300px" height="200px">
<tr>
<th>menu1</th>
<td>isi1.a</td>
<td>isi1.b</td>
<td>isi1.c</td>
<td
colspan="2"><center>isi1.d-e</center></td>
</tr>
<tr>
<th>menu2</th>
<td>isi2.a</td>
<td>isi2.b</td>
<td>isi2.c</td>
<td>isi2.d</td>
<td>isi2.e</td>
</tr>
<tr>
<th>menu3</th>
<td
rowspan="2">isi3-4.a</td>
<td>isi3.b</td>
<td>isi3.c</td>
<td>isi3.d</td>
<td>isi3.e</td>
</tr>
<tr>
<th>menu4</th>
<td>isi4.b</td>
<td>isi4.c</td>
<td>isi4.d</td>
<td>isi4.e</td>
</tr>
<tr>
<th>menu5</th>
<td>isi4.a</td>
<td>isi4.b</td>
<td>isi4.c</td>
<td>isi4.d</td>
<td>isi4.e</td>
</tr>
</table>
</center>
</td></tr></table>
</center>
</body>
</html>
Dalam gambar tersebut kita dapat melihat dua buah tabel yang
mana pada kedua tabel tersebut terdapat tulisan menu 1, menu2 dan seterusnya,
yang mana tulisan tersebut memiliki efek bold atau dengan kata lain terdapat efek tulisan tebal
yang diterapkan. Namun yang perlu diketahui disini ialah pada tulisan tersebut
tidaklah diberi efek bold manual dengan tag <b>, namun efek tersebut
dihasilkan dari tag <th> yang mana <th>
tersebut bias diartikan sebagai table heading / judul dari setiap baris dan kolom yang terdapat
didalamnya. Mengapa diberi efek bold? ya karena jika antara judul dengan isinya
sama saja maka untuk apa adanya judul dengan isi, sudah saja isi semua, karena
tidak mempengaruhi apapun didalamnya, untuk itu maka efek bold tersebut
ditujukan untuk pembeda antara judul dengan isi.
Selain tag <th>sebagai judul dari setiap isi tabel tersebut, ada juga tag <tr> yang gunanya ialah untuk
membuat baris pada tabel tersebut dan tag <td>
sebagai kolomnya. Sebagai contoh, pada saat ingin membuat sebuah tabel
dengan sebuah baris dan 3 kolom didalamnya, maka Anda dapat menuliskan
programnya sebagai berikut:
<table>
<tr>
<td>kolom satu</td>
<td>kolom dua</td>
<td>kolom tiga</td>
</tr>
</table>
Namun dengan catatan, kolom tersebut diletakan didalam
baris, atau dengan kata lain tag <td> tersebut diletakan didalam tag
<tr>. Bagaimana jika ingin membuat beberapa kolom tapi tidak memiliki
baris atau membuat baris tanpa adanya kolom? Itu tidak mungkin seminimal mungkin
setiap kolom terdapat dalam satu baris ataupun sebaliknya. Dan termasuk pula
dengan tag <th>, iapun harus diletakan dalam tag <tr> karena memang
ia pun harus memiliki barisan dalam pembuatannya atau pengalokasiannya.
Satu hal yang ingin diberi tahukan oleh penulis, ya sebatas
untuk tambahan diluar topik yang dibicarakan melalui tag <html> disini
ialah mengenai table itu sendiri. Tabel html tidak hanya dapat digunakan untuk
membuat sebuah list atau data seperti pada umumnnya yang biasa dilihat di
Ms.Word atau Ms.Excel, karena pada tabel HTML ini Anda dapat membuatnya menjadi
sebuah template atau rangka sebuah
halaman HTML. Terutama untuk pemula yang duduk dikalangan sekolah biasanya
masih menggunakan tag <table> sebagai template/rangka dari halaman
htmlnya. Entah untuk generasi sekarang, penulis hanya mengambil contoh dari
generasi penulis sendiri, jujur saja pada saat penulis masih duduk di bangku
sekolah dulu, penulis hanya dapat membuat sebuah rangka dari halaman html
dengan memanfaatkan tag <table>, mengapa demikian? Karena mungkin dahulu
Guru yang mengajar penulis merasa terlalu jauh jika belajar web designing
dengan penggunaan CSS dan JavaScript. Dan memang benar yang dirasakan
penulispun seperti itu, dengan membuat sebuah halaman HTML dengan pemanfaatan
tag <table> pun terasa sulit, maklum saja untuk usia sekolah, hal seperti
itu masih dianggap sulit karena mata dibalik mata pelajaran yang begitu
banyaknya dan sebagian besar diisi dengan hafalan, maka terasa agak sulit untuk
banyak memperdalam diluar mengenai pemrograman. Dahulu penulis sekolah di SMK
dengan jurusan Teknik Komputer dan Jaringan, disana penulis sempat belajar
pemrograman dengan Visual Basic, designing dengan Photoshop, Corel Draw, HTML,
dan jaringan dengan Linux Debian dalam satu semester yang sama, belum lagi
kalau tidak salah waktu itupun mempelajari animasi dengan Macromedia Flash MX,
ditambah lagi mata pelajaran yang diluar produktif. Maka memang terlalu berat
jika murid di kelas harus mempelarai pula mengenai CSS, JavaScript dan
sebagainya, termasuk PHP dan MySQL. Namun dari pengalaman penulis dalam membuat
design web menggunakan pemanfaatan tag <table> ialah dapat mengasah
logika pula, karena bagaimana tidak, membuat design web hanya dengan penggunaan
tag <table>, baik itu untuk header, sidebar, content, footer dll. Tidak seperti
pada saat meggunakan CSS yang sudah tersedia banyak perintah yang dapat
digunakan, dengan begitu sang designer hanya perlu mencari tahu perintahnya dan
menerapkannya pada program yang ia buat. Jika hanya menggunakan tag
<table> maka harus berpikir kapan harus menggunakan colspan, rowspan
termasuk ketelaban / penggunaan garis border. Dan yang paling menantang ialah
bagaimana membuat tampilannya menarik dengan tag sederhana tersebut.
Namun ya kembali lagi, sebaik apapun pembuatan halaman web
dengan hanya menggunakan tag <table> tidak akan dapat lebih baik/efektif
jika dibandingkan dengan penggunaan style dari css. Tetapi penulis mengakui,
pembuatan design dengan hanya bermodalkan tag <table> tersebut sungguh seru
dan menantang, walau hasilnya memang tidak seberapa dan mendominasikan tidak
laku dijual, tetapi program itu cukup menantang dan menguji logika pemrograman.
Entah pendapat yang lain seperti apa, karena penulis dapat berkata seperti ini
karena memang memiliki hobi dalam bidang web, baik itu designing maupun
programming. Karena ya kembali lagi pada diri masing-masing, jika memang tidak
hobi, maka semua itu akan terasa biasa saja, lain halnya dengan hobi, sebagaimanapun yang ia lakukan dengan
adanya rintangan yang dialami, maka semua itu akan dirasa happy untuk dijalani.
Bahkan dulu, penulis gemar sekali membuat sebuah blog, ganti-ganti blog untuk
menuliskan apapun yang ingin penulis tuliskan, tetapi ya tidak sembarangan
pulla yang ditulisnya. Dulu penulis sering sekali membuat artikel dan video
tutorial yang diupload ke blog dengan berisikan materi sekolah yang didapat
oleh penulis pribadi. Tetapi sekarang blog tersebut sudah penulis hapus karena
saat itu penulis merasa kurang srek dengan design webnya. Ya memang sangat
sederhana kreasi penulis saat itu, hanya membuat rangka dengan pemanfaatan tag
<table> tadi, dan memang hanya design seperti itu yang dapat penulis buat
saat itu. Dan sekarang penulis menyesali akan penghapusan blog tersebut, karena
sangat banyak ilmu yang tidak disangka sangat bermanfaat. Penulis dulu
menyangka apa yang penulis tulis di blog tersebut hanya akan bermanfaat untuk
anak IT dikalangan sekolah saja, namun ternyata sekarang-sekarang penulis
sering kali mencari materi seperti yang pernah penulisbuat tersebut dan
nyatanya sulit untuk mendapatkan yang sesuai dengan keinginan. Seperti pembuatan
animasi, konfgurasi jaringan dll, itu ternyata cukup penting, karena penulis
kini sudah tidak lagi mempelajari akan hal tersebut.
No comments:
Post a Comment