Cara Membuat Tabel Dan Form

Salah satu kelebihan pada HTML adalah membuat Tabel. Biasanya tabel sendiri digunakan untuk mengelompokkan berbagai data yang nantinya bisa diolah menjadi informasi dalam bentuk sajian data berdasarkan field.

Sedangkan Form sendiri bisa digunakan untuk mengelompokkan sebuah tabel tertentu yang biasa digunakan untuk melakukan submit data saat registrasi di website. Dengan mengelompokkan tabel submit data, maka seluruh kolom dan field yang disajikan akan disimpan berdasarkan pemanggilan data tertentu. Hanya saja dalam postingan kali ini kita tidak akan membahas lebih dalam tentang proses data menggunakan tag Form.

Membuat Tabel Sederhana

Untuk membuat sebuah tabel, kita akan menggunakan tag <table> dan ditutup dengan tag </table> sebagai tag pengdientifikasi bahwa dokumen yang disajikan adalah berupa tabel.

Namun sayangnya jika menggunakan tag tabel saja, halaman web browser tak akan menampilkan apapun layaknya tabel. Untuk melengkapinya, kita menggunakan tag <tr>...</tr> dan <td>...</td>.

Tag <tr>...</tr> digunakan untuk mengkelompokkan objek row atau baris. Artinya, apapun objek yang ada di dalam tag tersebut akan tercetak berjajar vertikal.

Sedangkan tag <td>...</td> digunakan untuk membuat kolom (field). Artinya apapun objek yang berada di antara tag tersebut akan tercetak berurutan secara horizontal.

Untuk penulisan tag Tabel sendiri. Kamu bisa menuliskan script seperti di bawah ini pada notepad atau text editor kesayangan kamu. Ingat, jangan sampai terbalik ya.

<table border="1">
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
    <td>Kolom 3</td>
  </tr>
  <tr>
    <td>ISI 1</td>
    <td>ISI 2</td>
    <td>ISI 3</td>
  </tr>
</table>

Jika sudah, silahkan jalankan pada aplikasi web browser. Maka tampilannya akan seperti pada gambar di bawah ini :

Memuat Form dengan Kombinasi Tabel

Setelah kita sudah bisa membuat halaman tabel. Maka saatnya kita mencoba mengkombinasikan dokumen tabel dengan tag form sehingga dapat digunakan untuk memuat layout form.

Untuk memuat Form sendiri, kita bisa menggunakan tag <form>...</form>. Nah, biar gampang, kita langsung saja ke simulasi kombinasi dua tag ini. Silahkan tuliskan script di bawah ini di Notepad.

<form action="" method="">
 <table border="1">
   <h1>FORMULIR DAFTAR</h1>
     <tr>
         <td> Nama : </td>
         <td><input type="text" /></td>
     </tr>
     <tr>
         <td> Password : </td>
         <td><input type="password" /></td>
     </tr>
     <tr>
         <td> Email : </td>
         <td><input type="text" /></td>
     </tr>
     <tr>
         <td><input type="submit" value="Submit"/></td>
     </tr>
 </table>
 </form>

Jika sudah, silahkan simpan dan jalankan dengan aplikasi Mozilla Firefox atau browser kesayangan kamu. Maka hasilnya akan seperti pada gambar di bawah ini :

• Tweet
• Share
• Share
• Share
• Share

About Badri Zaki

hi saya Badri Zaki &, saya seorang Web Developer. Saya suka belajar semua yang berhubungan dengan Coding.

Related Post