HTML Treetable javascript allows creating a components capable of expanding and contracting rows as well as showing multiple columns of data. It can be useful in presenting hierarchical tabular data.
Let’s look at some examples first:
Example 2 – icon that shows expanded / collaped row state is added, as well as some style to table.
How HTML Treetable works
Every table row has an id attribute set and the id is assebled of table id, eventual parent rows indexes and current row index in parent row delimitated with underscore (). If we give id to the table in examples table1, the first row would have id of table1_0, it’s child record would have id of table1_0_0, second row table1_0_1 and so on. Anchor that would expande or collapse specific row would call javascript function treetable_toggleRow(row_id);, where row_id is id of specific row.
Functions treetable_collapseAll(tableId) and treetable_expandAll(tableId) allows all rows in table to be expanded or collapsed.
Callback javascript function that would be called every time row is collapsed or expanded can be defined by setting value of treetable_callbacks['eventRowStateChanged'] to callback function name.
Additional info
HTML table is meant to be created from server side script. If there is interest for a PHP script that would create HTML code for the table from an array please drop a comment.
Script has been tested on WIN XP with Firefox 1.06, IE6 and Opera 8.
Download
Download the script and examples
Relative Font Sizes Stylesheets Switcher helps creating usable web pages that give readers simple solution for resizing text on the web page respecting their default settings. This is based on my article Power To The People: Relative Font Sizes on a A List Apart. I created switcher as most existing methods ignore the user’s default settings.
Download the styleswitcher and examples (.zip, 7 KB).
Examples can be seen online as well:
Few notes:
- be aware of the bug in IE which turns rending in quirk mode when the XML declaration is positioned above the document type (which will result in different font sizes)
- Simon Willison suggests enhancing this technique by writing out the form and buttons used to control text sizing using Javascript. That way users without Javascript won’t see a widget that doesn’t work.
- this technique could be easiliy enchanced to control change contrast or brightness as well (see Example 2)
I am Bojan Mihelac and this blog is dedicated to share code, thoughts, tools and advices I came up with while working in 
Subscribe to RSS Feed