Mata Pelajaran : Pemrograman Web Kelas : X Jurusan : TKJ/RPL

1. FORMAT TABEL
HALAMAN WEB
Surya R. Labetubun
SMK Kartika XX-1 Makassar

2. APA YANG AKAN DIPELAJARI
• Anatomi tabel Minimal
• Tabel dengan Spanning
• Tabel di dalam Tabel
• Desain Halaman Web dengan Konsep
Tabel

3. ANATOMI TABEL MINIMAL
Untuk membuat table yang sederhana ada
3 elemen utama yaitu:
- Table head <THEAD> yakni kepala tabel
yang biasa disebut HEADER.
- Table foor <TFOOT> yakni kaki tabel
yang biasa disebut FOOTER
- Table body section <TBODY elements>
adalah bagian badan atau isi tabel

4. Tag <table> adalah untuk
membuat tabel kemudian diikuti
dengan tag <tr> yakni table rows,
yang digunakan untuk membuat
baris pada tabel. Kemudian
dilanjutkan dengan tag <td> atau
table data untuk membuat kolom
pada tabel.

5. Kolom-kolom hasil dari <tr>
dan <td> ini disebut dengan
table cell, merupakan sebagai
lokasi dimana kita memasukkan
data-data yang akan di tampilkan.

6. Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.
<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>

7. Mengatur LEBAR dan TINGGI tabel
Berikut adalah contoh tabel dengan lebar
75% dari lebar dokumen dan lebar kolom
masing 50%. Tinggi pada baris pertama
adalah 40px.
<table border="1" width="75%"
height=”80%”>
<tr>
<td width=”50%” height=”40px”>Baris 1
Kolom 1</td>
<td>Baris 1 Kolom 1</td>
</tr>

8. <tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

9. Membuat background pada tabel
Untuk membuat background
pada tabel, kita gunakan
atribut style dengan properti
background.

10. <table bgcolor=”green"
width="75%" border="1">
<tr>
<td bgcolor=”red”
width=”50”>Header Kolom 1</td>
<td bgcolor=”red”>Header
Kolom 2</td>
</tr>

11. <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>
</tr>
</table>

12. Tabel dengan Spanning
Untuk menggabungkan
kolom dalam tabel digunakan
colspan. Sedangkan untuk
menggabungkan baris
dalam tabel digunakan
rowspan.

13. COLSPAN
<table border="1" width="75%">
<tr>
<td colspan="2">Gabungan Kolom
1&amp;2 pada Baris 1</td>
</tr>
<tr>
<td width=”50%”>Baris 2 Kolom
1</td>

14. <td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

15. ROWSPAN
<table border="1"
width="75%">
<tr>
<td rowspan="2">Gabungan
Baris 1&amp;2 pada Kolom
1</td>
<td>Baris 1 Kolom 2</td>
</tr>

16. <tr>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

17. Tabel di dalam Tabel
Tabel di dalam tabel sebenarnya
adalah dua tabel atau lebih
yang digabungkan dalam satu
tabel.

18. Tabel di atas, menunjukan bahwa tabel yang
berada pada kolom 1 baris ke 2 adalah tabel
yang berada di dalam tabel.

19. <table width="75%" border="1">
<tr>
<td>Header 1</td>
<td>Header 2</td>
</tr>
<tr>
<td>
//Tempat Tabel Ke dua
<table bgcolor=”red" width="75%"
border="1">
<tr>
<td>a</td>
<td>b</td>
<td> c</td>

20. <tr>
<td>d</td>
<td>e</td>
<td> f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td> i</td>
</tr>
</table>

21. <td> Pem Web </td>
</tr>
<tr>
<td>10</td>
<td>TKJ</td>
</tr>
</table>

22. Desain Halaman Web dengan
Konsep Tabel
Penggunaan tabel sebagai layout
merupakan metode pembuatan layout
yang paling awal.
Menggunakan elemen table sebagai
layout merupakan cara yang kurang tepat,
sebab table dibuat dengan tujuan untuk
menampilkan data tabular.

23. Tabel dengan ketentuan width = “800”
dan height=”500” dan border = “1”

24. Tabel : Lebar=”800”
Header : tinggi =”200”
Content : lebar tabel
dibagi menjadi 3

25. Tabel : Lebar=”800”
Header : tinggi =”200”
Sidebar : lebar=”200”
tinggi=”300”
Content 1 : lebar=”600”
tinggi=”200”
Content 2 & 3 : lebar =
“300” tinggi=”100”