Is there a way to determine or calculate if and how a HTML table can be normalized using rowspans? Or if there is a JavaScript library that can do it.
E.g., this table:
+-----------+---------+
| Apple | Red |
| Apple | Green |
| Apple | Yellow |
| Sun | Yellow |
| Sun | Hot |
| Charizard | Hot |
| Charizard | Pokémon |
+-----------+---------+
Would be turned into this:
+-----------+---------+
| Apple | Red |
| | Green |
| |---------|
|-----------| Yellow |
| Sun |-------- |
|-----------| Hot |
| |---------|
| Charizard | Pokémon |
+-----------+---------+
Look at this fiddle to see what I mean: http://jsfiddle.net/scorch/LZKkQ/
Some of these combinations are easy to figure out manually, but some can be quite complex. I would like to minimize the table as much as possible, and be sure that there is no other combination that could minimize it further. I.e., preferably only unique values in the table.
EDIT: Never mind the extra column in the fiddle. Seems Firefox has some problems with rowspan on the right-most column, so I had to add another one for it to have the desired effect.
EDIT 2:
The DataTables plugin fnMultiRowspan
and fnFakeRowspan
mentioned below doesn't really get the desired results. Both plugins needs the table to be sorted in the right way beforehand to work; fnFakeRowspan
only works on one column and fnMultiRowspan
gives the result below (hot and yellow are duplicated in the second column):
+-----------+---------+
| | Red |
| Apple | Green |
| | Yellow |
|-----------+---------|
| Charizard | Hot |
| | Pokémon |
|-----------+---------|
| Sun | Yellow |
| | Hot |
+-----------+---------+
id/headers
in a similar fashion to for/id in forms. See WCAG 2.0 Technique H43 for more information. That'll add work to the algorithm but as you'll already be looping through the table... – FelipeAls Jun 20 '12 at 9:02