Simple table advice

HTML & CSS
1

simple table help

Will I ever get this stuff? YEs, I will. Butuntil then, I need your help!

I am making a very simple table, where I want to be able to select which rows show up the light grey ccolour #CCC

I would like the first item no to sidpal anything at all (no break space will do this (by the way I am uilding this for ie6)

I have added a new class, td2. I shoudl be able to select that and the background will go light grey, why can’t I?

thanks you!!!


<style type="text/css">
table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color: none;
	border-width: none;
	border-collapse: collapse;
}
table.gridtable th {
	padding: 8px;
	background-color: #dedede;
}
table.gridtable td {
	border-width: 1px;
	padding: 8px;
	background-color: #ffffff;
}
table.gridtable td2 {
	border-width: 1px;
	padding: 8px;
	background-color: #CCC;
}
</style>

<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
	<th>&nbsp;</th>
	<th>Monday</th>
	<th>Tuesday</th>
	<th>Wednesday</th>
	<th>Thursday</th>
	<th>Friday</th>
</tr>
<tr>
	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td><td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>

<tr>
	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td><td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>

<tr>
	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td><td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td><td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td><td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
2

I thought I could add a new class into the tr code



<tr class"td2">
	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>

But that does not work:(

3

Try

<tr class[COLOR="Red"]=[/COLOR]"td2">
4

A class in your CSS must start with a dot: Class Selector (CSS selector)

So that should be

table.gridtable .td2 {

And then you’ll have to assign that class to the cells you want to color grey.

5

Ha ha, I didn’t notice that. With the two of us together, unconformed should be able to get somewhere. :lol:

6

your syntax is wrong. (and a bit of your concept).

table.gridtable td2 {} shoud be : table.gridtable .td2
that’s the problem with your syntax… but then you have a thinking error… because if you coded that way you would need to give the class=“td2” all the cells in you want o highlight…

<tr><td class=“td2”></td><td class=“td2”></td><td class=“td2”></td><td class=“td2”></td></tr>
<tr><td></td><td ></td><td ></td><td ></td></tr>
<tr><td class=“td2”></td><td class=“td2”></td><td class=“td2”></td><td class=“td2”></td></tr>

that’s rather cumbersome, don’t you agree?

instead target the containing element…

replace this:
table.gridtable td2 {
border-width: 1px;
padding: 8px;
background-color: #CCC;
}

with
table.gridtable .even td{ background-color: #CCC;}
every row you now want to select as “gray” you add the class “even” to.

like this:
<tr class=“even”>…</tr>
<tr>…</tr>
<tr class=“even”>…</tr>
<tr>…</tr>
etc

Hope that helps

7

( need to learn to type faster)…lol

8

:lol:
But the part about the concept is very useful.

9

thanks guys, how can I make the whole row … hold on

10

no I can’t , weep. How do I style the whole row?

I swear I don’t like to put myself down but is this stuff hard, or does it tak a while to pick up? I have been at it for some time now (not this table but css/html)

Of course it is hard. Easy for some.

Thanks heaps guys so quick I love tis place so much!!!

11

no I can’t , weep. How do I style the whole row?

Dresden Phoenix explained that.

If you can’t get it to work, repost your modified code.

12

I swear I don’t like to put myself down but is this stuff hard, or does it tak a while to pick up? I have been at it for some time now (not this table but css/html)

Four years and counting over here : )

I’ll suggest that you make user of awesomeness in markup known as thead and tbody. There are also scope attributes. They are teh awesome.

One interesting thing: on most browsers, you could actually style the tr itself. IE, for whatever reason, requires you to do it as you’ve been doing it:
tr td {
background-color;
}

And if it weren’t that you were styling for IE6, we’d even leave off the class. But writing for IE6 is good for you. You’ll stay ahead of this upcoming generation of kids who never heard of Haslayout and always had something like Firebug at their beck and call. Lawlz.

We’ll become like this dying breed of crusty old Master Foos, where when young Nubis wander cluelessly into our midsts, we’ll hobble out of the inky shadows and pronounce things of great knowledge and wisdom in our gravelly voices while stamping our canes onto the stone floors for emphasis: “…in my day…” “…uphill both ways…” “…bugs up to our hips…”

Or something.

13

To précis Dresden’s answer :slight_smile:


[B]table.gridtable .td2 td [/B]{
    background-color: #CCC;
}



    <tr[B] class="td2"[/B]>
        <td>Text 2A</td>
        <td>Text 2B</td>
        <td>Text 2C</td>
        <td>Text 2A</td>
        <td>Text 2B</td>
        <td>Text 2C</td>
    </tr>

You add the class to the tr (table row) and the you style the descendant td elements (.td2 td).

14

That may be true but you’ll have to admit that bug squashing in IE 5.x and 6 had its charm. Sometimes I miss those days.

15

but you’ll have to admit that bug squashing in IE 5.x and 6 had its charm.

It made us gods.

GODS.