Permalink
Browse files

new tables

  • Loading branch information...
1 parent c5e341c commit 914a6d68090a467979eb1e2dcd7f7f9ac7f738dc @justinhough committed Jun 21, 2013
Showing with 549 additions and 0 deletions.
  1. +549 −0 _tables.html
View
549 _tables.html
@@ -0,0 +1,549 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<title></title>
+<style>
+ body {
+ font-size: 15px;
+ }
+
+ /* Tables */
+ table {
+ background: white;
+ border-collapse: collapse;
+ border-spacing: 0;
+ color: #333333;
+ margin: 15px 0;
+ width: 100%;
+ }
+
+ thead,
+ tfoot {
+ font-size: 1em;
+ line-height: 1.5;
+ padding: 5px 10px;
+ text-align: left;
+ }
+ thead tr th,
+ thead tr td,
+ tfoot tr th,
+ tfoot tr td {
+ background-color: #999999;
+ color: white;
+ font-weight: bold;
+ padding: 5px 10px;
+ }
+
+ tbody tr,
+ tbody td {
+ padding: 5px 10px;
+ }
+ tbody tr.odd {
+ background-color: white;
+ }
+ tbody tr.even {
+ background-color: #ededed;
+ }
+
+ .table-orange thead tr th,
+ .table-orange thead tr td,
+ .table-orange tfoot tr th,
+ .table-orange tfoot tr td {
+ background-color: #fb9d23;
+ }
+ .table-orange tbody tr.odd {
+ background-color: white;
+ }
+ .table-orange tbody tr.even {
+ background-color: #fceabb;
+ }
+
+ .table-blue thead tr th,
+ .table-blue thead tr td,
+ .table-blue tfoot tr th,
+ .table-blue tfoot tr td {
+ background-color: #356aa0;
+ }
+ .table-blue tbody tr.odd {
+ background-color: white;
+ }
+ .table-blue tbody tr.even {
+ background-color: #deefff;
+ }
+
+ .table-yellow thead tr th,
+ .table-yellow thead tr td,
+ .table-yellow tfoot tr th,
+ .table-yellow tfoot tr td {
+ background-color: #f8b500;
+ }
+ .table-yellow tbody tr.odd {
+ background-color: white;
+ }
+ .table-yellow tbody tr.even {
+ background-color: #fcefcf;
+ }
+
+ .table-red thead tr th,
+ .table-red thead tr td,
+ .table-red tfoot tr th,
+ .table-red tfoot tr td {
+ background-color: #cc0000;
+ }
+ .table-red tbody tr.odd {
+ background-color: white;
+ }
+ .table-red tbody tr.even {
+ background-color: #ffcece;
+ }
+
+ .table-green thead tr th,
+ .table-green thead tr td,
+ .table-green tfoot tr th,
+ .table-green tfoot tr td {
+ background-color: #299a0b;
+ }
+ .table-green tbody tr.odd {
+ background-color: white;
+ }
+ .table-green tbody tr.even {
+ background-color: #dde8c7;
+ }
+
+ .table-black thead tr th,
+ .table-black thead tr td,
+ .table-black tfoot tr th,
+ .table-black tfoot tr td {
+ background-color: black;
+ }
+ .table-black tbody tr.odd {
+ background-color: white;
+ }
+ .table-black tbody tr.even {
+ background-color: #dbdbdb;
+ }
+
+ .rounded thead th:first-child {
+ -moz-border-radius-topleft: 6px;
+ -webkit-border-top-left-radius: 6px;
+ border-top-left-radius: 6px;
+ }
+ .rounded thead th:last-child {
+ -moz-border-radius-topright: 6px;
+ -webkit-border-top-right-radius: 6px;
+ border-top-right-radius: 6px;
+ }
+ .rounded tfoot th:first-child {
+ -moz-border-radius-bottomleft: 6px;
+ -webkit-border-bottom-left-radius: 6px;
+ border-bottom-left-radius: 6px;
+ }
+ .rounded tfoot th:last-child {
+ -moz-border-radius-bottomright: 6px;
+ -webkit-border-bottom-right-radius: 6px;
+ border-bottom-right-radius: 6px;
+ }
+
+
+
+ /* Additions to Tables */
+ tr {
+ border-bottom: 1px solid #DEDEDE;
+ }
+ .striped-row td {
+ background-color: #EDEDED;
+ }
+ .striped-col {
+ background-color: #EDEDED;
+ }
+ .hover {
+ background-color: #EFEFEF;
+ cursor: cell;
+ }
+ .active {
+ background-color: #e1e1e1;
+ }
+
+
+</style>
+
+ <!-- http://css-tricks.com/row-and-column-highlighting/ -->
+
+</head>
+
+<body>
+
+ <h2>Row Striping</h2>
+ <table class='table-orange row-stripe'>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+
+ <thead>
+ <tr>
+ <th>tHead</th>
+ <th>tHead</th>
+ <th>tHead</th>
+ <th>tHead</th>
+ <th>tHead</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ </tr>
+ </tfoor>
+
+ <tbody>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+
+ </tbody>
+ </table>
+
+
+ <h2>Column Striping</h2>
+ <table class='table-blue col-stripe'>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+
+ <thead>
+ <tr>
+ <th>tHead</th>
+ <th>tHead</th>
+ <th>tHead</th>
+ <th>tHead</th>
+ <th>tHead</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ </tr>
+ </tfoor>
+
+ <tbody>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+
+ </tbody>
+ </table>
+
+ <h2>Highlight Columns and Rows</h2>
+ <table class='table-black table-highlight'>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+ <colgroup></colgroup>
+
+ <thead>
+ <tr>
+ <th>tHead</th>
+ <th>tHead</th>
+ <th>tHead</th>
+ <th>tHead</th>
+ <th>tHead</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ <th>tFoot</th>
+ </tr>
+ </tfoor>
+
+ <tbody>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+ <tr>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ <td>Text</td>
+ </tr>
+
+ </tbody>
+ </table>
+
+
+<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
+<script>
+(function($){
+
+ // Table Row Striping
+ $.fn.tableRows = function(options) {
+ var defaults = {
+ hoverClass: 'striped-row'
+ };
+ options = $.extend(defaults, options);
+
+ return this.each(function() {
+ var $o, $obj;
+
+ $o = options;
+ $obj = $(this);
+ $($obj).each(function(){
+ $('tbody tr:nth-child(odd)', this).addClass($o.hoverClass);
+ });
+ });
+ };
+
+ // Table Column Striping
+ $.fn.tableColumns = function(options) {
+ var defaults = {
+ hoverClass: 'striped-col'
+ };
+ options = $.extend(defaults, options);
+
+ return this.each(function() {
+ var $o, $obj;
+
+ $o = options;
+ $obj = $(this);
+ $($obj).each(function(){
+ $('tbody td:nth-child(even):not(:first-child)', this).addClass($o.hoverClass);
+ });
+ });
+ };
+
+ // Table Highlght Row and Column
+ $.fn.tableHighlight = function(options) {
+ var defaults = {
+ hoverClass: 'hover'
+ };
+ options = $.extend(defaults, options);
+
+ return this.each(function() {
+ var $o, $obj;
+
+ $o = options;
+ $obj = $(this);
+
+ $($obj).delegate('td','mouseover mouseleave', function(e) {
+ $table = $(this).closest('table');
+ $column = $(this).parent().children().index($(this));
+ $hover = 'tr td:nth-child('+($column+1)+')';
+ $active = 'active';
+
+ if (e.type == 'mouseover') {
+ $(this).addClass($active);
+ $(this).parent().addClass($o.hoverClass);
+ $($hover, $table).addClass($o.hoverClass);
+ }
+ else {
+ $(this).removeClass($active);
+ $(this).parent().removeClass($o.hoverClass);
+ $($hover, $table).removeClass($o.hoverClass);
+ }
+ });
+ });
+ };
+})(jQuery);
+
+
+// Centurion Defaults
+function centurion(){
+ $('.row-stripe').tableRows();
+ $('.col-stripe').tableColumns();
+ $('.table-highlight').tableHighlight();
+}
+
+// Initialize Centurion Defaults
+$(function(){ centurion(); });
+
+
+
+/* OLD METHOD
+(function($){
+$.fn.extend({
+ tableRows: function(options) {
+ var defaults = {
+ hoverClass: 'striped-row'
+ };
+ options = $.extend(defaults, options);
+
+ return this.each(function() {
+ var $o, $obj;
+
+ $o = options;
+ $obj = $(this);
+ $($obj).each(function(){
+ $('tbody tr:nth-child(odd)', this).addClass($o.hoverClass);
+ });
+ });
+ }
+ });
+
+ $.fn.extend({
+ tableColumns: function(options) {
+ var defaults = {
+ hoverClass: 'striped-col'
+ };
+ options = $.extend(defaults, options);
+
+ return this.each(function() {
+ var $o, $obj;
+
+ $o = options;
+ $obj = $(this);
+ $($obj).each(function(){
+ $('tbody td:nth-child(even):not(:first-child)', this).addClass($o.hoverClass);
+ });
+ });
+ }
+ });
+
+ $.fn.extend({
+ tableHighlight: function(options) {
+ var defaults = {
+ hoverClass: 'hover'
+ };
+ options = $.extend(defaults, options);
+
+ return this.each(function() {
+ var $o, $obj;
+
+ $o = options;
+ $obj = $(this);
+
+ $($obj).delegate('td','mouseover mouseleave', function(e) {
+ $table = $(this).closest('table');
+ $column = $(this).parent().children().index($(this));
+ $hover = 'tr td:nth-child('+($column+1)+')';
+ $active = 'active';
+
+ if (e.type == 'mouseover') {
+ $(this).addClass($active);
+ $(this).parent().addClass($o.hoverClass);
+ $($hover, $table).addClass($o.hoverClass);
+ }
+ else {
+ $(this).removeClass($active);
+ $(this).parent().removeClass($o.hoverClass);
+ $($hover, $table).removeClass($o.hoverClass);
+ }
+ });
+ });
+ }
+ });
+})(jQuery);
+*/
+
+
+
+</script>
+
+
+</body>
+</html>

0 comments on commit 914a6d6

Please sign in to comment.