Incam_MaquetaIntranet/referencia/template/tables.html

684 lines
26 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Styling | Mandy Lane - Premium Admin Template</title>
<link rel="stylesheet" media="screen" href="css/style.css" />
<!--[if IE 9]>
<link rel="stylesheet" media="screen" href="css/ie9.css"/>
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" media="screen" href="css/ie8.css"/>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" media="screen" href="css/ie7.css"/>
<![endif]-->
<script type="text/javascript" src="js/plugins/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/custom/general.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#example').dataTable( {
"sPaginationType": "full_numbers"
});
});
</script>
</head>
<body class="bodygrey">
<div class="headerspace"></div>
<div class="header">
<form id="search" action="" method="post">
<input type="text" name="keyword" /> <button class="searchbutton"></button>
</form>
<div class="topheader">
<ul>
<li class="note">
<a href="pages/message.html" class="messagenotify">
<span class="wrap">
<span class="thicon msgicon"></span>
<span class="count">1</span>
</span>
</a>
</li>
<li class="note">
<a href="pages/info.html" class="alertnotify">
<span class="wrap">
<span class="thicon infoicon"></span>
<span class="count">5</span>
</span>
</a>
</li>
</ul><!--horMenu-->
</div><!--topheader-->
<!--logo-->
<a href=""><img src="images/logo2.png" alt="Logo" /></a>
<div class="tabmenu">
<ul>
<li><a href="dashboard.html" class="dashboard"><span>Dashboard</span></a></li>
<li><a href="elements.html" class="elements"><span>Elements</span></a>
<ul class="subnav">
<li><a href=""><span>Sub Menu One</span></a></li>
<li><a href=""><span>Sub Menu Two</span></a></li>
<li><a href=""><span>Sub Menu Three</span></a></li>
</ul>
</li>
<li><a href="reports.html" class="reports"><span>Reports</span></a></li>
<li><a href="users.html" class="users"><span>Users</span></a></li>
</ul>
</div><!--tabmenu-->
<div class="accountinfo">
<img src="images/avatar.png" alt="Avatar" />
<div class="info">
<h3>John Doe</h3>
<small>youremail@domain.com</small>
<p>
<a href="">Account Settings</a> <a href="index.html">Logout</a>
</p>
</div><!--info-->
</div><!--accountinfo-->
</div><!--header-->
<div class="sidebar">
<div id="accordion">
<h3 class="open">Main Navigation</h3>
<div class="content" style="display: block;">
<ul class="leftmenu">
<li><a href="dashboard.html" class="home">General</a></li>
<li><a href="forms.html" class="form">Form Styling</a></li>
<li class="current"><a href="tables.html" class="table">Table Styling</a></li>
<li><a href="gallery.html" class="gallery">Image Gallery</a></li>
<li><a href="grid.html" class="grid">Grid Styling</a></li>
<li><a href="calendar.html" class="calendar">Calendar</a></li>
<li><a href="buttons.html" class="buttons">Buttons &amp; Icons</a></li>
<li><a href="editor.html" class="editor">WYSIWYG Editor</a></li>
<li><a href="filemanager.html" class="file">File Manager</a></li>
<li><a href="invoice.html" class="form">Invoice</a></li>
<li><a href="404.html" class="error">404 Page</a></li>
</ul>
</div>
<h3 class="open">Custom Text</h3>
<div class="content" style="display: block;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>
<br clear="all" />
</div><!--leftmenu-->
<div class="maincontent">
<div class="breadcrumbs">
<a href="dashboard.html">Dashboard</a>
<span>Table Styling</span>
</div><!-- breadcrumbs -->
<div class="left">
<h1 class="pageTitle">Table Styling</h1>
<div class="sTableOptions">
<h4>Default table using colgroup</h4>
</div><!--sTableOptions-->
<table cellpadding="0" cellspacing="0" class="sTableHead" width="100%">
<colgroup>
<col class="head1" width="25%" />
<col class="head0" width="25%" />
<col class="head1" width="15%" />
<col class="head0" width="10%" />
<col class="head1" width="10%" />
<col class="head0" width="15%" />
</colgroup>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td align="right">Impressions</td>
<td align="right">Percentage</td>
<td>Column 6</td>
</tr>
</table>
<div class="sTableWrapper">
<table cellpadding="0" cellspacing="0" class="sTable" width="100%">
<colgroup>
<col class="con1" width="25%" />
<col class="con0" width="25%" />
<col class="con1" width="15%" />
<col class="con0" width="10%" />
<col class="con1" width="10%" />
<col class="con0" width="15%" />
</colgroup>
<tr>
<td>Row Text 1</td>
<td>Row Text 2</td>
<td>Row Text 3</td>
<td align="right">2 100.00</td>
<td align="right">20%</td>
<td>Row Text 6</td>
</tr>
<tr>
<td>Row Text 1</td>
<td>Row Text 2</td>
<td>Row Text 3</td>
<td align="right">2 100.00</td>
<td align="right">20%</td>
<td>Row Text 6</td>
</tr>
<tr>
<td>Row Text 1</td>
<td>Row Text 2</td>
<td>Row Text 3</td>
<td align="right">2 100.00</td>
<td align="right">20%</td>
<td>Row Text 6</td>
</tr>
<tr>
<td>Row Text 1</td>
<td>Row Text 2</td>
<td>Row Text 3</td>
<td align="right">2 100.00</td>
<td align="right">20%</td>
<td>Row Text 6</td>
</tr>
<tr>
<td>Row Text 1</td>
<td>Row Text 2</td>
<td>Row Text 3</td>
<td align="right">2 100.00</td>
<td align="right">20%</td>
<td>Row Text 6</td>
</tr>
</table>
</div><!--sTableWrapper-->
<br />
<div class="sTableOptions2">
<h4>Static Table</h4>
</div><!--sTableOptions-->
<table cellpadding="0" cellspacing="0" class="sTable2" id="userlist" width="100%">
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td align="right">Impressions</td>
<td align="right">Percentage</td>
<td>Column 6</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row Text 1</td>
<td>Row Text 2</td>
<td>Row Text 3</td>
<td align="right">2 100.00</td>
<td align="right">20%</td>
<td>Row Text 6</td>
</tr>
<tr class="even">
<td>Row Text 1</td>
<td>Row Text 2</td>
<td>Row Text 3</td>
<td align="right">2 100.00</td>
<td align="right">20%</td>
<td>Row Text 6</td>
</tr>
<tr>
<td>Row Text 1</td>
<td>Row Text 2</td>
<td>Row Text 3</td>
<td align="right">2 100.00</td>
<td align="right">20%</td>
<td>Row Text 6</td>
</tr>
<tr class="even">
<td>Row Text 1</td>
<td>Row Text 2</td>
<td>Row Text 3</td>
<td align="right">2 100.00</td>
<td align="right">20%</td>
<td>Row Text 6</td>
</tr>
<tr>
<td>Row Text 1</td>
<td>Row Text 2</td>
<td>Row Text 3</td>
<td align="right">2 100.00</td>
<td align="right">20%</td>
<td>Row Text 6</td>
</tr>
</tbody>
</table>
<br /><br />
<table cellpadding="0" cellspacing="0" border="0" class="dyntable" id="example">
<thead>
<tr>
<th class="head0">Rendering engine</th>
<th class="head1">Browser</th>
<th class="head0">Platform(s)</th>
<th class="head1">Engine version</th>
<th class="head0">CSS grade</th>
</tr>
</thead>
<colgroup>
<col class="con0" />
<col class="con1" />
<col class="con0" />
<col class="con1" />
<col class="con0" />
</colgroup>
<tbody>
<tr class="gradeX">
<td class="con0">Trident</td>
<td class="con1">
Internet
Explorer
4.0
</td>
<td class="con0">Win 95+</td>
<td class="center con1">4</td>
<td class="center con0">X</td>
</tr>
<tr class="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="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="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="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="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>
</tbody>
<tfoot>
<tr>
<th class="head0">Rendering engine</th>
<th class="head1">Browser</th>
<th class="head0">Platform(s)</th>
<th class="head1">Engine version</th>
<th class="head0">CSS grade</th>
</tr>
</tfoot>
</table>
</div><!--left-->
<br clear="all" />
</div><!--maincontent-->
<br />
<div class="footer footer_float">
<div class="footerinner">
&copy; 2011. Mandy Lane Premium Template. All Rights Reserved.
</div><!-- footerinner -->
</div><!-- footer -->
</body>
</html>