Table style in CSS

OOzy · Aug 5, 2004

Dears,

I have the following table and CSS. I am trying to keep all my styling in the css. How can do:

1. show the border of the cell/row using the mycss.css
2. I am using using onmouseover [shown in blue] to change the backgorund color of the cell/row, how can I do this using the mycss.css

----My xhtml snippet----
<table id="main">
<tbody>
<tr>
<td id="main_left">

<table id="menu">
<tbody>
<tr>
<td>Main Menu</td>
</tr>
<tr>
<td id="menu"
onmouseover="this.style.backgroundColor='#FFFFFF'"
onmouseout="this.style.backgroundColor='#eeefee'"
align="left"><a class="menulink"
href="">Tutorial</a></td>
</tr>
<tr>
<td class="menulink"
onmouseover="this.style.backgroundColor='#FFFFFF'"
onmouseout="this.style.backgroundColor='#eeefee'"
align="left"><a class="menulink"
href="">Tools</a></td>
</tr>
<tr>
<td class="menulink"
onmouseover="this.style.backgroundColor='#FFFFFF'"
onmouseout="this.style.backgroundColor='#eeefee'"
align="left"><a class="MenuLink" href="">About
Us</a></td>
</tr>
<tr>
<td class="menulink"
onmouseover="this.style.backgroundColor='#FFFFFF'"
onmouseout="this.style.backgroundColor='#eeefee'"
align="left"><a
href="">Contact Us</a></td>
</tr>
</tbody>
</table>

-------My css snippet-------

table#menu{
border:solid black;
background-color:#EEEFEE;
border-width:thin;
width:150px;
height:100px
}

td#menu{
border:solid black;
border-width:thin;

Foamcow · Aug 5, 2004

To show the border of a cell or row simply define a style for <td> and/or <tr> tags.

Code:

tr { border:1px solid #f00; }
td { border:1px solid #ccc; }

To make the cell colour change on mouseOver with CSS...
Well you can use the :hover psuedo class but it is not properly supported by all browsers.

For example, this code works in Opera and (I think, not tested though) Mozilla etc. It won't work in Internet Explorer.

Code:

td:hover { background-color: #ff9933; }

http://www.foamcow.com

manarth · Aug 8, 2004

Foamcow said "this code works in Opera and (I think, not tested though) Mozilla etc....td:hover"

AFAIK, it is only IE fails to support it properly (the :hover pseudoclass only works on <a> tags in IE). I've tested it in Moz, Konquerer, Safari, and Nautilus, with much success

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

ChrisHunt · Aug 9, 2004

Like the guys say, IE only applies :hover colours to <a> tags. However, you can trick it by giving <a> the display:block property and sizing it how you want it.

Here's an approach that uses CSS hovers, and also avoids using a table for the menu:

Code:

<html>
<head>
<title>Menu Fun</title>
<style type="text/css">
ul#menu {
  list-style: none;
  margin: 0;
  border-top: 1px solid black;
  padding: 0;
  width: 10em;  /* Or whatever width you like */
}

#menu li a {
  display: block;
  padding: 2px;
  background-color: #EEEFEE;
  border: 1px solid black;
  border-top: none;
  width: 10em;  /* must be the same as the ul width */
}

#menu li a:hover {
  background-color: #FFFFFF;
}

</style>
</head>
<body>

  <ul id="menu">
    <li><a href="#">Tutorial</a></li>
    <li><a href="#">Tools</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
 
</body>
</html>

Note that this approach also has the benefit of making the whole "cell" clickable, rather than just the linked text.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Table style in CSS

OOzy

Programmer

Foamcow

Programmer

manarth

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor