Membuat Table sederhana
created by sance ainul yakin
<!Doctype html>
<html>
<head>
<title>HTML</title>
<style>
*{
padding:0;
margin:0;
}
table{
margin:auto;
margin-top:50px;
}
button{
width:100px;
margin-left:30%;
align:left;
background:#f0f0fee;
border:1px solid blue;
}
</style>
</head>
<br>
<marquee direction="right" scrollamount="10"><h1>SELAMAT DATANG</h1></marquee>
<table border="1" align="center">
<tr>
<td colspan="2" align="center">Untuk Judul</td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="user" placeholder="Enter Your name"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<select name="jk">
<option value="L">Laki-Laki</option>
<option value="P">Perempuan</option>
</select>
</td>
</tr>
<tr>
<td>Lulusan</td>
<td>
<input type="checkbox" name="c1" value="SMK">SMK
<input type="checkbox" name="c2" value="MA">MA
<input type="checkbox" name="c3" value="MK">MK
</td>
</tr>
<tr>
<td>Hobby</td>
<td>
<input type="radio" name="r1" value="MA">MA
<input type="radio" name="r2" value="MK">MK
</td>
</tr>
<tr>
<td>Komentar</td>
<td><textarea name="txt" cols="25" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><button>SAVE</button></td>
</tr>
</table>
</html>
Atau Seperti ini
<!DOCTYPE html>
<html>
<head>
<title>Cara Design Table Dengan CSS | www.malasngoding.com</title>
<style>
.table1 {
font-family: sans-serif;
border-collapse: collapse;
width: 50%;
}
.table1{
margin:auto;
}
.table1 tr th{
background: #00c4ff;
color: #fff;
font-weight: normal;
}
.table1, th, td {
padding: 8px 20px;
text-align: center;
}
.table1 tr:hover {
background-color: #f5f5f5;
}
.table1 tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Cara Design Table Dengan CSS | www.malasngoding.com</h1>
<h4>Design table 1</h4>
<table class="table1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi Saputra</td>
<td>Magelang</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Budi Budiman</td>
<td>Jakarta</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>Malas Ngoding</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>
Atau menggunakan ini
<!Doctype html>
<html>
<head>
<title>Form 5</title>
<style>
h1{
text-align:center;
}
table{
margin:auto;
margin-top : 10px;
font-family:sans-serif;
border-collapse:collapse;
width:50%;
}
table th{
background:#00c4ff;
color:white;
font-weight:normal;
}
table, th, td{
padding:8px 20px;
}
table tr:nth-child(even){
background:#f2f2f2;
}
table tr:hover{
background:yellow;
cursor:pointer;
}
button{
width:20%;
padding:0px;
text-align:center;
}
button p{
text-align:center;
line-height:20px;
}
#kotak{
margin:auto;
width:700px;
height:50px;
color:black;
}
a{
list-style:none;
text-decoration:none;
}
</style>
</head>
<body >
<h1><a href="dfasdf" target="_blank">Form Pendaptaran</a></h1>
<div id="kotak">
<h1><marquee direction="right">Selamat Datang</marquee></h1>
</div>
<table border="1">
<tr>
<th colspan="2">Data Mahasiswa</th>
</tr>
<tr>
<td>Username</td>
<td><input type ="text" name="user" placeholder="Enter Your user"/></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<select name="jk" >
<option value="L">Laki-Laki</option>
<option value="P">Perempuan</option>
</select>
</td>
</tr>
<tr>
<td>jurusan</td>
<td>
<input type="checkbox" value="SMA" name="sma">SMA
<input type="checkbox" value="SMK" name="smk">SMK
<input type="checkbox" value="SMD" name="smd">SMD
</td>
</tr>
<tr>
<td>Hobby</td>
<td>
<input type="radio" name ="r1" value="memanah">Memanah
<input type="radio" name ="r1" value="memancin">memancing
<input type="radio" name ="r1" value="memanah">Memanah
<input type="radio" name ="r1" value="memanah">Memanah
</td>
</tr>
<tr>
<td>Komenter</td>
<td><textarea name="text1" cols="70" rows="10"> </textarea></td>
</tr>
<tr>
<td colspan="2" align="right" ><button><p>SAVE</p></button></td>
</tr>
</table>
</body>
</html>
======================
catatan :
color : #f2f2f2 atw #f5f5f5
#00c4ff
font-family:sans-serif;
border-collapse:collapse;
font-weight:normal
table,tr:nth-child(even){
}
Membuat Table sederhana
Reviewed by Leo
on
00:10
Rating:
Reviewed by Leo
on
00:10
Rating:
.png)
No comments