Tag Table
Tabel HTML memungkinkan penulis web untuk mengatur data menjadi baris dan kolom.
Kali ini saya akan mengerjakan tugas akhir kejar siswa yaitu menyelesaikan 3 project...
1.Membuat lambang bendera merah putih dengan tulisan"AKU CINTA INDONESIA"
Berikut contoh kode html membuat lambang negara:
<!DOCTYPE html>
<html>
<body>
<title>Bendera Indonesia</title>
<center>
<table border="1" cellpadding="60" cellspacing="0" style="width:100%">
<tr style="background-color: red">
<td></td>
</tr>
<tr style="background-color: white">
<td></td>
</tr>
</table>
<h1>
<td><center>AKU CINTA INDONESIA</center></td>
</h1>
</center>
</body>
</html>
Jika di tulis dalam Notepad++ akan seperti ini:
Hasilnya akan seperti ini:
2.Membuat Tabel Gabungan
Berikut contoh kode htmlnya:
<!DOCTYPE html>
<html>
<body>
<center>
<table border="1" cellpadding="50" cellspacing="1">
<tr>
<td colspan="2" style="background-color:red"></td>
<td colspan="2" style="background-color:blue"></td>
<td colspan="2" style="background-color:blue"></td>
<td colspan="2" style="background-color:red"></td>
</tr>
<tr align="center">
<td colspan="2" style="background-color:blue"></td>
<td colspan="4" rowspan="2">
<h1>SMK 4</h1>
<h1>LPPM RI</h1>
<h1> PADALARANG</h1>
</td>
<td colspan="2" style="background-color:blue"></td>
</tr>
<tr align="center">
<td colspan="2" style="background-color:blue"></td>
<td colspan="2" style="background-color:blue"></td>
</tr>
<tr align="center">
<td colspan="2" style="background-color:red"></td>
<td colspan="2" style="background-color:blue"></td>
<td colspan="2" style="background-color:blue"></td>
<td colspan="2" style="background-color:red"></td>
</tr>
</table>
</body>
</html>
Jika di tulis dalam Notepad++ akan seperti ini:
Hasilnya akan seperti ini:
3.Membuat Tabel Absen Kelas
Berikut contoh kode html membuat absen:
<!DOCTYPE html>
<html>
<head>
<body>
<table border="1" cellpadding="1" cellspacing="1">
<tr>
<th align="center" colspan="4" style="background-color:blue">ANGGOTA GRUP KELAS XI RPL 1</th>
</tr>
<tr>
<th style="background-color:yellow">NO</th>
<th style="background-color:yellow">NAMA</th>
<th style="background-color:yellow">P/L</th>
<th style="background-color:yellow">ALAMAT BLOG</th>
</tr>
<tr>
<td>1</td>
<td>Yuni Sri M</td>
<td>P</td>
<td>http://yunisrimulyani pelajarperdulicovid19.blogspot.com</td>
</tr>
<tr>
<td>2</td>
<td>Pramesti Widia P</td>
<td>P</td>
<td>https://pramesti-pelajarpedulicovid19.blogspot.com</td>
</tr>
<tr>
<td>3</td>
<td> Fitri Rianti</td>
<td>P</td>
<td>https://fitririanti-pedulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>4</td>
<td>Aulia Rahma</td>
<td>P</td>
<td>https://agystarahmaaulia blogspot.com</td>
</tr>
<tr>
<td>5</td>
<td>Nurul Azzahra</td>
<td>P</td>
<td>https://nurulazzahra.blogspot.com/?m=1</td>
</tr>
<tr>
<td>6</td>
<td>Mita Dwi A</td>
<td>P</td>
<td>http://anjanidwimita.blogspot.com</td>
</tr>
<tr>
<td>7</td>
<td>Muhammad Arya C</td>
<td>L</td>
<td>http://muhamadaryacitra blogspot.com/?m=1</td>
</tr>
<tr>
<td>8</td>
<td>Fajar Mustopa</td>
<td>L</td>
<td>https://fajarmustopa-pelajarperdulicovid19 blogspot.com</td>
</tr>
<tr>
<td>9</td>
<td>Chelsea K</td>
<td>P</td>
<td>https://chelseakhariun19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>10</td>
<td>Vina Setia B</td>
<td>P</td>
<td>https://vinasetyavinasetya blogspot.com</td>
</tr>
</table>
</body>
</head>
</html>
Jika di tulis dalam Notepad++ akan seperti ini:
Dan Hasilnya akan seperti ini:
Foto siswi yang sedang mengerjakan:
Terima Kasih :V