Kursus Membuat Web

iklan

Membuat Tabel CSS 2

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: "Trebuchet MS", sans-serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4em;
	font-style: normal;
	border-collapse:separate;
}
thead th{
	padding:15px;
	color:#fff;
	text-shadow:1px 1px 1px #568F23;
	border:1px solid #93CE37;
	border-bottom:3px solid #9ED929;
	background-color:#9DD929;
	background:-webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.02, rgb(123,192,67)),
	color-stop(0.51, rgb(139,198,66)),
	color-stop(0.87, rgb(158,217,41))
	);
	background: -moz-linear-gradient(
	center bottom,
	rgb(123,192,67) 2%,
	rgb(139,198,66) 51%,
	rgb(158,217,41) 87%
	);
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-radius:5px 5px 0px 0px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
thead th:empty{
	background:transparent;
	border:none;
}
tbody th{
	color:#fff;
	text-shadow:1px 1px 1px #568F23;
	background-color:#9DD929;
	border:1px solid #93CE37;
	border-right:3px solid #9ED929;
	padding:0px 10px;
	background:-webkit-gradient(
	linear,
	left bottom,
	right top,
	color-stop(0.02, rgb(158,217,41)),
	color-stop(0.51, rgb(139,198,66)),
	color-stop(0.87, rgb(123,192,67))
	);
	background: -moz-linear-gradient(
	left bottom,
	rgb(158,217,41) 2%,
	rgb(139,198,66) 51%,
	rgb(123,192,67) 87%
	);
	-moz-border-radius:5px 0px 0px 5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
}
tfoot td{
	color: #9CD009;
	font-size:32px;
	text-align:center;
	padding:10px 0px;
	text-shadow:1px 1px 1px #444;
}
tfoot th{
	color:#666;
}
tbody td{
	padding:10px;
	text-align:center;
	background-color:#DEF3CA;
	border: 2px solid #E7EFE0;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	color:#666;
	text-shadow:1px 1px 1px #fff;
}
tbody span.check::before{
content : url(check0.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