July 2016 ~ Ilmu Dunia Komputer

Bismillahirrohmaanirrohiim

Assalamu'alaikum wr. wb

Setelah anda berkenalan dengan html, kali ini saya akan menjelaskan tentang cara membuat sebuah tabel pada HTML.
Untuk menampilkan sebuah data di web umumnya menggunakan tabel agar terlihat lebih rapi. Meskipun tidak semua data yang ditampilkan dalam bentuk tabel. Sebelum masuk ke inti pembahasan, saya akan menjelaskan terlebih dahulu tentang pengertian tabel.

Tabel¹⁾ merupakan daftar berisi ikhtisar sejumlah data informasi yang biasanya berupa bilangan atau kata-kata yang tersusun secara bersistem urut ke bawah dalam lajur dan deret tertentu dengan garis pembatas sehingga dengan mudah disimak.

Contoh Tabel

Tabel terdiri dari kolom (column) dan baris (row). lihat gambar. Gambar diatas merupakan contoh bentuk tabel. Seperti yang telah dijelaskan diatas, bahwa tabel terdiri (tersusun) dari kolom dan baris. Kolom adalah kotak yang tersusun secara vertikal (dari atas ke bawah). sedangkan baris adalah kotak yang tersusun secara mendatar (menyamping). Dari contoh tabel tersebut kita dapat mengetahui jumlah kolom dan barisnya, yaitu 3 kolom dan 4 baris. Sampai sini kira-kira sudah paham?Alhamdulillah kalau sudah paham. Kita lanjut tentang membuat tabel dengan HTML. Insya Allah.
HTML telah menyediakan tag/elemetn untuk membuat tabel, baris dan kolom. Berikut adalah contoh syntax/kode membuat tabel di HTML :

<table border="1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Penjelasan:
Pertama, kita harus menulis/mendefinisikan tag table seperti ini: <table> dan jangan lupa untuk memberi tag penutup table </table> . Gunanya untuk memberi tahu si web browser bahwa kita akan membuat tampilan dalam bentuk tabel. (kurang lebih seperti itu penjelasannya).
contoh penulisannya adalah

<table>
 <!-- Isi Tabel -->
</table>

Kedua, didalam tabel biasanya berisi baris dan kolom. Setelah sebelumnya kita telah membuat tag table, langkah selanjutnya adalah membuat baris di dalam tabel. Caranya dengan menuliskan tag <tr> dan jangan lupa untuk memberi tag penutupnya </tr>. Tag <tr> ini ditulis diantara tag table. Gunanya untuk mendefinisikan sebuah baris didalam tabel. Tag <tr> singkatan dari Table Rows (terjemahnya: baris pada tabel). Sampai pada tahap ini, kita sudah membuat sebuah baris.

<table>
 <tr>
   <!-- Isi data Tabel -->
 </tr>
</table>

Setelah tag baris didefinisikan, selanjutnya adalah membuat kolom pada tabel. Gunakan tag <td> (singkatan dari Table Data) dan jangan lupa untuk memberi tag penutupnya </td>. Selain itu, tag <td> ini juga berguna untuk mengisi data pada tabel. cara penulisannya adalah :

<table>
    <tr>
        <td>
           <!-- Isi Data -->
        </td>
    </tr>
    <tr>
        <td>
           <!-- Isi Data -->
        </td>    
    </tr>
</table>

Jika tag <td> kita isi data, misal :

<table border="1">
    <tr>
        <td>baris 1, kolom 1</td>
        <td>baris 1, kolom 2</td>
        <td>baris 1, kolom 3</td>
        <td>baris 1, kolom 4</td>
    </tr>
    <tr>
        <td>baris 2, kolom 1</td>
        <td>baris 2, kolom 2</td>
        <td>baris 2, kolom 3</td>
        <td>baris 2, kolom 4</td>
    </tr>
    <tr>
        <td>baris 3, kolom 1</td>
        <td>baris 3, kolom 2</td>
        <td>baris 3, kolom 3</td>
        <td>baris 3, kolom 4</td>
    </tr>
    <tr>
        <td>baris 4, kolom 1</td>
        <td>baris 4, kolom 2</td>
        <td>baris 4, kolom 3</td>
        <td>baris 4, kolom 4</td>
    </tr>
</table>

Maka tampilan hasilnya akan seperti berikut :

Alhamdulillah, pembahasan tentang membuat tabel sudah selesai. Jika ada penjelasan yang masih kurang jelas, silahkan masukkan pertanyaan di komentar. Insya Allah, saya akan menjawab pertanyaan yang ringan saja.

Wassalamu'alaikum wr.wb

sumber:

Contoh Tabel

<table border="1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<table>
 <!-- Isi Tabel -->
</table>

<table>
 <tr>
   <!-- Isi data Tabel -->
 </tr>
</table>

<table>
    <tr>
        <td>
           <!-- Isi Data -->
        </td>
    </tr>
    <tr>
        <td>
           <!-- Isi Data -->
        </td>    
    </tr>
</table>

Jika tag <td> kita isi data, misal :

<table border="1">
    <tr>
        <td>baris 1, kolom 1</td>
        <td>baris 1, kolom 2</td>
        <td>baris 1, kolom 3</td>
        <td>baris 1, kolom 4</td>
    </tr>
    <tr>
        <td>baris 2, kolom 1</td>
        <td>baris 2, kolom 2</td>
        <td>baris 2, kolom 3</td>
        <td>baris 2, kolom 4</td>
    </tr>
    <tr>
        <td>baris 3, kolom 1</td>
        <td>baris 3, kolom 2</td>
        <td>baris 3, kolom 3</td>
        <td>baris 3, kolom 4</td>
    </tr>
    <tr>
        <td>baris 4, kolom 1</td>
        <td>baris 4, kolom 2</td>
        <td>baris 4, kolom 3</td>
        <td>baris 4, kolom 4</td>
    </tr>
</table>

Maka tampilan hasilnya akan seperti berikut :

Contoh Tabel

<table border="1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<table>
 <!-- Isi Tabel -->
</table>

<table>
 <tr>
   <!-- Isi data Tabel -->
 </tr>
</table>

<table>
    <tr>
        <td>
           <!-- Isi Data -->
        </td>
    </tr>
    <tr>
        <td>
           <!-- Isi Data -->
        </td>    
    </tr>
</table>

Jika tag <td> kita isi data, misal :

<table border="1">
    <tr>
        <td>baris 1, kolom 1</td>
        <td>baris 1, kolom 2</td>
        <td>baris 1, kolom 3</td>
        <td>baris 1, kolom 4</td>
    </tr>
    <tr>
        <td>baris 2, kolom 1</td>
        <td>baris 2, kolom 2</td>
        <td>baris 2, kolom 3</td>
        <td>baris 2, kolom 4</td>
    </tr>
    <tr>
        <td>baris 3, kolom 1</td>
        <td>baris 3, kolom 2</td>
        <td>baris 3, kolom 3</td>
        <td>baris 3, kolom 4</td>
    </tr>
    <tr>
        <td>baris 4, kolom 1</td>
        <td>baris 4, kolom 2</td>
        <td>baris 4, kolom 3</td>
        <td>baris 4, kolom 4</td>
    </tr>
</table>

Maka tampilan hasilnya akan seperti berikut :

Ilmu Dunia Komputer

Membuat tabel pada HTML