Cara membuat Menu Dropdown.
langsung saja ini adalah script Html nya,,
<html>
<head>
<link href="data.css" rel="stylesheet" type="text/css" />
<title>Menu Dropdown</title>
</head>
<table id="data">
<tr>
<td>
<ul id="tabel">
<li><a href="#">Beranda</a>
<ul>
<li><a href="#">Artikel</a></li>
<li><a href="#">Tips & Trik</a></li>
</ul>
</td>
<td>
<ul id="tabel">
<li><a href="#">Kontak</a>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</li>
</ul>
</td>
<td>
<ul id="tabel">
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Alamat</a></li>
<li><a href="#">Koleksi Foto</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</html>
Bagaimana script HTMLnya... mudah kan untuk di pahami dan di pelajari,,
Selanjutnya adalah scrip CSSnya inilah dia scrip CSSnya,,
#data{
border:4px solid blue;
width:20%;
margin: 40 ;
background-color:white;
color:white;
font-size:24;
text-decoration:none;
}
a{text-decoration:none;}
#tabel
{
padding: 0;
margin: 0;
}
#tabel a
{
width: 150px;
}
#tabel li
{
float:left;
padding: 2px 4px ;
}
#tabel li ul
{
position: absolute;
background: blue;
padding: 4px;
width: 150px;
right: -9999px;
}
#tabel li:hover ul
{
right: auto;
}
#tabel li ul a
{
color: white;
text-decoration: none;
display: block;
}
#tabel li ul a:hover
{
color: green;
background:white;
}
Cara membuat Tabel Zebra
Langsung saja kita menuju scrip HTMLnya. Bisa dilihat dibwah ini
<html>
<head>
<link href="dataq.css" rel="stylesheet" type="text/css" />
<title>Tabel Zebra</title>
</head>
<body>
<body id="body">
</div>
</body>
<table class="data">
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Jenis</th>
<th>Banyak</th>
</tr>
<tr class="data1">
<td>1</td>
<td>Buku</td>
<td>Novel</td>
<td>1</td>
</tr>
<tr class="data">
<td>2</td>
<td>Buku</td>
<td>Cerpen</td>
<td>2</td>
</tr>
<tr class="data1">
<td>3</td>
<td>Buku</td>
<td>Komedi</td>
<td>4</td>
</tr>
<tr class="utama">
<td>4</td>
<td>Buku</td>
<td>Legenda</td>
<td>1</td>
</tr>
</table>
</html>
Selanjutnya jngan lupa scriip CSSnya. disini saya menggunakan CSS yang eksternal dan bisa dilihat seperti inilh scrip CSSnya.
#body{
background-color:white}
.data
{
width:40%;
margin-top:20px;
margin-left:100px;
border:1px solid blue;
font-family: Arial, Helvetica;
text-align:center;
}
td{
border: 1px solid;
}
th
{
text-align:center;
align:center;
background-color:black;
color:white;
}
.data1
{
text-align:center;
background-color:#ccc;
}
tr:hover {
color:red;
cursor: pointer;
}
transition: all 1s;
