Louisville Web Design - Online Stores
Marketing - Advertising
Payment Processing Solutions
Business Integration - Intranet Portal
Custom Software - Mobile Apps
Increase Your Profit Margin

Website Design Company

Business Integration Made Easy!

Phone: +1 (502) 439-8692
This email address is being protected from spambots. You need JavaScript enabled to view it.

How to Use MooTools HTMLTable

I use MooTools HTMLTable class to show the database data on websites.

The MooTools HTML Table Class make it easy to do the following on your website:

  • Easily style the HTML table.
  • Populate the HTML table website from the database.
  • Zebra option for the HTML table website.  Every other row colored.
  • Sorting options for the HTML table website
  • Scrolling HTML table website
  • Selectable Rows

 Setting up the CSS Class Style

There are a couple of different things that need to be put into the CSS stylesheet to correctly format and style the HTML table.

Here is the CSS style that I generally use for the MooTools HTML table

There are specific class names that MooTools HTML table uses

.table-tr-odd
This is the class that makes the Zebra effect for the table.  You can specify any color you want.  This class must be created in your CSS stylesheet or the zebra effect wont take palce.
.table-tr-sort
This is the class that makes the Sort Indicator for the table.  You can specify any color you want.  This class must be created in your CSS stylesheet or the sort style to take effect.  It makes the column header that you are sorting by this style.
.table-tr-selected
This is the class for the selected row style.  Multiple rows can be selected.  You can specify any color you want.  This class must be created in your CSS stylesheet or the selected style to take effect.
.table-tr-hovered
This is the class that makes the mouse hover Indicator for the table.  You can specify any color you want.  This class must be created in your CSS stylesheet or the sort style to take effect.
.results_table
This is a non MooTools Class.  This is part of the formatting for the html tables that I use on websites.  It just sets up the table style.
.results_table_th
This is a non MooTools Class.  I use this class to setup the table header.
.results_table_td
This is a non MooTools Class.  I use this class to setup the table cells.
.results_table_tbody
This is a non MooTools Class.  I use this class to setup the table body.  This allows the body to be "scrollable".
.results_table_thead
This is a non MooTools Class.  I use this class to setup the table header.  This allows the body to be "scrollable".

 

.table-tr-odd{
	background-color:#DFE2FF;	
}
.table-th-sort{
	color:#EE671B;
	font-weight:bold;
}
.table-tr-selected{
	background-color:#9EC27A;
	font-style:bold;
	color:#FFFFFF;
}
.table-tr-hovered{
	background-color:#9EC27A;
}
.results_table{
	text-align:left;
	border:1px solid #999;
	width:700px;
}
.results_table th{
	padding:2px;
	padding-left:2px;
	padding-right:2px;
	border-bottom: 1px solid black;
	width:140px;
}
.results_table td{
	padding:2px;
	padding-left:3px;
	padding-right:3px;
	font-size:10pt;
	width:140px;	
}
.results_table tbody { 
	font-size:10pt;
	width: 100%;
	height:200px;
	overflow-y:scroll;
	display:block;
}
.results_table thead {
	width: 100%;
	display:block;
}

 

Initializing MooTools HTMLTable Javascript

You need to initialize the HTMLTable in Javascript

You can use the following code snipit to setup the Table

window.addEvent('domready', function(){
	webTable = new HtmlTable('website_table',{selectable:true, zebra:true, sortable:true, sortIndex:1});
	
});

 

You will also need to setup the HTML table on your website

<table id="website_table" class="results_table">
<thead>
<tr>
<th>Date</th>
<th>Marketing</th>
<th>Customer</th>
<th>Region</th>
<th>Price</th>
</tr>
</thead>
</table>

 

Website Design by iMarketing Solutions