Nama : Ardi Nurdiansyah

NPM : 19402004
Kelas : SI-XW41/19

PEMROGRAMAN WEB I
TUGAS PERTEMUAN 6 “IMPLEMENTASI TABEL”

Berikut Langkah-langkah dalam Mengimplementasikan FORM

1. Pertama-tama membuka NotePad anda dengan cara Klik Windows-Ketik Notepad

2. Setelah notepad sudah tersedia lalu kita mula membuat TABEL DASAR terlebih dahulu
dengan Format Coding di notepad sebagai berikut :
<table border=”1”>
<tr><td>Cell 1 – Baris 1 Kolom 1</td>
<td>Cell 2 – Baris 1 Kolom 2</td>
</tr><tr><td>Cell 3 – Baris 2 Kolom 1</td>
<td>Cell 4 – Baris 2 Kolom 2</td></tr>
<tr><td>Cell 5 – Baris 3 Kolom 1</td>
<td>Cell 6 – Baris 3 Kolom 2 </td></tr>
</table>
 Setelah itu Save dengan Format tabeldasar.html dan Type All Type lalu klik buka
 Berikut Penulisan di NotePad dan beserta Hasilnya :
3. Kemudian Cara Mengatur Lebar & Tinggi Tabel dengan coding di notepad sebagai berikut :
<table border=”1”width=”75%”>
<tr>
<td style=”width:50%;height:40px;”>&nbspNAMA</td>
<td>&nbspALAMAT</td>
</tr>
<tr>
<td>PUDJI&nbspAGUNG</td><td>BANDUNG</td>
</tr>
<tr>
<td>HERA&nbspRIZKIA</td><td>CIWIDEY</td>
</tr>
</table>
 Berikut Penulisan di NotePad dan beserta Hasilnya :
4. Kemudian Cara Menggabungkan Kolom dalam Tabel dengan coding di notepad sebagai
berikut :
- Atribut Colspan
<table border=”1”width=”75%”>
<tr><td colspan=”2”>IDENTITAS MAHASISWA</td></tr>
<tr><td style=”width:50%”>AGUNG</td>
<td>JAKARTA</td></tr>
<tr><td>SUEB</td> <td>SURABAYA</td>
</tr></table>
- Atribut Rowspan
<table border=”1”>
<tr>
<td rowspan="2">ini baris ke 1 dan 2, kolom ke 1</td>
<td>baris 1, kolom 2</td>
<td>baris 1, kolom 3</td>
</tr>
<tr>
<td>baris 2, kolom 2</td>
<td>baris 2, kolom 3</td>
</tr>
<tr>
<td>baris 3, kolom 1</td>
<td>baris 3, kolom 2</td>
<td rowspan="2">ini baris ke 3, kolom ke 2 dan 3</td>
</tr>
<tr>
<td>baris 4, kolom 1</td>
<td>baris 4, kolom 2</td>
</tr>
</table>
 Berikut Penulisan di NotePad dan beserta Hasilnya :
- Colspan
 - Rowspan

5. Kemudian Cara Mengatur Jarak Kolom dengan coding di notepad sebagai berikut :
<table border=”1”width=”75%”cellpadding=”8”>
<tr>
<td style=”width:50%;”>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
 Berikut Penulisan di NotePad dan beserta Hasilnya :

6. Kemudian Membuat TITLE PADA TABEL dengan coding di notepad sebagai berikut :
<table border=”1”width=”75%”>
<caption>DISINI ADALAH TITEL TABEL INI</caption>
<tr>
<th style=”width:50%;”>Header Kolom 1</th><th>Header Kolom 2</th></tr><tr>
<td>Baris 1 Kolom 1</td><td>Baris 1 Kolom 2</td></tr>
<tr><td>Baris 2 Kolom 1</td><td>Baris 2 Kolom 2</td>
</t

</table>
  Berikut Penulisan di NotePad
dan beserta Hasilnya :

7. Kemudian Membuat Background Tabel dengan coding di notepad sebagai berikut :

<table border="1" Cellpadding="5"><tr bgcolor="yellow">
<th style=”width:50%;”>NAMA</th><th>ALAMAT</th></tr><tr>
<td bgcolor="green">HERA RIZKIA</td>
<td bgcolor="orange">CIWIDEY</td>
</tr>
<tr>
<td bgcolor="red">PUDJI AGUNG</td>
<td bgcolor="blue">BANDUNG</td>
</tr>
</table>

 Berikut Penulisan di NotePad dan beserta Hasilnya :

 BERIKUT SEMUA HASIL DARI IMPLEMENTASI TABEL