Css styling links inside a table (table data ) won't work

Question

I have a site made of table for its layout but the links can't be styled correctly

My table code for the navbar

<table id="table">
<tr class="navbar">
<td><a href="#">HOME</a></td>
<td><a href="#">MY PROFILE</a></td>
<td><a href="#">MY WORKS</a></td>
<td><a href="#">ABOUT SITE</a></td>
</tr>
</table>

My CSS code

a.navbar:link {
    color:whitesmoke;

}

a.navbar:visited {
    color:red;

}

a.navbar:hover {
    color:red;
    background-color: yellow;

}

a.navbar:active {
    color:red;

}

Answer 1

Your CSS selectors are not correct as the links do not have the class navbar.

A correct solution would be to select an element of type a within an element of class navbar like this:

.navbar a:link {
    color:whitesmoke;
}

.navbar a:visited {
    color:red;
}

.navbar a:hover {
    color:red;
    background-color: yellow;
}

.navbar a:active {
    color:red;
}

Why this use of html tables in general might not be the best option possible is extensively discussed on SO.

Answer 2

Switch it around:

.navbar a { *styles* }

Answer 3

a.navbar selects a elements that have the class navbar. You have to use .navbar a {} in this case.

I would not use tables as menus by the way. I recommend using uls instead since they can be styled more sophisticatedly.

Answer 4

try

.navbar > td > a:link {...}

etc.