File size: 22.48Kb
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>BLOCKS - Bootstrap Dashboard Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<!-- DATA TABLE CSS -->
<link href="http://www.prepbootstrap.com/Content/css/single-page-admin/table.css" rel="stylesheet">
<script type="text/javascript" src="http://www.prepbootstrap.com/Content/js/single-page-admin/bootstrap.js"></script>
<script type="text/javascript" src="http://www.prepbootstrap.com/Content/js/single-page-admin/admin.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
body {
padding-top: 60px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Google Fonts call. Font Used Open Sans -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<!-- DataTables Initialization -->
<script type="text/javascript" src="http://www.prepbootstrap.com/Content/js/single-page-admin/datatables/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#dt1').dataTable();
});
</script>
</head>
<body>
<!-- NAVIGATION MENU -->
<div class="navbar-nav navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="http://www.prepbootstrap.com/Content/images/shared/single-page-admin/logo30.png" alt=""> BLOCKS Dashboard</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html"><i class="icon-home icon-white"></i> Home</a></li>
<li class="active"><a href="tables.html"><i class="icon-th icon-white"></i> Tables</a></li>
<li><a href="login.html"><i class="icon-lock icon-white"></i> Login</a></li>
<li><a href="user.html"><i class="icon-user icon-white"></i> User</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<!-- CONTENT -->
<div class="row">
<div class="col-sm-12 col-lg-12">
<h4><strong>Basic Table</strong></h4>
<table class="display">
<thead>
<tr>
<th>Band or Group</th>
<th>Name</th>
<th>Instrument</th>
<th>Influence</th>
<th>Awesome</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Queen</td>
<td>Brian May</td>
<td>Guitar</td>
<td class="center"> 7</td>
<td class="center">9</td>
</tr>
<tr class="even">
<td>Queen</td>
<td>Roger Taylor</td>
<td>Drums</td>
<td class="center">5</td>
<td class="center">7</td>
</tr>
<tr class="odd">
<td>Beatles</td>
<td>Paul McCartney</td>
<td>Guitar & Piano</td>
<td class="center">8</td>
<td class="center">9</td>
</tr>
<tr class="even">
<td>Adele</td>
<td>Adele</td>
<td>None</td>
<td class="center">8</td>
<td class="center">8</td>
</tr>
<tr class="odd">
<td>Britney Spears</td>
<td>Britney Spears</td>
<td>None</td>
<td class="center">7</td>
<td class="center">-5</td>
</tr>
</tbody>
</table><!--/END First Table -->
<br>
<!--SECOND Table -->
<h4><strong>Data Table</strong></h4>
<table class="display" id="dt1">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
</table><!--/END SECOND TABLE -->
</div><!--/span12 -->
</div><!-- /row -->
</div> <!-- /container -->
<br>
<div class="container">
<h4><strong>Pure CSS Price Table</strong></h4>
<div class="row">
<div class="col-sm-3 col-lg-3">
<div id="hosting-table">
<div class="table_style4">
<div class="column">
<ul>
<li><strong>Select Your Plan</strong></li>
<li class="header_row">
<h1>Free</h1>
</li>
<li>Disk Space 500 MB <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief. It has roots in a classical Latin</span></span></a></li>
<li>Bandwidth Unmetered</li>
<li>Setup Free <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Do your layouts deserve better than Lorem Ipsum?</span></span></a></li>
<li>1 Free Email Accounts</li>
<li>1 FTP Accounts <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Apply as an art than director Do your</span></span></a></li>
<li>Half Privacy</li>
<li class="footer_row"><a href="#" class="hosting-button">Add To Cart</a></li>
</ul>
</div><!--/ column-->
</div><!--/ Table Style-->
</div><!--/ Hosting Table-->
</div><!-- /span3 -->
<div class="col-sm-3 col-lg-3">
<div id="hosting-table">
<div class="table_style4">
<div class="column">
<ul>
<li><strong>Select Your Plan</strong></li>
<li class="header_row">
<h1>Pro</h1>
</li>
<li>Disk Space 500 MB <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief. It has roots in a classical Latin</span></span></a></li>
<li>Bandwidth Unmetered</li>
<li>Setup Free <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Do your layouts deserve better than Lorem Ipsum?</span></span></a></li>
<li>5 Free Email Accounts</li>
<li>5 FTP Accounts <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Apply as an art than director Do your</span></span></a></li>
<li>Full Privacy</li>
<li class="footer_row"><a href="#" class="hosting-button">Add To Cart</a></li>
</ul>
</div><!--/ column-->
</div><!--/ Table Style-->
</div><!--/ Hosting Table-->
</div><!-- /span3 -->
<div class="col-sm-3 col-lg-3">
<div id="hosting-table">
<div class="table_style4">
<div class="column">
<ul>
<li><strong>Select Your Plan</strong></li>
<li class="header_row">
<h1>Gold</h1>
</li>
<li>Disk Space 2000 MB <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief. It has roots in a classical Latin</span></span></a></li>
<li>Bandwidth Unmetered</li>
<li>Setup Free <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Do your layouts deserve better than Lorem Ipsum?</span></span></a></li>
<li>25 Free Email Accounts</li>
<li>5 FTP Accounts <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Apply as an art than director Do your</span></span></a></li>
<li>Full Privacy</li>
<li class="footer_row"><a href="#" class="hosting-button">Add To Cart</a></li>
</ul>
</div><!--/ column-->
</div><!--/ Table Style-->
</div><!--/ Hosting Table-->
</div><!-- /span3 -->
<div class="col-sm-3 col-lg-3">
<div id="hosting-table">
<div class="table_style4">
<div class="column">
<ul>
<li><strong>Select Your Plan</strong></li>
<li class="header_row">
<h1>Platinum</h1>
</li>
<li>Disk Space 10000 MB <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Contrary to popular belief. It has roots in a classical Latin</span></span></a></li>
<li>Bandwidth Unmetered</li>
<li>Setup Free <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Do your layouts deserve better than Lorem Ipsum?</span></span></a></li>
<li>Unlimited Email Accounts</li>
<li>Unlimited FTP Accounts <a class="tt" href="#">(?)<span class="tooltip"><span class="triangle-obtuse">Apply as an art than director Do your</span></span></a></li>
<li>Full Privacy</li>
<li class="footer_row"><a href="#" class="hosting-button">Add To Cart</a></li>
</ul>
</div><!--/ column-->
</div><!--/ Table Style-->
</div><!--/ Hosting Table-->
</div><!-- /span3 -->
</div><!-- /row -->
</div><!-- /container -->
<br>
<!-- FOOTER -->
<div id="footerwrap">
<footer class="clearfix"></footer>
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12">
<p><img src="http://www.prepbootstrap.com/Content/images/shared/single-page-admin/logo.png"" alt=""></p>
<p>Blocks Dashboard Theme - Crafted With Love - Copyright 2013</p>
</div>
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /footerwrap -->
</body></html>