Kursus Membuat Web

iklan

Membuat Tabel CSS 4

Tabel ini dibuat menggunakan HTML 5 dan CSS 3

Gambar Tabel
membuat menu css
Lihat Demo ..

Source Code HTML

Buat kode HTML 5 sebagai berikut

Source Code HTML
<!DOCTYPE html>
<html lang="id">
	<head>
		<title>Membuat Tabel CSS - Kursus Membuat Web</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="tabel.css" media="all">
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th></th>
					<th scope="col">Smart Starter</th>
					<th scope="col">Smart Medium</th>
					<th scope="col">Smart Business</th>
					<th scope="col">Smart Deluxe</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th scope="row">Price per month</th>
					<td>$ 2.90</td>
					<td>$ 5.90</td>
					<td>$ 9.90</td>
					<td>$ 14.90</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<th scope="row">Storage Space</th>
					<td>512 MB</td>
					<td>1 GB</td>
					<td>2 GB</td>
					<td>4 GB</td>
				</tr>
				<tr>
					<th scope="row">Bandwidth</th>
					<td>50 GB</td>
					<td>100 GB</td>
					<td>150 GB</td>
					<td>Unlimited</td>
				</tr>
				<tr>
					<th scope="row">MySQL Databases</th>
					<td>Unlimited</td>
					<td>Unlimited</td>
					<td>Unlimited</td>
					<td>Unlimited</td>
				</tr>
				<tr>
					<th scope="row">Setup</th>
					<td>19.90 $</td>
					<td>12.90 $</td>
					<td>free</td>
					<td>free</td>
				</tr>
				<tr>
					<th scope="row">PHP 5</th>
					<td><span class="check"></span></td>
					<td><span class="check"></span></td>
					<td><span class="check"></span></td>
					<td><span class="check"></span></td>
				</tr>
				<tr>
					<th scope="row">Ruby on Rails</th>
					<td><span class="check"></span></td>
					<td><span class="check"></span></td>
					<td><span class="check"></span></td>
					<td><span class="check"></span></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Source Code CSS

Selanjutnya buat kode CSS 3 sebagai berikut

Source Code CSS
table{
	font-family:Arial;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: -1px;
	line-height: 1.7em;
	text-align:center;
	border-collapse:collapse;
}
thead th{
	padding:6px 10px;
	text-transform:uppercase;
	color:#444;
	font-weight:bold;
	text-shadow:1px 1px 1px #fff;
	border-bottom:5px solid #444;
}
thead th:empty{
	background:transparent;
	border:none;
}
thead :nth-child(2),
tfoot :nth-child(2){
	background-color: #7FD2FF;
}
tfoot :nth-child(2){
	-moz-border-radius:0px 0px 0px 5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-left-radius:5px;
}
thead :nth-child(2){
	-moz-border-radius:5px 0px 0px 0px;
	-webkit-border-top-left-radius:5px;
	border-top-left-radius:5px;
}
thead :nth-child(3),
tfoot :nth-child(3){
	background-color: #45A8DF;
}
thead :nth-child(4),
tfoot :nth-child(4){
	background-color: #2388BF;
}
thead :nth-child(5),
tfoot :nth-child(5){
	background-color: #096A9F;
}
thead :nth-child(5){
	-moz-border-radius:0px 5px 0px 0px;
	-webkit-border-top-right-radius:5px;
	border-top-right-radius:5px;
}
tfoot :nth-child(5){
	-moz-border-radius:0px 0px 5px 0px;
	-webkit-border-bottom-right-radius:5px;
	border-bottom-right-radius:5px;
}
tfoot td{
	font-size:38px;
	font-weight:bold;
	padding:15px 0px;
	text-shadow:1px 1px 1px #fff;
}
tbody td{
	padding:10px;
}
tbody tr:nth-child(4) td{
	font-size:26px;
	font-weight:bold;
}
tbody td:nth-child(even){
	background-color:#444;
	color:#444;
	border-bottom:1px solid #444;
	background:-webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.39, rgb(189,189,189)),
	color-stop(0.7, rgb(224,224,224))
	);
	background:-moz-linear-gradient(
	center bottom,
	rgb(189,189,189) 39%,
	rgb(224,224,224) 70%
	);
	text-shadow:1px 1px 1px #fff;
}
tbody td:nth-child(odd){
	background-color:#555;
	color:#f0f0f0;
	border-bottom:1px solid #444;
	background:-webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.39, rgb(85,85,85)),
	color-stop(0.7, rgb(105,105,105))
	);
	background:-moz-linear-gradient(
	center bottom,
	rgb(85,85,85) 39%,
	rgb(105,105,105) 70%
	);
	text-shadow:1px 1px 1px #000;
}
tbody td:nth-last-child(1){
	border-right:1px solid #222;
}
tbody th{
	color:#696969;
	text-align:right;
	padding:0px 10px;
	border-right:1px solid #aaa;
}
tbody span.check::before{
	content : url(check2.png)
}
Lihat Demo ..

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015