Cara Membuat Tabel Makanan
1. Masukan Kode HTML Berikut ini ke dalam Aplikasi Visual Studio Code, CodeLobster dll
<html>
<head>
<title></title>
<link rel="stylesheet" text type="text/css" href="stylevalid.css"/>
</head>
<center>
<form action="#">
<center><text><b>* FORM INPUT DATA SISWA <br /> SMK NEGERI 4 JAKARTA *</b></text></center>
<table>
<tr>
<td>NAMA</td>
<td>:</td>
<td><input class="form-nama-1" type="text" placeholder="NAMA DEPAN"/> <input class="form-nama-1" type="text" placeholder="NAMA BELAKANG"/></td>
</tr>
<tr>
<td>KELAS</td>
<td>:</td>
<td>
<select class="form-kelas"><option selected="1">PILIH KELAS </option>
<option>X</option>
<option>XI</option>
<option>XII</option>
</select>
</td>
</tr>
<tr>
<td>JURUSAN</td>
<td>:</td>
<td>
<select class="form-jurusan"><option selected="1">PILIH JURUSAN</option>
<option>TKJ</option>
<option>TAV</option>
<option>TEI</option>
<option>TKR</option>
<option>TPL</option>
<option>TF</option>
<option>DPIB</option>
</select>
</td>
</tr>
<tr>
<td>TEMPAT LAHIR</td>
<td>:</td>
<td><input class="form-tmpt-lahir" type="text" name="place" required="input" placeholder="TEMPAT LAHIR"></td>
</tr>
<tr>
<td>TANGGAL LAHIR</td>
<td>:</td>
<td>
<select class="form-birtday"><option selected="1">TANGGAL </option>
<option>1</option>
<option> 2 </option>
<option> 3 </option>
<option> 4 </option>
<option> 5 </option>
<option> 6 </option>
<option> 7 </option>
<option> 8 </option>
<option> 9 </option>
<option> 10 </option>
<option> 11 </option>
<option> 12 </option>
<option> 13 </option>
<option> 14 </option>
<option> 15 </option>
<option> 16 </option>
<option> 17 </option>
<option> 18 </option>
<option> 19 </option>
<option> 20 </option>
<option> 21 </option>
<option> 22 </option>
<option> 23 </option>
<option> 24 </option>
<option> 25 </option>
<option> 26 </option>
<option> 27 </option>
<option> 28 </option>
<option> 29 </option>
<option> 30 </option>
<option> 31 </option></select>
<select class="form-birtday"><option selected="1">BULAN </option>
<option> JANUARI </option>
<option> FEBRUARI </option>
<option> MARET </option>
<option> APRIL </option>
<option> MEI </option>
<option> JUNI </option>
<option> JULY </option>
<option> AGUSTUS </option>
<option> SEPTEMBER </option>
<option> OKTOBER </option>
<option> NOVEMBER </option>
<option> DESEMBER </option></select>
<select class="form-birtday"><option selected="1">TAHUN </option>
<option> 2017 </option>
<option> 2016 </option>
<option> 2015 </option>
<option> 2014 </option>
<option> 2013 </option>
<option> 2012 </option>
<option> 2011 </option>
<option> 2010 </option>
<option> 2009 </option>
<option> 2008 </option>
<option> 2007 </option>
<option> 2006 </option>
<option> 2005 </option>
<option> 2004 </option>
<option> 2003 </option>
<option> 2002 </option>
<option> 2001 </option>
<option> 2000 </option>
<option> 1999 </option>
<option> 1998 </option>
<option> 1996 </option>
<option> 1995 </option>
<option> 1994 </option>
<option> 1993 </option>
<option> 1992 </option>
<option> 1991 </option>
<option> 1990 </option>
</select>
</td>
</tr>
<tr>
<td>JENIS KELAMIN</td>
<td>:</td>
<td><input type="radio" name="kelamin"/>LAKI-LAKI <input type="radio" name="kelamin"/>PEREMPUAN</td>
</tr>
<tr>
<td>HOBI</td>
<td>:</td>
<td>
<input type="checkbox" name="hoby"/>SEPAK BOLA<br>
<input type="checkbox" name="hoby"/>BERENANG<br>
<input type="checkbox" name="hoby"/>MEMBACA <br>
<input type="checkbox" name="hoby"/>BASKET <br>
<input type="checkbox" name=" hoby"/>VOLLY BALL
</td>
</tr>
<tr>
<td>EXTRAKULIKULER</td>
<td>:</td>
<td><select class="escul"><option selected="1">PILIH EXTRAKULIKULER </option>
<option> AUTO CAD </option>
<option> BASKET BALL</option>
<option> BADMINTON </option>
<option> BASKET </option>
<option> FUTSAL </option>
<option> PASKIBRA </option>
<option> KIR </option>
<option> GIHONBU </option>
<option> ENGLISH CLUB </option></select>
</td>
</tr>
<tr>
<td>NO.TELEPON</td>
<td>:</td>
<td><input class="form-phone" type="text" nama="telepon" placeholder="NO.TELEPON"/></td>
</tr>
<tr>
<td>ALAMAT</td>
<td>:</td>
<td><textarea class="address" style="border-radius: 8" cols="35" placeholder="MASUKAN ALAMAT ANDA" rows="10" required="input"></textarea></td>
</tr>
<td colspan="8" align="center"><button class="button-save">SIMPAN</button>
<td colspan="8" align="center"><button class="reset" type="reset"> RESET</button></td>
</td>
</table>
</form>
</center>
</body>
</html>.form-nama-1{
width: 250px;
height: 35px;
margin-left: 8px;
padding:6px 12px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:8px;
}
.form-nama-2{
width: 250px;
height: 35px;
margin-left: 8px;
padding:6px 12px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:8px;
}
.form-kelas{
width: 150px;
height: 35px;
margin-left: 8px;
padding:6px 12px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:8px;
}
.form-jurusan{
width: 170px;
height: 35px;
margin-left: 8px;
padding:6px 12px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:8px;
}
.form-tmpt-lahir{
width: 250px;
height: 35px;
margin-left: 8px;
padding:6px 12px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:8px;
}
.form-birtday{
width: 120px;
height: 35px;
margin-left: 8px;
padding:6px 12px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:8px;
}
.form-phone{
width: 250px;
height: 35px;
margin-left: 8px;
padding:6px 12px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:8px;
}
.address{
width: 400px;
height: 400spx;
margin-left: 8px;
padding:6px 12px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:8px;
}
.escul{
width: 250px;
height: 35px;
margin-left: 8px;
padding:6px 12px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:8px;
}
.button-save{
background: #67ae55;
font-size: 16px;
font-family: inherit;
margin: 0px;
width: 150px;
height: 30px;
border-radius: 8px
}
.reset{
background: #67ae55;
font-size: 16px;
font-family: inherit;
text-align: center;
margin: 0px;
width: 150px;
height: 30px;
border-radius: 8px
}
