Sabtu, 16 Mei 2020

TUGAS DARING MATERI 4 BELAJAR HTML - Tag Table

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


Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)