Kali ini saya akan share berbagai macam Table(tabel)deangna css ini dia langsung saja nih sedoootttt.... :D
1.CONTOH TABEL 1
| Title 1
|
Title 2
|
Title 3
|
| Row 1
|
Row 1
|
Row 1
|
| Row 2
|
Row 2
|
Row 2
|
| Row 2
|
Row 2
|
Row 2
|
| Row 3
|
Row 3
|
Row 3
|
KODE CSS:
<style type="text/css">
.ManyCara {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.ManyCara table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.ManyCara tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.ManyCara table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.ManyCara table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.ManyCara tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.ManyCara tr:hover td{
}
.ManyCara tr:nth-child(odd){ background-color:#007fff; }
.ManyCara tr:nth-child(even) { background-color:#ffffff; }.ManyCara td{
vertical-align:middle;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:12px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.ManyCara tr:last-child td{
border-width:0px 1px 0px 0px;
}.ManyCara tr td:last-child{
border-width:0px 0px 1px 0px;
}.ManyCara tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.ManyCara tr:first-child td{
background:-o-linear-gradient(bottom, #007fff 5%, #00ffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #007fff), color-stop(1, #00ffff) );
background:-moz-linear-gradient( center top, #007fff 5%, #00ffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#007fff", endColorstr="#00ffff"); background: -o-linear-gradient(top,#007fff,00ffff);
background-color:#007fff;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:18px;
font-family:Helvetica;
font-weight:bold;
color:#000000;
}
.ManyCara tr:first-child:hover td{
background:-o-linear-gradient(bottom, #007fff 5%, #00ffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #007fff), color-stop(1, #00ffff) );
background:-moz-linear-gradient( center top, #007fff 5%, #00ffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#007fff", endColorstr="#00ffff"); background: -o-linear-gradient(top,#007fff,00ffff);
background-color:#007fff;
}
.ManyCara tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.ManyCara tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
</style>
KODE HTML:
<br /><div class="ManyCara">
<table>
<tbody>
<tr>
<td>Title 1
</td>
<td>Title 2
</td>
<td>Title 3
</td>
</tr>
<tr>
<td>Row 1
</td>
<td>Row 1
</td>
<td>Row 1
</td>
</tr>
<tr>
<td>Row 2
</td>
<td>Row 2
</td>
<td>Row 2
</td>
</tr>
<tr>
<td>Row 2
</td>
<td>Row 2
</td>
<td>Row 2
</td>
</tr>
<tr>
<td>Row 3
</td>
<td>Row 3
</td>
<td>Row 3
</td>
</tr>
</tbody></table>
</div>
2.CONTOH TABEL KE 2
| Title 1
|
Title 2
|
Title 3
|
| Row 1
|
Row 1
|
Row 1
|
| Row 2
|
Row 2
|
Row 2
|
| Row 2
|
Row 2
|
Row 2
|
| Row 3
|
Row 3
|
Row 3
|
KODE CSS:
<style type="text/css">
.ManyCara1 {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.ManyCara1 table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.ManyCara1 tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.ManyCara1 table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.ManyCara1 table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.ManyCara1 tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.ManyCara1 tr:hover td{
background-color:#ffffff;
}
.ManyCara1 td{
vertical-align:middle;
background:-o-linear-gradient(bottom, #00ff00 5%, #ffffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00ff00), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #00ff00 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ff00", endColorstr="#ffffff"); background: -o-linear-gradient(top,#00ff00,ffffff);
background-color:#00ff00;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:10px;
font-size:12px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.ManyCara1 tr:last-child td{
border-width:0px 1px 0px 0px;
}.ManyCara1 tr td:last-child{
border-width:0px 0px 1px 0px;
}.ManyCara1 tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.ManyCara1 tr:first-child td{
background:-o-linear-gradient(bottom, #00ff00 5%, #ffff00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00ff00), color-stop(1, #ffff00) );
background:-moz-linear-gradient( center top, #00ff00 5%, #ffff00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ff00", endColorstr="#ffff00"); background: -o-linear-gradient(top,#00ff00,ffff00);
background-color:#00ff00;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:17px;
font-family:Helvetica;
font-weight:bold;
color:#000000;
}
.ManyCara1 tr:first-child:hover td{
background:-o-linear-gradient(bottom, #00ff00 5%, #ffff00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00ff00), color-stop(1, #ffff00) );
background:-moz-linear-gradient( center top, #00ff00 5%, #ffff00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ff00", endColorstr="#ffff00"); background: -o-linear-gradient(top,#00ff00,ffff00);
background-color:#00ff00;
}
.ManyCara1 tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.ManyCara1 tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
</style>
KODE HTML:
<div class="ManyCara1">
<table>
<tbody>
<tr>
<td>Title 1
</td>
<td>Title 2
</td>
<td>Title 3
</td>
</tr>
<tr>
<td>Row 1
</td>
<td>Row 1
</td>
<td>Row 1
</td>
</tr>
<tr>
<td>Row 2
</td>
<td>Row 2
</td>
<td>Row 2
</td>
</tr>
<tr>
<td>Row 2
</td>
<td>Row 2
</td>
<td>Row 2
</td>
</tr>
<tr>
<td>Row 3
</td>
<td>Row 3
</td>
<td>Row 3
</td>
</tr>
</tbody></table>
</div>
3.CONTOH TABEL KE 3
| Title 1
|
Title 2
|
Title 3
|
| Row 1
|
Row 1
|
Row 1
|
| Row 2
|
Row 2
|
Row 2
|
| Row 2
|
Row 2
|
Row 2
|
| Row 3
|
Row 3
|
Row 3
|
KODE CSS:
<style type"text/css">
.ManyCara2 {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.ManyCara2 table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.ManyCara2 tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.ManyCara2 table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.ManyCara2 table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.ManyCara2 tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.ManyCara2 tr:hover td{
background-color:#ffffff;
}
.ManyCara2 td{
vertical-align:middle;
background:-o-linear-gradient(bottom, #000000 5%, #ffffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #000000 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#ffffff"); background: -o-linear-gradient(top,#000000,ffffff);
background-color:#000000;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#ff0000;
}.ManyCara2 tr:last-child td{
border-width:0px 1px 0px 0px;
}.ManyCara2 tr td:last-child{
border-width:0px 0px 1px 0px;
}.ManyCara2 tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.ManyCara2 tr:first-child td{
background:-o-linear-gradient(bottom, #000000 5%, #4c4c4c 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #4c4c4c) );
background:-moz-linear-gradient( center top, #000000 5%, #4c4c4c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#4c4c4c"); background: -o-linear-gradient(top,#000000,4c4c4c);
background-color:#000000;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#0008ff;
}
.ManyCara2 tr:first-child:hover td{
background:-o-linear-gradient(bottom, #000000 5%, #4c4c4c 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #4c4c4c) );
background:-moz-linear-gradient( center top, #000000 5%, #4c4c4c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#4c4c4c"); background: -o-linear-gradient(top,#000000,4c4c4c);
background-color:#000000;
}
.ManyCara2 tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.ManyCara2 tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
</style>
KODE HTML:
<div class="ManyCara2" >
<table >
<tr>
<td>
Title 1
</td>
<td >
Title 2
</td>
<td>
Title 3
</td>
</tr>
<tr>
<td >
Row 1
</td>
<td>
Row 1
</td>
<td>
Row 1
</td>
</tr>
<tr>
<td >
Row 2
</td>
<td>
Row 2
</td>
<td>
Row 2
</td>
</tr>
<tr>
<td >
Row 2
</td>
<td>
Row 2
</td>
<td>
Row 2
</td>
</tr>
<tr>
<td >
Row 3
</td>
<td>
Row 3
</td>
<td>
Row 3
</td>
</tr>
</table>
</div>
Oke itu saja yang bisa saya share semoga bermanfaat. :D
Title : Cara membuat TABLE(Tabel) Dengan CSS
Description : Kali ini saya akan share berbagai macam Table(tabel)deangna css ini dia langsung saja nih sedoootttt.... :D 1.CONTOH TABEL 1 ...