javascript - HTML/CSS: what's a better option for layout of a tree of nested elements than nested tables? -

OK, I have a set of checkboxes to choose criteria. For logic, we would say that the data looks like this: [Vehicle] Unporter [] Bicycle [] Skateboard [] Powered [] Two Wheels [] Motorcycle [] Scooter [] Four-wheel etc.

[] represent the checkboxes.

To ignore the explicit nature of this example, the idea is:

<

If the user has clicked on the vehicle checkbox, the next level ( Powered, unpaid) is upset;

To get started with it, only the vehicle checkbox is visible;

If the user has selected, it opens the next level (two-wheeler, four-wheeled);

If the user unchecked again, that level disappears.

It is currently structured on the page:

  & lt; Table & gt; & Lt; TR & gt; & Lt; Td> & Lt; Input type = "checkbox" onclick = "toggle ('__ vehicle');" & Gt; & Lt; / Td> & Lt; Td> Vehicle & lt; Table id = "__ vehicle" & gt; & Lt; TR & gt; & Lt; Td> & Lt; Input type = "checkbox" & gt; & Lt; / Td> & Lt; Td> Unpowered etc.  

Before telling anyone, let me know: The reason the checkbox was placed in the table cell was to control the formatting. It's easy to individually make it easy to indent because everything in the next table cell will rise up.

It all works well but table nesting is very deep I am thinking that there should be a better way than this. It can be easily dynamically created and good cross-browser support can be obtained for the formation of "tree".

I should also mention that jQuery is available. I am using it for other things.

Suggestions?

Edit: Yes checkbox style is important because some comments are noted about. Also, I have posted a solution on this, based on the answers I gave, based on the answer given below (too big to add here), for example only for those curious people. For example

   Vehicle & lt; Ul & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" /> Unpowered & lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" /> Bicycle & lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" /> skateboard & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" /> Powered & lt; Ul & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" /> Two-wheeled & lt; Ul & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" /> Motorcycle & lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" /> scooter & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" /> Four-wheeled & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  

Edit: A small CSS & amp; To hide JS nested elements to show (no checkboxes)

  li.opened ul {display: block; } Li.closed ul {Display: None; }  

and js ...

  $ (document) .ready (function () {$ ('li input: checkbox'). ($ (This) .Parent (). Toggleclass ('open'); $ (this) .Parent (). Toggleclass ('closed');}) $ ('li'). AddClass ('off'); });  

Re-edit, because Sparr wants some better style (assuming that the checkbox has the style of "checkbox"

  li input.checkbox {/ * Input: The checkbox is not 100% compatible * / width: 6px; margin: 0 2px; / * it makes the checkbox of 10px total "width" * {} {margin: 0 10px; / * or whatever Also your total checkbox width is * / padding: 0;} li {padding: 0;}