Dokumen ini menjelaskan tentang penggunaan tabel dalam HTML, mencakup berbagai tag dan atribut yang digunakan untuk membuat dan mengatur struktur tabel. Ada contoh penerapan tabel dengan penggabungan kolom dan baris serta beberapa latihan terkait. Informasi ini ditujukan untuk pembelajaran pemrograman web di SMK Darussalam Makassar.

1. PEMPROGRAMAN
WEB & PERANGKAT
BERGERAK
SMK Darussalam Makassar
HTML (4)
- Nurul Fajrin Alifah, S.T -

2. No Tag Fungsi
1 <table> ... </table>
membuat tabel, sebagai tanda awal dan akhir dari
tabel
2 <tr> ... </tr> membuat baris dalam tabel
3 <td> ... </td> membuat kolom (sel)
4 <th> ... </th> membuat judul kolom
5 <caption> ... </caption> membuat judul pada tabel
6 <colgroup> ... </colgroup>
menentukan kelompok satu atau lebih kolom
dalam format sebuah tabel
HTML
TABLE

3. No Tag Fungsi
7 <col> ... </col>
mendefinisikan propertis dari setiap kolom dalam
elemen <colgroup>
8 <thead> ... </thead> mengelompokkan bagian header dari tabel HTML
9 <tbody> ... </tbody> mengelompokkan bagian body dari tabel
10 <tfoot> ... </tfoot> mengelompokkan bagian footer dari tabel
HTML
TABLE

4. No Atribut Value Fungsi
1 rowspan number untuk menggabungkan beberapa baris
2 colspan number untuk menggabungkan beberapa kolom
3 align
left, center,
right
mengatur peletakan teks dalam sel
4 valign
top, middle,
bottom
mengatur teks menurut posisi vertikal
HTML
TABLE (ATRIBUT)
Atribut untuk tag <th>, <tr>, dan <td>

5. Baris 1 - kolom 1 Baris 1 - kolom 2
Baris 2 - kolom 1 Baris 2 - kolom 2
Baris 3 - kolom 1 Baris 3 - kolom 2
HTML
TABLE
Contoh :
<table border="1">
<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>
<tr>
<td>Baris 3 - kolom 1</td>
<td>Baris 3 - kolom 2</td>
</tr>
</table>

6. Jack Sales 4444
John Admin 8888
James Sales 9999
HTML
TABLE
Latihan

7. Baris 1 - kolom 1 & kolom 2
Baris 2 - kolom 1 Baris 2 - kolom 2
Baris 3 - kolom 1 Baris 3 - kolom 2
HTML
TABLE
Contoh : Menggabungkan kolom
<table border="1">
<tr>
<td colspan="2">Baris 1 - kolom 1 & kolom 2</td>
</tr>
<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>

8. Baris 1 - kolom 1
Baris 1 & Baris 2 - kolom
2
Baris 2 - kolom 1
Baris 3 - kolom 1 Baris 3 - kolom 2
HTML
TABLE
Contoh : Menggabungkan baris
<table border="1">
<tr>
<td>Baris 1 - kolom 1</td>
<td rowspan="2">Baris 1 & Baris 2 - kolom 2</td>
</tr>
<tr>
<td>Baris 2 - kolom 1</td>
</tr>
<tr>
<td>Baris 3 - kolom 1</td>
<td>Baris 3 - kolom 2</td>
</tr>
</table>

9. Nama
Nilai
kimia fisika biologi
robby 30 23 55
rendi 88 44 23
alfian 56 77 22
HTML
TABLE
Latihan 1

10. Nama Email
budi
budi1@gmail.com
budi2@gmail.com
End of data
HTML
TABLE
Latihan 2

11. Nama
Asal
Depan Belakang
budi dwiyanto indonesia
upin saleh malaysia
ipin saleh malaysia
HTML
TABLE
Latihan 3

12. 4
x
5
x
20
5 5 25
6 5 30
HTML
TABLE
Latihan 4

13. B1 - K1 B1 - K2 B1 - K3
B1234 - K4
B2 - K1
B234 - K23
B3 - K1
B4 - K1
B5 - K12 B5 - K34
B6 - K1234
HTML
TABLE
Latihan 5