Materi Kelas = XI
Semester = Ganjil
Standar Kompetensi :
Menggunakan homepage untuk keperluan informasi dan komunikasi

Kompetensi Dasar :
Membuat homepage sederhana dengan Tabel HTML

Rencana Pelaksanaan Pembelajaran (RPP) :
Untuk RPP, dapat diunduh di sini

TABEL merupakan salah satu elemen penting dalam pembuatan web sederhana menggunakan HTML, beberapa manfaat dari tabel dalam web adalah :

1. Untuk mengelola (maintance) elemen-elemen dalam website
2. Untuk menambah kreativitas desain halaman web
3. Untuk memisahkan dan mengorganisasikan style format yang berbeda-beda

Tabel dalam HTM dinyatakan dengan tag <TABLE>...</TABLE>
adapun elemen yang ada dalam tabel adalah :
1. <TR> digunakan untuk membuat danmenentukan jumlah baris
2. <TD> digunakan untuk membuat dan menentukan jumlah kolom atau sel

Attribut
attribut yang terdapat dalam tabel diantaranya :

• BORDER: untuk menentukan tebal border
• WIDTH: untuk menentukan lebar tabel
• ALIGN : untuk membuat perataan tabel
• COLSPAN : untuk melakukan merger sel dalam tabel
  
• ROWSPAN: untuk melakukan merger baris dalam tabel
• BGCOLOR: untuk menentukan warna bakground tabel
  

contoh tag HTML untuk tabel 3 baris 2 kolom :



Outputnya terlihat seperti tabel di bawah ini :



Untuk menggabungkan sel, maka kita harus menggunakan COLSPAN (menggabungkan sel baris) dan ROWSPAN (menggabungkan sel kolom), misalnya tabel di atas, akan kita merger antara baris 1 kolom 1 dengan baris 1 kolom 2, maka kode HTML menjadi :



Fungsi dari atribut colspan=2 adalah untuk menggabungkan sel kolom sebanyak 2 sel, nilai 2 (dua) dapat digantikan dengan jumlah sel kolom yang akan dimerger, oleh karenanya sel dibawahnya harus dihapus atau dihilangkan karena telah dimerger dengan sel sebelumnya.
Maka output dari kode HTMl di atas, adalah seperti gambar di bawah ini :

Sedangkan untuk menggabungkan baris 2 dan baris 3 kolom 1, digunakan attribut rowspan=2, sehingga kode HTMLnya menjadi :



dan hasil outputnya menjadi seperti gambar di bawah ini :

Tag HTML berikut adalah contoh tag HTML yang telah menggunakan penggabungan sel, baik sel kolom maupun baris, dengan penambahan warna sel, perataan teks dalam sel serta penambahan gambar pada sel :



output dari tag tabel di atas adalah seperti gambar di bawah ini :

Gb. Tabel akhir

TABEL CSS

Selain menggunakan tag TABLE, pembuatan tabel juga dapat dilakukan menggunakan CSS, berikut adalah script CSS untuk membuat tabel sederhana :



output dari script di atas tampak seperti gambar tabel di bawah ini :


Untuk latihan : Modifikasilah tabel CSS di atas seperti tabel di Gb. Tabel Akhir, dengan menggunakan penggabungan sel, dan input image atau gambar.