Boxes that relate, How should i solve this? Options

[SE-FMO]

Hello!

I have a project in mind that i want some help and input how to solve.

My problem so to speak is that i want a HTML page where i want to create boxes with attributes.
The three main attributes will let me describe a relationship between different boxes on the page.

The basic way to describe the mechanics is that it would work like a file cabinette like a tree view sort of.
In real life a good example would be a kitchen cabinette.

The attributes that i want to use is "Function", "Location" and "Product".
* Function declares a function
* Location declares a location
* Product declares a product

So to give an example of the kitchen cabinette with location aspect i start with a blank page
and declare that i want to input a location wich will be the MAIN location the cabinette.
a box will be representing the cabinette on the page.
then i want to insert two locations within that location wich will be RIGHT and LEFT.
Two boxes within the MAIN box will be displayed representing right and left.
Then i want to insert 3 levels or shelves into each side of the cabinette.
They will be displayed inside the right and left boxes.

The layout would be displayed on the whole page until i wanted to declare a second MAIN location or
if i wanted to put the cabinette in a kitchen wich then would be the MAIN location.

Then i want to add functions in the cabinette.
PLATES will be my first function so i place it in the cabinette on the right side, third shelf from the top.
The function box will be placed in the locationbox now we have a relation between the function and the location.
Then i want to add products in the cabinette.
DINING PLATES and DESSERT PLATES will be the first products. As function they are plates but with different tasks so therefore
two products, they will be placed in the functionbox of plates in the locationbox in the cabinette
on the right side, third shelf from the top.

Now we have created a relationship between the three aspects/attributes

To add some more, location is not always the leading MAIN a location coukd be placed inside a function.
a product could contain several components also to make the complete product you used as a MAIN and location and function
could occur within the product.

So how could i create this? I have been searching for a java editor type interface where i can create a table
and place tables in tables is this the way to solve this? Or should i approach this in a different way?
When ever i want to place something i want to attach attribute and name,
Attribute will control CSS and style the box accordingly and a name will be places in the top right corner of each box.
Some restrictions may occur like size but to start with i will have to go slow.

Kind regards