Login | Register | FAQ
Anonymous

CSS Different Table Cell Colours

+ Post a reply

3 posts Page 1 of 1


CSS Different Table Cell Colours

by 97browng » Mon Apr 18, 2011 11:33 am

Hi All,

This may be very simple but I cannot work out what to do. Basically I have a very simple website for a coursework project and on one page I have a Table with two cells (one left one right) and lets say for arguments sake I want the left side to have a blue background and and the right to be red. I cant find out how to do this, I currently have the following in my css (please not I will be changing other attributes at a later date);

.tab1 TD {
font-family: arial, verdana, sans-serif;
font-size: 18pt;
background-color:blue
}
.tab2 TD {
font-family: arial, verdana, sans-serif;
font-size: 18pt;
background-color:red
}
And I have this for my html;

<table border="3" width="100%" table class="tab1">
<td width = "50%" align="left">
<td width = "50%" align="center"></td>
</table>

I have tried changing the single cell in html but the css keeps over righting it. So is there a way I can use different .tabs in each cell or is there a way I can just change the bg colour in the one cell.#

Your help would be much appreciated.
User avatar

97browng

  • Posts: 3
  • Joined: Wed Apr 13, 2011 11:23 am

Re: CSS Different Table Cell Colours

by HTML.net » Mon Apr 18, 2011 11:59 am

Hi,

It is easy. You just put an id or class on the cells:

CSS:

table {
border: 3 solid black;
width: 100%
}
.tab1 {
font-family: arial, verdana, sans-serif;
font-size: 18pt;
background-color:blue;
width: 50%;
text-align: left;
}
.tab2 {
font-family: arial, verdana, sans-serif;
font-size: 18pt;
background-color:red;
width: 50%;
text-align: center;

}

HTML:

<table>
<td class="tab1">
<td class="tab2"></td>
</table>


Read more about identification and grouping of elements (class and id) here: http://html.net/tutorials/css/lesson7.php
User avatar

HTML.net
Site Admin

  • Posts: 1194
  • Joined: Sat Sep 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: CSS Different Table Cell Colours

by 97browng » Mon Apr 18, 2011 1:34 pm

Thank you very much for this, I had tried everything but was using Table Class instead of just class. This has worked a treat.

Thanks again
Gary
User avatar

97browng

  • Posts: 3
  • Joined: Wed Apr 13, 2011 11:23 am


+ Post a reply

Page 1 of 1