create dynamic map

I need to create dynamic map from some structure data. For example:

Code:

---

        Infrastructure        SY410        SY414        ZACY
        Regions        SY610                ZALY
        Infrastructure        SY410                ZAVI
        Management        SY340        SY344        ZBBC
        Infrastructure        SY420        SY421        ZBCE
        Central Services                        ZBDX
        Management        SY340        SY345        ZBFP
        Infrastructure        SY440                ZBHX
        Design        SY120        SY123        ZBIA
        Design        SY110        SY111        ZBKM
        Regions        SY630                ZBNA
        Regions        SY630                ZBNB
        Regions        SY630                ZBND
        Regions        SY630                ZBNE
        Regions        SY630                ZBNH
        Regions        SY630                ZBNI
        Regions        SY630                ZBNP
        Regions        SY630                ZBNS
        Regions        SY630                ZBNX

---

The left column becomes the top row and so on, e.g.
[Regions ] [Infrastructure]
| | | |
| | | |
SY630 SY620 SY410 SY420
| |
ZBNE ZBNI

Any ideas on how to do this?
I thought a table but it's going to get complicated with colspans and stuff.
Each row needs to be a different colour as well...

put all the data in 2-dimmensional array, and "paint" <tr>s and <td>s with respective styles in a loop running through this array. Could use DOM functions or just appending to innerHTML property of some tag that supports it.

to understand DOM part read this for more info: http://www.howtocreate.co.uk/tutoria...t/domstructure

Can't it be done without tables using VML or something like that?
Or div arrangements...

Just think it could get very confusing using tables