formatTable

This is an easy way to dynamic format a HTML table. Instead of go throught every table inserting class names to all ‘tr’ and ‘td’, you can use javascript do it for you. Create your css class, the format object and call the function on window ‘onload’ event.

With this script:

<script type="text/javascript">

var fmt1 = {
	table: 'table1',
	rolls: ['', 'trOdd'],
	cells: ['', 'tdCenter tdBg', '', 'tdCenter tdBg']
}

AMF.formatTableInit = function() {
	AMF.formatTable(fmt1);
}

onload = AMF.formatTableInit;

</script>

And this HTML:

<table id="table1">
	<thead>
		<tr>
			<td style="width:40%">Loren Ipsun</td>
			<td style="width:10%" class="tdCenter">Ono</td>
			<td style="width:40%">Loren Ipsun</td>
			<td style="width:10%" class="tdCenter">Ono</td>
		</tr>
	<thead>
	<tbody>
		<tr>
			<td>Loren Ipsun Dolor</td>
			<td>123</td>
			<td>Loren Ipsun Dolor</td>
			<td>456</td>
		<tr>
		<tr>
			<td>Loren Ipsun Dolor</td>
			<td>123</td>
			<td>Loren Ipsun Dolor</td>
			<td>456</td>
		<tr>
	</tbody>
<table>

You can format your tables anyway you want. From this:
Before

To this:
After

Download it here (formattable.zip 3kb)

1 Comment »

  1. formatTable « [REF] said,

    March 7, 2007 @ 10:25

    […] Link […]

RSS feed for comments on this post · TrackBack URI

Leave a Comment