You could either float the <li>'s within the <ul>/<ol> tags, or use a definition list in the same way. It'd be less code to do so.

Tables are fine when they're used for tabular data, and this may qualify if you wanted to go that route anyway.

Id definately recommend using tables here. This way, you will ensure that in every size browser, your prices will still be next to the correct item. If you float <div> tags, the overflow of your text could misalign your prices.

just curious how would you accomplish this? floating the li's i understand but how would you do this with 2 elements.

(ie. name of dish, price of dish)

you could do something like:

<li>name of dish<span>price of dish</span><br /></li>

and float the name left and the price right, using the break to clear your floats...they'll both stay on the same line that way...until they resize the text enough to make it wrap that is...

Well, if it's within a contained area like 300px (just to throw a number out) and you floated two <li>s at 150px (or a little smaller since IE can't get anything right) within, then it should all fall into place.

But what Jackimalyn just said is correct, if the text goes bigger than the width of the column then that could drastically throw things off. Might just be easier to go with a table, it's not as if you're using it for design or anything.

Although flutterby's suggeestion isn't bad with some modification. We tend to style our forms like this....

<ul>
<li><label>Whatever</label> <span> blah</span></li>
</ul>

Then you could use CSS on the various tags to make it do what you want and the <li>s take care of spacing between the elements, etc. Don't even need break tags.

I would only avoid the table if you can foresee a situation in the future that heavily involves rearranging the way the data is laid out. Otherwise, table away, it's more predictable.