Table background color

Get Started
1

[FONT=“Verdana”]I can’t seem to keep some tables from having white backgrounds. I’m a bit out of practice but a few years ago I used tables for layout and didn’t have any problems.

Here’s part of the table code

<table class="ylw" border="0" cellpadding="2" cellspacing="0" align="left">
<tr> 
<td>
<table  class="ylw" border="0" cellpadding="2" cellspacing="0" align="left">
<tr><th colspan="2">Bandshell</th></tr>
<tr><td>5:00 <span class="sc">p.m.</span></td><td class="pl">Linsey Alexander</td></tr>
<tr><td>7:00 <span class="sc">p.m.</span></td><td class="pl">Eric Gales</td></tr>
<tr><td>9:00 <span class="sc">p.m.</span></td><td class="pl">Dwayne Dopsie &amp; the Zydeco Hellraisers</td></tr>
<tr><td>11:00 <span class="sc">p.m.</span></td><td class="pl">Smokin’ Joe Kubek with Bnois King</td></tr>
</table>
</td>

Here’s the CSS

.pl	  { padding-left: 1.1em; }

.wht  {  	color: #003;  
			background-color: #fff;   }

.ylw	{color: #003;  
		 background-color: #ffffed;
		 margin-right: 2em;
		 clear: both; }

.ylw tr	{background-color: #ffffed; }

.ylw td	{background-color: #ffffed;
	 	 margin-right: 2em; }

The background color of the page is #ffffed and that’s what I want the background of these tables to be, but it’s white.

Do you have any ideas?[/FONT]

2

Got a link to the page?

3

Here’s the top of the page. I want those tables with the little calendars to have a white background.
Live Blues! Music in the Quad Cities

The tables with the Festival schedule aren’t supposed to be white. They’re here.
Live Blues! Music in the Quad Cities

4

The name attribute must not start with a number because NAME tokens must begin with a letter ([A-Za-z]). Thefore your: name=“12apr”, is invalid and since you are using XHTML grammar really you should use ‘id’ rather than ‘name’ (anchor links).

Also you cannot use the hardcode value: #ffd within HTML but may use: #ffffdd only within CSS you can use the ‘short notation’ hex. You may want to use the class .ffd td to change you TD backgrounds.

5

Thanks for the reply XHTMLCODER, you had a lot of interesting info I wasn’t aware of. Where did you learn all that stuff?

I followed all your suggestions, but they didn’t solve my problem. In fact, things got a bit worse. The td at the top of the page that contained the links to June and July now has a white background. It used to be yellow.

Am I the only one having these probs with tables? Ten years ago I used tables for layout and don’t remember anything like this.

6

I learnt from ‘The Oracle of Apollo’ at Delphi, or something, well, I heard a lot of “convulsive ravings” from her… :wink: Seriously though it’s only through practice and reading the Technical Recommendations: http://www.w3.org/TR/html401/ and so forth that you become a Grandmaster.

Then you tend to learn the more hidden and mysterious knowledge that most books totally forget to mention.

Also the: http://validator.w3.org/ helps you spot errors if you are not wanting to use just your eyes.

For those two “Festival schedule” calendars I assume you wanted background: #ffffed therefore within your CSS: .ffffed td { background-color : red; } which should colour those 2 tables/calendars red. You just substitute the word red for the colour, I just used red to make it stand-out and I assume that is the effect you wanted?

7

Well, as I said in my original post, here’s the markup code.

<table class="ylw" border="0" cellpadding="2" cellspacing="0" align="left">
<tr> 
<td>
<table  class="ylw" border="0" cellpadding="2" cellspacing="0" align="left">
<tr  class="ylw" ><th colspan="2">Bandshell</th></tr>
<tr  class="ylw" ><td  class="ylw">5:00 <span class="sc">p.m.</span></td><td class="pl">Linsey Alexander</td></tr>
<tr  class="ylw" ><td  class="ylw">7:00 <span class="sc">p.m.</span></td><td class="pl">Eric Gales</td></tr>
<tr  class="ylw" ><td  class="ylw">9:00 <span class="sc">p.m.</span></td><td class="pl">Dwayne Dopsie &amp; the Zydeco Hellraisers</td></tr>
<tr  class="ylw" ><td  class="ylw">11:00 <span class="sc">p.m.</span></td><td class="pl">Smokin&#8217; Joe Kubek with Bnois King</td></tr>
</table>
</td>

And here’s the CSS.

.pl	  { padding-left: 1.1em;
	 	background-color: #ffffed; }

.wht  {  	color: #003;  
			background-color: #fff;   }

.ylw	{color: #003;  
		 background-color: #ffffed;
		 margin-right: 2em;
		 clear: both; }

.ylw tr	{background-color: #ffffed; }

.ylw td	{background-color: #ffffed;
	 	 margin-right: 2em; }

So, why ain’t that background yaller instead of white? i can’t figure it out!

8

Your pages were different to that code sample but assuming you are ONLY considering that code sample in post #7. Then the TABLE is yellow or at least: #ffffed normally #ffff00 is a standard bright yellow.

Your page however differs with their class names; so you have to match them within the CSS and like I mentioned both tables don’t use the same class .ylw within the markup. The top seem to use .ffffed as the class name NOT .ylw so maybe you got confused with the class names?

EDIT: In fact you don’t have an ID of #jul11 so I cannot tell what you are actually referencing?

So I had assumed you meant the two small calendars (April 2011) and (May 2011) near top of page have a (white background) and you are happy with those two.

Lower down you have: “Mississippi Valley Blues Festival”, which should have an ID value of #mjul11 not #jun11 .

Now, it’s starting to make sense… Your ID was WRONG for the fragment identifier your hyperlink was sending me nowhere! That is why I was talking about your (top of page) calendars. :wink:

Right those other tables (lower in your page) have yellow backgrounds though very pale yellow it’s only the TH that don’t. So if you meant just the TH then just add: .ylw th { background-color: red; } again for illustration purposes.