Workshop HTML STT-NF
Workshop 1
Table
1.1 Konsep Dasar Table
Buatlah file latihan_tabel.html dengan kode program berikut :
1 <html>
2 <head>
3 <title> latihan tabel </title>
4 </head>
5 <body>
6 <h3 align="center">Daftar menu makanan</h3>
7 <h4 align="center">" Warung nasi barokah "</h4>
8 <table>
9 <thead>
10 <th>Jenis</th>
11 <th>Menu</th>
12 <th>Harga</th>
13 </thead>
14 <tbody>
15 <tr>
16 <td>makanan</td>
17 <td>sop iga</td>
18 <td>rp. 15.000</td>
19 </tr>
20 <tr>
21 <td>makanan</td>
22 <td>nasi goreng special</td>
23 <td>rp. 15.000</td>
24 </tr>
25 <tr>
26 <td>minuman</td>
27 <td>sop buah special</td>
28 <td>rp. 15.000</td>
29 </tr>
30 <tr>
31 <td>minuman</td>
32 <td>aneka juice</td>
33 <td>rp. 10.000</td>
34 </tr>
35 </tbody>
36 </table>
37 </body>
38 </html>
Buka browser favorit anda, lalu buka file latihan_tabel.html tersebut, perhatikan tampilan
table pada halaman web anda.
1 [Link]
Workshop HTML STT-NF
1.2 Table and Properties
Pada tag pembuka table dan thead masukkan attribute-attribute dan valuenya dengan kode
program sebagai berikut :
<table border="1" align="center" cellpadding="10" cellspacing="5"
width="500" height="300">
<thead bgcolor="gray">
1.3 Merge Cells
Di dalam tabel ada kemungkinan beberapa cell digabung menjadi satu, untuk
menggabungkan cell kolom disebut dengan colspan sedang untuk menggabungkan cell baris
disebut dengan rowspan. Gabungkanlah beberapa cell dari tabel di atas, seperti tampak gambar
di bawah ini :
Lakukan langkah-langkah sebagai berikut untuk menggabungkan beberapa cell seperti
gambar tabel di atas :
1. Pengeditan difokuskan pada area tag TBODY
2. Hapuslah tag pembuka dan penutup TD serta kontennya yang berkontenkan “MAKANAN” pada
baris 21 atau pada baris menu “Nasi Goreng Special”
3. Pada tag pembuka TD yang berkontenkan “MAKANAN” pada baris 16 atau pada baris menu “Sop
Iga”, tambahkan attribute dan value dengan kode program sebagai berikut :
<td rowspan="2" align="center">makanan</td>
4. Hapuslah tag pembuka dan penutup TD serta kontennya yang berkontenkan “MINUMAN” pada
baris 31 atau pada baris menu “Aneka Juice”
5. Pada tag pembuka TD yang berkontenkan “MINUMAN” pada baris 27 atau pada baris menu “Sop
Buah Special”, tambahkan attribute dan value dengan kode program sebagai berikut :
<td rowspan="2" align="center">minuman</td>
6. Hapuslah tag pembuka dan penutup TD serta kontennya yang berkontenkan “RP. 15.000” pada
baris 23 dan baris 28 atau pada baris menu “Nasi Goreng Special” dan “Sop Buah Special”
2 [Link]
Workshop HTML STT-NF
7. Pada tag pembuka TD yang berkontenkan “Rp. 15.000” pada baris 18 atau pada baris menu “Sop
Iga”, tambahkan attribute dan value dengan kode program sebagai berikut :
<td rowspan="3" align="right">rp. 15.000</td>
8. Tambahkan tabel footer / TFOOT setelah penutup tag TBODY dengan kode program sebagai
berikut :
<tfoot>
<th bgcolor="gray" colspan="3">semoga anda puas</th>
</tfoot>
Buka kembali browser favorit anda, lalu buka file latihan_tabel.html tersebut, perhatikan
tampilan baru table pada halaman web anda.
1.4 Tugas Mandiri1
Buatlah file jadwal_kuliah.html seperti tampak gambar di bawah ini :
Kirim ke email asdos masing-masing dengan nama file:
tugas_tabel_kelas_nim_nama_lengkap.html
Contoh: tugas_tabel_TIO1_123456_Budi_Santoso.html
Dead Line: 1 pekan setelah materi pembelajaran
3 [Link]
4 [Link]