Kursus Membuat Web

iklan

Membuat Tabel CSS 5

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">
		<link rel="stylesheet" type="text/css" href="reset.css" media="all">
	</head>
	<body>
	<div id="pageContainer">
		<div id="tableContainer">
			<div class="tableCell">
				<div class="tableHeading">
					<h2>Basic</h2>
						<div class="price1 priceContainer">
							<p>$9<sup>.00</sup></p>
							<span>per month</span>
						</div> <!-- end price1 -->
				</div> <!-- end tableHeading -->
			</div>
  
			<div class="tableCell">
				<div class="tableHeading">
					<h2>Corporate</h2>
						<div class="price2 priceContainer">
							<p>$14<sup>.00</sup></p>
							<span>per month</span>
						</div> <!-- end price1 -->
				</div> <!-- end tableHeading -->
			</div>
  
			<div class="tableCell recommended">
				<div class="tableHeading">
					<h2>Business</h2>
					<div class="price3 priceContainer">
						<p>$29<sup>.00</sup></p>
						<span>per month</span>
					</div> <!-- end price1 -->
				</div> <!-- end tableHeading -->
			</div>
			
			<div class="tableCell noBorder">
				<div class="tableHeading">
					<h2>Platinum</h2>
					<div class="price4 priceContainer">
						<p>$59<sup>.00</sup></p>
						<span>per month</span>
					</div> <!-- end price1 -->
				</div> <!-- end tableHeading -->
			</div>
		<div class="cl"><!-- --></div>
  
		<table class="pricingTableContent">
			<tr class="signUpRow">
				<td><a href="#" class="signUpButton">Sign Up</a></td>
				<td><a href="#" class="signUpButton">Sign Up</a></td>
				<td class="recommended"><a href="#" class="signUpButton">Sign Up</a></td>
				<td class="noBorder"><a href="#" class="signUpButton">Sign Up</a></td>
			</tr>
			<!-- Table Content -->
			<tr>
				<td><strong>100MB</strong> Disk Space</td>
				<td><strong>300MB</strong> Disk Space</td>
				<td class="recommended"><strong>1GB</strong> Disk Space</td>
				<td class="noBorder"><strong>5GB</strong> Disk Space</td>
			</tr>
			<tr class="altRow">
				<td><strong>200MB</strong> Monthly Traffic</td>
				<td><strong>400MB</strong> Monthly Traffic</td>
				<td class="recommended"><strong>1GB</strong> Monthly Traffic</td>
				<td class="noBorder"><strong>Unlimited</strong> Monthly Traffic</td>
			</tr>
			<tr>
				<td><strong>2</strong> Subdomains</td>
				<td><strong>5</strong> Subdomains</td>
				<td class="recommended"><strong>10</strong> Subdomains</td>
				<td class="noBorder"><strong>Unlimited</strong> Subdomains</td>
			</tr>
			<tr class="altRow">
				<td><strong>5</strong> Email Accounts</td>
				<td><strong>10</strong> Email Accounts</td>
				<td class="recommended"><strong>25</strong> Email Accounts</td>
				<td class="noBorder"><strong>Unlimited</strong> Email Accounts</td>
			</tr>
			<tr>
				<td>Webmail Support</td>
				<td>Webmail Support</td>
				<td class="recommended">Webmail Support</td>
				<td class="noBorder">Webmail Support</td>
			</tr>
			<tr class="altRow">
				<td>MySQL Support</td>
				<td>MySQL Support</td>
				<td class="recommended">MySQL Support</td>
				<td class="noBorder">MySQL Support</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>PHP5 Support</td>
				<td class="recommended">PHP5 Support</td>
				<td class="noBorder">PHP5 Support</td>
			</tr>
			<tr class="altRow">
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td class="recommended">Plesk Control Panel</td>
				<td class="noBorder">Plesk Control Panel</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td class="recommended">&nbsp;</td>
				<td class="noBorder">Spam Assassin</td>
			</tr>
			<!-- Table Footer -->
			<tfoot>
			<tr>
				<td>
					<h4>$9<sup>.00</sup></h4>
					<span>per month</span>
					<a href="#" class="signUpButton">Sign Up</a>
				</td>
				<td>
					<h4>$14<sup>.00</sup></h4>
					<span>per month</span>
					<a href="#" class="signUpButton">Sign Up</a>
				</td>
				<td class="recommended">
					<h4>$29<sup>.00</sup></h4>
					<span>per month</span>
					<a href="#" class="signUpButton">Sign Up</a>
				</td>
				<td class="noBorder">
					<h4>$59<sup>.00</sup></h4>
					<span>per month</span>
					<a href="#" class="signUpButton">Sign Up</a>
				</td>
			</tr>
			</tfoot>
		</table>  
		</div> <!-- end tableContainer -->
	</div> <!-- end pageContainer -->
	</body>
</html>

Source Code CSS

Selanjutnya buat kode CSS 3 sebagai berikut

reset.css
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { 
	margin:0; 
	padding:0 
}
table { border-collapse:collapse;
	border-spacing:0 }
fieldset, img { 
	border:0
}
address, caption, cite, code, dfn, em, strong, th, var { 
	font-style:normal; 
	font-weight:normal
}
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%;
	font-weight:normal 
}
q:before, q:after { content:''}
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } 
sup { font-size: 50%; }
a, a:hover { text-decoration: none; }
tabel.css

/* ---------- General Styles ---------- */

body {
	font-family: "PT Sans", "Arial", sans-serif;
	font-size: 14px;
	line-height: 1.3em;
}
.cl { clear: left; }

/* ---------- Temporary (this is for the page wrapper only; delete this when 
including the pricing table into your own website) ---------- */

div#pageContainer {
	width: 960px;
	margin: 0 auto; 
	padding-top: 100px;
}

/* ---------- Price Container Styles ---------- */
div.priceContainer {
	margin: 0 auto;
	font-family: "Oswald", "Arial", sans-serif;
	color: #31b4b6;
}

div.priceContainer span {
	font-size: 12px;
	color: #a1a7b0;
}
  
div.price1 {
	background: url("img/price1BG.png") top center no-repeat;
	width: 112px;
	height: 112px; 
	margin-top: 36px;
	font-size: 24px;
}

div.price1 p { padding-top: 30px; }
div.price2 {
	background: url("img/price2BG.png") top center no-repeat;
	width: 122px;
	height: 122px;
	margin-top: 31px;
	font-size: 28px;
}

div.price2 p { padding-top: 35px; }
div.price3 {
	background: url("img/price3BG.png") top center no-repeat;
	width: 132px;
	height: 132px;
	margin-top: 26px;
	font-size: 32px;
}

div.price3 p { padding-top: 40px; }
div.price4 {
	background: url("img/price4BG.png") top center no-repeat;
	width: 142px;
	height: 142px;
	margin-top: 21px;    
	font-size: 36px;
}

div.price4 p { padding-top: 45px; }

/* ---------- Pricing Table Styles ---------- */
div#tableContainer {
	border: 1px solid #e2e7eb;
	padding: 1px; 
	background: url("img/tableBottomBG.png") left bottom repeat-x;
}

div.tableCell {
	border-right: 1px solid #616365;
	width: 238px;
	float: left; 
	text-align: center; 
}

table.pricingTableContent { width: 100%; }
td {
	text-align: center;
	vertical-align: middle;
	width: 238px;
	border-right: 1px solid #e2e7eb;
	color: #77808a;
}
  
.noBorder { border-right: none; }
  
div.tableHeading {
	background: #3a3c3f url("img/headingPattern.png");
	padding-top: 25px;
	height: 111px;
}

div.tableHeading h2 {
	font-family: "Oswald", "Arial", sans-serif;
	font-size: 20px; 
	color: white;
}

table.pricingTableContent tr td { padding: 10px 0; }
table.pricingTableContent tr.altRow td { background-color: #f5f5f5; }
table.pricingTableContent tr.signUpRow td { padding: 75px 0 20px 0; }
table.pricingTableContent td strong { color: #424447; }
table.pricingTableContent tfoot td {
	border-top: 1px solid #e2e7eb;
	padding: 25px 0;
}

table.pricingTableContent tfoot td h4 {
	color: #3a3c3f;
	font-size: 18px;
}

table.pricingTableContent tfoot td span {
	display: block;
	font-size: 12px;
	color: #a1a7b0;
	margin-bottom: 15px;
} 

/* ---------- Recommended Plan Styles ---------- */
div.recommended .tableHeading, td.recommended {
	background: #3a3c3f;
	color: #b4bac4;
}

div.recommended .tableHeading {
	background: #3a3c3f url("img/recommendationBadge.png") top left no-repeat;
	margin-top: -20px;
	padding-top: 45px;
}
  
table.pricingTableContent tr.altRow td.recommended { background-color: #46494c; }
table.pricingTableContent td.recommended strong, table.pricingTableContent tfoot td.recommended h4 { color: white; }  
table.pricingTableContent tfoot td.recommended { border-top: 1px solid #4f5357; }
  
div.recommended .price1 { background: url("img/price1BGRecommended.png") top center no-repeat; }
div.recommended .price2 { background: url("img/price2BGRecommended.png") top center no-repeat; }
div.recommended .price3 { background: url("img/price3BGRecommended.png") top center no-repeat; }
div.recommended .price4 { background: url("img/price4BGRecommended.png") top center no-repeat; }

/* ---------- Button Styles ---------- */
	a.signUpButton {
	color: white;
	border: 1px solid #63b13d;
	font-weight: bold;
	padding: 8px 20px;
	display: inline-block; 
	background-color: #72ce3f; /* Fallback Color */
	background: -moz-linear-gradient(top, #72cf3f, #60bb2d); /* FF 3.6+ */
	background: -webkit-linear-gradient(top, #72cf3f, #60bb2d); /* Safari 5.1+, Chrome 10+ */
}

a.signUpButton:hover {
	background-color: #79db43; /* Fallback Color */
	background: -moz-linear-gradient(top, #79db43, #66c730); /* FF 3.6+ */
	background: -webkit-linear-gradient(top, #79db43, #66c730); /* Safari 5.1+, Chrome 10+ */
}

/* ---------- Browser Compatibility Fixes ---------- */
.ie7 .price1 p { padding-top: 25px; }
.ie7 .price2 p { padding-top: 30px; }
.ie7 .price3 p { padding-top: 30px; }
.ie7 .price4 p { padding-top: 35px; }
.ie7 .priceContainer span { display: inline-block; }
.ie7 div.recommended .tableHeading {
  z-index: 100;
  position: relative;
}
.ie7 table.pricingTableContent tr.signUpRow td.recommended { z-index: 10; }
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