MODUL 5 BEKERJA DENGAN TABLE

Pada modul ini, Praktikan akan mengetahui dan memahami tentang fungsi dan cara menggunakan fitur TABLE pada HTML untuk berbagai penggunaan.

TABLE merupakan salah satu kemampuan HTML dalam menampilkan konten webberformat tabel (baris dan kolom). Fitur ini juga banyak digunakan untuk membagi atau memisahkan antara satu konten dengan konten lainnya dalam sebuah halaman web. Perhatikan contoh tabel berikut :

No. Nama No. HP Email
       
1 Doni 08127383938  
       
2 Daffa 08129292344  
       
3 Dzaky 08128292231  
       

Berikut ini tag-tag yang digunakan dalam pembuatan table :

  • Tag <table>, ini menandakan awal membuat tabel dan pastikan ditutup dengan </table>
  • Tag <tr> digunakan untuk membuat baris dalam tabel dan pastikan ditutup dengan </tr>
  • Tag <th>. Digunakan untuk membuat judul tabel dan pastikan ditutup dengan </th>
  • Tag <td>. Digunakan untuk mengisi data tabel dan pastikan ditutup dengan </th>

Sebelum standar CSS diimplementasikan ke dalam semua browser, kebanyakan programmer dan desainer web menggunakan tabel untuk mengatur tampilan web.Membuat menu pada posisi atas dan sisi kanan web bisa diakali dengan menjadikan halaman web sebagai sebuah tabel yang besar. Hal ini sebenarnya tidak salah, namun akan membuat pengkodean HTML menjadi rumit. Saat ini anda masih bisa menggunakan ide tersebut, namun sangat disarankan menggunakan CSS untuk mengatur tampilan halaman web.

Untuk dapat melihat gambaran penggunaannya, silahkan Anda coba kode berikut :

1.    Latihan 1 : Atribut Border

2.   Latihan 2 : Tabel 1 kolom, dan 2 baris

3.   Latihan 3 :  Tabel 2 kolom dan 1 baris

4.   Latihan 4 : Tabel dengan garis berwarna

5.   Latihan 5 : Tabel dengan warna latar belakang

6.   Latihan 6 : Tabel dengan judul

7.   Latihan 7: Tabel dengan caption

8.   Latihan 8: Tabel dengan menggabungkan 2 baris

9.   Latihan 9: Tabel dengan menggabungkan 2 kolom

10. Latihan 10: Tabel terstruktur

REFERENSI LANJUTAN :

  1. http://www.w3schools.com/html/html_tables.asp
  2. http://www.duniailkom.com