Kursus Membuat Web

iklan

Membuat Tabel CSS 3

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: Georgia, serif;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: -1px;
	line-height: 1.2em;
	border-collapse:collapse;
	text-align:center;
}
thead th,  tfoot td{
	padding:20px 10px 40px 10px;
	color:#fff;
	font-size: 26px;
	background-color:#222;
	font-weight:normal;
	border-right:1px dotted #666;
	border-top:3px solid #666;
	-moz-box-shadow:0px -1px 4px #000;
	-webkit-box-shadow:0px -1px 4px #000;
	box-shadow:0px -1px 4px #000;
	text-shadow:1px 1px 1px #000;
}
tfoot th{
	padding:10px;
	font-size:18px;
	text-transform:uppercase;
	color:#888;
}
tfoot td{
	font-size:36px;
	color:#EF870E;
	border-top:none;
	border-bottom:3px solid #666;
	-moz-box-shadow:0px 1px 4px #000;
	-webkit-box-shadow:0px 1px 4px #000;
	box-shadow:0px 1px 4px #000;
}
thead th:empty{
	background:transparent;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}
thead :nth-last-child(1){
	border-right:none;
}
thead :first-child,
tbody :nth-last-child(1){
	border:none;
}
tbody th{
	text-align:right;
	padding:10px;
	color:#333;
	text-shadow:1px 1px 1px #ccc;
	background-color:#f9f9f9;
}
tbody td{
	padding:10px;
	background-color:#f0f0f0;
	border-right:1px dotted #999;
	text-shadow:-1px 1px 1px #fff;
	text-transform:uppercase;
	color:#333;
}
tbody span.check::before{
	content : url(check1.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