Menu UL list menus vs table menus

[djrolstad]

Why is it bad to make a menus using tables? Why is it better to use un-ordered lists?

[dougoftheabaci]

It’s not semantic. It’s not accessible. It’s a pain to maintain. It’s an even worse pain to style.

Tables are meant for tabular data. Menus are not tabular data.

[neerukool]

There are many reasons behind this. I mite not be able to list them all but here are few them:
1) Firstly, as per W3C, tables should be used only to depict tabular data, not to layout the page or it’s sub-components.

2) Tables introduce more hierarchy into html code(tr, td… tr, td) there-by making actual content deeper. Nested tables are more dangerous. Browsers take more time to render a table layout page than non-table layouts – since they have to render all the cells along with colspans & rowspans.
[*Heard somewhere that search engines don’t like to dive too much deeper in code to fetch text/content.]

3) Not very sure about this one, but screen-readers(for disabled) do fairly good job without tables.

[dougoftheabaci]

Screen readers do fine with tables in a tabular context (surprise, surprise, right?) but with menus things can get a little bit muddy. Granted, it’s something they’ve had to deal with for years, but that doesn’t mean it’s the best way to do it for a screen reader.

Menus are a list of links that send you from one place to another. By using an actual list item it works better and makes more sense to the screen reader. Tables are meant to be used to cross-reference multiple pieces of information. This is why it’s actually good to use tables to mark up a calendar, for example.

For something like a menu it’s just overkill.

[djrolstad]

Thanks I was just curious cause at work some of the developers are still using tables.

[John]

They are probably still designing in dream weaver, then slicing it up and making a table out of it.

The guy who did my sisters site did this. I went to redesign her site and all the images where named rc3 and rc4, etc. Then I looked at the source and saw it was in a table format.
And I redesigned it without using a table, and that was basically my very first time doing a site. And I was a complete newb.

And now I’m going to bring the site into WordPress, and I’m still basically a newb.

[Author]

Posts