====== Table Design ======

Designing HTML tables with sorting, filtering, fixed headers, zebra colour feature and so on.

===== Favorites =====

These approaches have proved most promising to me...

  * [[http://aktuell.de.selfhtml.org/artikel/javascript/scrolltabelle/|Übergroße Tabellen in koordiniert scrollenden Frames]]
  * [[http://www.javascripttoolbox.com/lib/table/|www.javascripttoolbox.com]] -- Table Sorting, Filtering, Etc.
  * http://www.imaputz.com/cssStuff/bigFourVersion.html -- Pure CSS Scrollable Table with Fixed Header. Using CSS to allow scrolling within a single HTML table
  * http://www.imaputz.com/cssStuff/bulletVersion.html -- (Almost) Pure CSS Scrollable Table with Fixed Header. The Bullet Resistant Version. Probably the most often referenced solution in the WWW.

===== Examples =====

  * [[http://freepages.rootsweb.ancestry.com/~bristowe/test/fixed-header-2.html|Scrollable Table with Fixed Header]]
  * [[http://www.pmob.co.uk/temp/table-fixed-header-example.htm|Table with fixed header in IE6 - 8, Firefox 2.+, Safari 3 and Opera 9.5+]]
  * [[http://www.kollermedia.at/archive/2007/04/12/25-sortable-table-scripts/|www.kollermedia.at]] -25 Sortable Table Scripts
  * [[http://icant.co.uk/csstablegallery/|Data Tables and Cascading Style Sheets Gallery]]
  * [[http://www.onsemi.com/PowerSolutions/parametrics.do?id=197|www.onsemi.com]] provide a most sophisticated table example.

===== Tutorials =====

  * [[http://cssplay.co.uk/menu/tablescroll.html|Stu Nicholls | CSSplay | CSS scrolling tables]]
  * [[http://imar.spaanjaars.com/QuickDocId.aspx?quickdoc=357|Imar.Spaanjaars.Com]] -- A Scrollable Table With a Fixed Header
  * [[http://www.ssi-developer.net/css/non-scrolling-table-hdr.shtml|SSI-Developer.net]] -- CSS Guides: Non-scrolling table header
  * [[http://www.matts411.com/post/super_tables/|Super Tables]] -- HTML Tables with Fixed Headers and More.

<WRAP important center>
Many plain HTML/CSS approaches suffer from the need to have a fixed width specified to the columns.\\ However using automatic width will result in column width running out of sync for header and body.
</WRAP>

==== Libraries ====

  * [[https://github.com/koalyptus/TableFilter/|TableFilter]] -- A Javascript library making HTML tables filterable

  * www.datatables.net -- DataTables is a plug-in for the jQuery Javascript library which will add advanced interaction controls to any HTML table.
  * www.activewidgets.com -- A comercial CSS/JS/AJAX library solution. Also with sortable columns!\\ <wrap tip>Want to know how to resize fixed rowheader with the mouse? Look [[http://www.activewidgets.com/javascript.forum.11203.0/how-to-resize-fixed-rowheader.html|here]].</wrap>

  * [[http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml|www.dhtmlx.com]]\\ AJAX powered editable DHTML JavaScript Grid. Heavy CSS/JS/AJAX library suitable for handling large tables up to ten thousands of rows.

  * [[https://www.thoughtco.com/free-web-template-calendar-layout-3467747|Free Web Template: Calendar Layout]]

===== Tips and Tricks =====

  * [[http://forum.websitegear.com/post/view/456|Highlight table row on mouseover]]
  * [[http://www.dhtmlgoodies.com/index.html?showDownload=true&whichScript=highlight_table_row|Highlight Table Rows On Mouse Over]]
  * [[http://www.webreference.com/js/column40/navigatetable.html|Navigating a Table]] – The Document Object Model (DOM)
  * [[http://www.java2s.com/Code/JavaScript/Table/Tablewidth.htm|JavaScript DHTML » Table » Table Layout » Table width]]