Pelajar Perduli COVID 19: TUGAS DARING MATERI 4 BELAJAR HTML - HTML Tag Table

Sabtu, 16 Mei 2020

TUGAS DARING MATERI 4 BELAJAR HTML - HTML Tag Table

TAG TABLE

Tabel Html memungkinkan penulis web untuk mengatur data menjadi baris dan kolom.

Kali ini kita akan membuat 3 tag tabel, pertama kita akan membuat tag table bendera negara Indonesia, kedua tag table gabungan, dan ketiga tag table absen.

1. Bendera Indonesia

Berikut contoh kode html membuat lambang bendera :

<!DOCTYPE html>
<html>
<body>
<table border="1" cellpadding="50" style="width:100%">
<tr style="background-color:red">
<td></td>
</tr>
<tr>
<tr style="background-color:white">
<td></td>
</tr>
</table>
<p align="center"><b>AKU CINTA INDONESIA</p></b>
</body>
</html>

Jika ditulis dalam editor anwriter akan seperti dibawah :

Dan hasil nya akan seperti ini :

2. Gabungan

Berikut contoh kode html dari gabungan :

<!DOCTYPE html>

<html>

<body>

<center>

<table border="1" cellpadding="60" 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">SMK 4 LPPM PADALARANG</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 ditulis dalam editor anwriter akan seperti dibawah ini :

Hasil nya akan seperti ini :

3. Absen

Berikut contoh kode html dari 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 3</th>
</tr>
<tr>
<th style="background-color:yellow">NO</th>
<th style="background-color:yellow">NAMA</th>
<th style="background-color:yellow">L/P</th>
<th style="background-color:yellow">ALAMAT BLOG</th>
</tr>
<tr>
<td>1</td>
<td>RINI</td>
<td>P</td>
<td>rini-pelajarperdulicovid19.blogspot.com</td>
</tr>
<tr>
<td>2</td>
<td>EKA HERMAWAN</td>
<td>L</td>
<td>ekahermawan-pelajarpedulicovid19.blogspot.com</td>
</tr>
<tr>
<td>3</td>
<td>VIDKI</td>
<td>L</td>
<td>vidki-pelajarpedulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>4</td>
<td>RESTI NOPIANTI</td>
<td>P</td>
<td>http://restinopiantii-pelajarperdulicovid19.blogspot.com</td>
</tr>
<tr>
<td>5</td>
<td>ELISNA JUNGJUNAN</td>
<td>P</td>
<td>http://elisna-pelajarpedulicovid19.blogspot.com</td>
</tr>
<tr>
<td>6</td>
<td>DINI JULIANTI</td>
<td>P</td>
<td>http://dini-pelajarperdulicovid19.blogspot.com</td>
</tr>
<tr>
<td>7</td>
<td>MIFTAH FARIZ</td>
<td>L</td>
<td>miftah-pelajarpedulicovid19.blogspot.com</td>
</tr>
<tr>
<td>8</td>
<td>SUCI NUR SIFA</td>
<td>P</td>
<td>sucinursifa-pelajarperdulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>9</td>
<td>RISMA</td>
<td>P</td>
<td>risma-pedulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>10</td>
<td>WULAN</td>
<td>P</td>
<td>wulanfebriyantipelajarpedulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>11</td>
<td>MURTI HANDAYANI</td>
<td>P</td>
<td>murtihandayani-pelajarpedulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>12</td>
<td>ADI TAJUDIN</td>
<td>L</td>
<td>aditajudin-pelajarperdulicovid19.blogspot.com/2020/03/pelajar-perduli-covid-19.html?m=1</td>
</tr>
</table>
</body>
</head>
</html>

Jika ditulis dalam editor anwriter akan menjadi seperti dibawah ini :

Dan hasil nya akan seperti ini :

Foto siswi yang mengerjakan :

Selamat Mencoba😄

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)