CSS menus, table or list, what's the right way?

Question

I made my menu in tables because I tried with list and the result was not what I expected, then, I couldn't make the LI (menu items) stretch depending of the width of DIV, I saw that I could do this with tables and it worked.

Most menus I see are made in UL lists, but some are in tables too, is there any "rule" or semantic envolved?

And what about table in display property in CSS of HTML lists?

#menu {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

#menu ul {
    display: table-row;
}

#menu li {

    display: table-cell;
    height: inherit;
    border: solid 1px;
    padding: 0;
    margin: 0;
}

Well tables are usually for tabular data but if it served the purpose and works for you why not. — Patsy Issa, Dec 17 '13 at 11:40

score 0 · Answer 1 · answered Dec 17 '13 at 11:47

I made my menu in tables because I tried with list and the result was not what I expected

There is no rule, but I'm pretty sure whatever your menu looks like it could be done with an unordered list.

You may find that the unordered list version takes less HTML than the table version. Less HTML is good because it will take less time to download.

Moreover, if your menu only ever has one "row" then is a table really the right representation?

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

Most likely you can implement what you want using html unordered lists. For example, you can stretch the list elements like this: width: 25%; text-align: center; so every list element has 25% width (4 list elements = 100%) if this is what you want.

Regarding tables for design, there is already a good explanation on SO. Why not use tables for layout in HTML?

edited May 23 '17 at 11:56

Community

1
1

answered Dec 17 '13 at 11:47

Mythli

5,995
2
24
31

CSS menus, table or list, what's the right way?

2 Answers2