Web Programming

Di Ajukan Untuk Memenuhi Tugas

Mata Kuliah
“Pemograman Web II”

Dosen Pengampu :
Abu Walad, S.T., M.T.

h :
e
n Ol n da
Susu A lma
Di Yuli
a
a
Git
 TABLE/TABEL
Merupakan struktur yang digunakan untuk menampilkan informasi dalam
bentuk baris dan kolom.
Pada HTML pembuatan tabel menggunakan tag <table>, untuk membuat baris
<tr> dan untuk membuat kolom menggunakan <td>

<table> <tr>
Sebagai tag pembuka Untuk membuat
baris <td></td> Untuk
dan penutup table membuat cell
</table> </tr> atau kolom
1. Tabel Dasar
Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan
td. Seperti yang sudah di jelaskan di slide sebelumnya.
 Tag <table> untuk membuat tabel
Tag <tr> (table rows) untuk membuat baris
Tag <td> (table data) untuk membuat kolom pada tabel
kolom-kolom hasil dari tr dan td ini disebut dengan table cell sebagai lokasi
dimana kita memasukan data-data yang akan di tampilkan.
Langkah – langkah untuk memulai membuat table yang terdiri dari 3 baris dan 2
kolom dalam HTML sebagai berikut :
1. Buka notepad++ sebagai editor form HTML.
2. Buat skrip sederhana seperti di bawah ini di notepad++ :
3. Simpan tabel yang telah dibuat dengan menggunakan ekstensi .html
- Path directory : …./tabeldasar.html
- Save as type : All types (*.*)
4. Untuk melihat hasil dari form text HTML yang telah dibuat, buka form
tersebut menggunakan web browser. Dengan klick Run – Launch in IE.
2. Mengatur Lebar & Tinggi Tabel
Untuk mengatur lebar dan tinggi table digunakan atribut width atau bisa juga
dengan style CSS dengan property width.
Untuk pembuatan table, lebar dan tinggi kita gunakan atribut style dengan
property width dengan height.
Contoh : Table dengan lebar 75% dari lebar dokumen dan lebar kolom masing-
masing 50% dengan tinggi pada pada baris pertama adalah 40px.
Untuk melihat hasil dari dokumen username HTML yang telah dibuat, buka
dokumen tersebut menggunakan web browser. Dengan klick Run – Launch in IE.
3. Menggabungkan Kolom Pada Tabel
Table cell atau baris dan kolom dari table tersebut dapat kita gabungkan sesuai
kebutuhan bentuk table yang diinginkan.
Untuk menggabungkan kolom dalam table digunakan atribut colspan.
Untuk melihat hasil dari dokumen username HTML yang telah dibuat, buka
dokumen tersebut menggunakan web browser. Dengan klick Run – Launch in IE.
4. Mengatur Jarak Kolom Pada Tabel
Untuk mengatur posisi cell dalam table digunakan atribut cellpadding
dan cellspacing. Cellpadding adalah untuk pengaturan sisi dari bagian
dalam cell.
Contoh penulisannya :
Untuk melihat hasil dari dokumen username HTML yang telah dibuat,
buka dokumen tersebut menggunakan web browser. Dengan klick Run –
Launch in IE.

Sedangkan cellspacing adalah pengaturan sisi dari bagian luar cell.

Untuk melihat hasil dari dokumen username HTML yang telah dibuat,
buka dokumen tersebut menggunakan web browser. Dengan klick Run –
Launch in IE.
5. Membuat Titel Pada Tabel
Untuk table yang lengkap dengan titel, kita bisa menambahkan tag <caption>
tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table
heading) sebagai titel dari baris maupun kolom.
caption dan th akan secara otomatis berada pada posisi tengah dan th akan
menghasilkan tulisan tebal.
Untuk melihat hasil dari dokumen username HTML yang telah dibuat,
buka dokumen tersebut menggunakan web browser. Dengan klick Run –
Launch in IE.
6. Membuat Background Pada Tabel
Untuk membuat background pada table kita gunakan atribut style dengan
property background.
Berikut adalah contoh table dengan background warna kuning muda dengan
heading warna merah.
Untuk melihat hasil dari dokumen username HTML yang telah dibuat,
buka dokumen tersebut menggunakan web browser. Dengan klick Run –
Launch in IE.
Terimakasih