Kali ini, siswa kelas 11 mempraktikkan cara membuat tabel menggunakan bahasa markup HTML. Tabel adalah elemen penting di halaman web untuk menampilkan data secara terstruktur. Siswa mempelajari tag dasar seperti <table>, <tr> (table row), <th> (table header), dan <td> (table data).
Kami memulai dengan contoh sederhana — membuat tabel daftar nilai mata pelajaran. Langkah demi langkah, siswa mengetikkan kode di editor, menyimpan file dengan ekstensi .html, lalu melihat hasilnya di browser. Dari sini, mereka mulai memahami bagaimana baris dan kolom tersusun, serta bagaimana menambahkan border, menggabungkan sel, atau memberi warna latar menggunakan atribut dan CSS sederhana.
Praktik ini bukan hanya melatih keterampilan teknis, tetapi juga membiasakan siswa untuk berpikir terstruktur dalam menyajikan informasi. Dari tabel nilai, siapa tahu besok mereka bisa membuat tabel jadwal, katalog produk, atau data statistik di situs web mereka sendiri.
<html>
<head>
<title> Latihan Table </title>
</head>
<body>
Tabel 1
<table border="1" width="500">
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
</tr>
</table>
<p>
Hasil Preview kode HTML tabel 1:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Tabel 2
<table border="1" width="500">
<tr>
<td align="center">1</td>
<td colspan="2" align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">4</td>
<td align="center">5</td>
</tr>
<tr>
<td colspan="2" align="center">6</td>
<td align="center">7</td>
</tr>
</table>
<p>
Hasil Preview kode HTML tabel 2:
| 1 | 2 | |
| 3 | 4 | 5 |
| 6 | 7 | |
Tabel 3
<table border="1" width="500">
<tr>
<td colspan="3" align="center">1</td>
</tr>
<tr>
<td colspan="2" align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
</table>
<p>
Hasil Preview kode HTML tabel 3:
| 1 | ||
| 2 | 3 | |
| 4 | 5 | 6 |
Tabel 4
<table border="1" width="300">
<tr>
<td rowspan="2" align="center">1</td>
<td align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
</tr>
</table>
<p>
Hasil Preview kode HTML tabel 4:
| 1 | 2 |
| 3 |
Tabel 5
<table border="1" width="300">
<tr>
<td align="center">1</td>
<td rowspan="2" align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
</tr>
</table>
<p>
Hasil Preview kode HTML tabel 5:
| 1 | 2 |
| 3 |
Tabel 6
<table border="1" width="600">
<tr>
<td align="center" width="200">1</td>
<td colspan="2" align="center" width="400">2</td>
</tr>
<tr>
<td align="center">3</td>
<td colspan="2" align="center">
<table border="1" width="350">
<tr>
<td colspan="2" align="center">4</td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">6</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<table border="1" width="350">
<tr>
<td rowspan="2">7</td>
<td align="center">8</td>
</tr>
<tr>
<td align="center">9</td>
</tr>
</table>
</td>
<td align="center" width="200">10</td>
</tr>
</table>
Hasil Preview kode HTML tabel 6:
| 1 | 2 | |||||
| 3 |
|
|||||
|
10 | |||||
</body>
</html>
0 comments:
Posting Komentar
Pastikan anda berkomentar dengan sopan, tidak mengandung pornografi dan unsur SARA. Terima kasih sudah berkomentar dengan bijak.