Search This Blog

Sunday 9 October 2016

Membuat table dengan HTML


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.