Haikal PG - XI RPL1 - PWPB Sesi 5

Assalamualaikum Warahmatullahi Wabarokatuh

Kembali dengan materi tag tag HTML. Pada kali ini kita akan fokus pada cara pembuatan tabel. Di tabel juga kita bisa menambahkan atribut yang diinginkan. Macam-macam atribut yang bisa digunakan diantaranya  ada atribut yang dipasang didalam tag table dan di tr ataupun td, di tabel ada tag, height untuk mengatur tinggi, width untuk mengatur lebar, color untuk menambahka warna, cellspacing untuk jarak spasi antar sel, cellpadding untuk jarak didalam tabel. ,bgcolor untuk warna background dan align untuk mengatur posisi. Untuk lebih memahami kita masuk ke tutorial kali ini :

12.Tabel1

HTML juga bisa membuat sebuah tabel dengan menggunakan tag <table> </table>. Dan didalamnya juga harus ditambahkan lagi tag <tr> </tr> untuk menambahkan tabel row/baris dan tag <td> </td> untuk menambahkan tabel colom/kolom. Untuk lebih jelas lihat gambar ini :

Contoh Code Tabel

Juga kita bisa menambahkan attribut seperti height, width cellspacing, cellpadding dll.

13.Tabel2 dan Tabel lanjutan

Contoh Tabel

Kita juga bisa me-merge / menyatukan kolom atau baris seperti contoh diatas. Dengan menggunakan atributt rowspan dan colspan. Rowspan untuk me-merge baris sedangkan colspan untuk merge kolom. Untuk lebih jelas lihat code ini:

Contoh Code Table.

14.Tabel (LatTabel14)

Study Kasus Dan Mengamati Tabel.

Sekarang kita akan membuat code tabel berdsarkan gambar diatas. Contoh codenya :

Study Kasus Tabel.

15.Tabel (LatTabel15)

Ubah Tampilan

Lalu kita coba ubah tampilan tabel yang ke 14 menjadi seperti gambar diatas. Contoh codenya :

Contoh Code.

16.Tabel (LatTabel16)

Tampilan Tabel.

Kita akan membuat tabel yang sedikit lebih kompleks. Dengan menambahkan warna juga sebuah tanda ceklis.Contoh codenya:  Contoh Code

17.Tabel (TabelTanah1)

Tabel Tanah.

Kita coba lagi membuat sebuah tabel seperti diatas. Codenya :

Code

18.Tabel (TabelTanah2)

Tabel Tanah.

Kita coba buat lagi dengan tampilan tabel seperti diatas dengan code :

Code

19.Tabel (tabelBenua1)

Tabel.

Codenya : Code

20.Tabel (tabelBenua2)

Tabel

Codenya : 

Code

21.Tabel (tabelBuah)

Tabel.

Codenya : 

Code.

Mungkin sekian pada sesi kali ini. Wassalamualaikum Warrahmatullahi Wabarokatuh