align-column

jQuery table formatting plugin for decimal alignment and other prettifying of table columns.

Features

Transform hard-to-compare right-aligned numeric tables:

to easier to read:

Center based on characters besides a decimal separator:

Scientific tables can be much improved:

Usage

  <script type="text/javascript" src=".../jquery...min.js"></script>
  <script type="text/javascript" src=".../jquery.align-column.js"></script>

To align numeric columns of an HTML table, use:

  $('table').alignColumn(3); // column index

Multiple columns can be aligned at once:

  $('table').alignColumn([4,5]);

By default, columns are aligned by the decimal point (or a best guess as to where it is). To center by some other character or characters:

  $('table').alignColumn(2, {center: ':'});

Examples

• Wikipedia table of chemical elements
• Table 4.4.4, p. 72 from The Elements of Typographic Style

References and Related Projects

• Blog Post with the Story Behind the Plugin
• TextAlign: http://www.bramstein.com/projects/text-align/ This project has very much the same goal, and looks like an excellent choice. The main difference is the technique-- it uses spans to align the text, whereas alignColumn uses the table cells themselves.
• An older post takes a different approach to support CSS properties: http://krijnhoetmer.nl/stuff/javascript/table-align-char/