When the widget completes the alignment, it is basically splitting the content of the table cell into two halves, and wrapping it in a span element. Below is an example of a modified cell showing all contents; it's from the "Animals" column (the cell that contains "Ox = stinky")

<td>
	<span class="ts-align-wrap">
		<span class="ts-align-left" style="min-width:37%">Ox&nbsp;</span>
		<span class="ts-align-right" style="min-width:63%">=&nbsp;stinky</span>
	</span>
</td>

When this option is set with some HTML:

alignChar_wrap : '<i/>'

it results in this layout:

<td>
	<span class="ts-align-wrap">
		<span class="ts-align-left" style="min-width:37%">Ox&nbsp;</span>
		<span class="ts-align-right" style="min-width:63%">
			<i>=</i>&nbsp;stinky
		</span>
	</span>
</td>

Add it to the header as follows:

<th data-align-char=".">Numeric</th>

The data-align-char data-attribute contains the actual character to align. There is no default alignment character, so if this data-attribute is undefined, the column will be ignored.

*NOTE* if wanting to align the content on a space (see the "AlphaNumeric" column), use   instead of a regular space because all spaces within the content are replaced by non-breaking spaces.

<th data-align-char="&nbsp;">AlphaNumeric</th>

• What that means is if your data has multiple periods, like in the URLs of the sites column below, you can tell the widget which period to line-up on.
• The alignment may seem to act incorrectly, if your data doesn't have enough periods to line up on, but it's doing the best it can! For example, in the sites column below, a table cell contains "rental.nytimes.com/index.html". This URL has three periods, while all other cells in that column only contain two. When the data-align-index is set to "3", the widget aligns the content on that third period. All of the other columns only have two, so they all align on their last period. Does that make it clear?
• Try adjusting the sliders in this demo to change the data-align-index of the "Animals" and "Sites" columns to see how this works.

Add this attribute to the header as follows:

<th data-align-char="=" data-align-index="1">Animals</th>

The data-align-index data-attribute contains the actual character index. The index defaults to "1" if this data-attribute is undefined.

• Here is an example of a modified cell showing its contents; it's from the "Numeric" column (the cell that contains "87.20000"):

  <td>
  		<span class="ts-align-wrap">
  			<span class="ts-align-left" style="min-width:36%">87</span>
  			<span class="ts-align-right" style="min-width:64%">.20000</span>
  		</span>
  	</td>

  As you can see, the "87" (integer-part) is in a "ts-align-left" span, set with a text-align: right; (it's on the left, but right aligned)
  The ".20000" (fractional-part) is in a "ts-align-right" span, set with a text-align: left; (opposite of the other one)!
  
• So in the above example, the left side is set to a width of "36%" and the right to "64%" (adding up to 100%), which "sort-of" centers the aligned character.
• If you don't want to move the position of the aligned character, you can set the data-align-adjust data-attribute with a percentage change. This value (positive or negative) will be added to the "ts-align-left" span, and subtracted from the "ts-align-right" span.
• Try adjusting the sliders in this demo to change the data-align-adjust of the "Sites" column to see how this works.

Add this attribute to the header as follows:

<th data-align-char="." data-align-adjust="10">Numeric</th>

The data-align-adjust data-attribute contains a percentage value (without the percent sign). The adjustment defaults to "0" if this data-attribute is undefined.