/    Sign up×
Community /Pin to ProfileBookmark

How To Change Text Colour In A Table Via ?

Hi,

I can’t seem to get to change the text colour inside each cell. Do not want to be typing text colour for each cell but type the colour in a colgroup or rowgroup.
Rowgroup non-existant it seems.

Here is my attempt …

[code]
<table border=”20″ width=”100%” cellspacing=”5″ cellpadding=”20″ bordercolor = “gold”>
<colgroup>
<col span=”2″ style=”background-color:grey;font-color:white”>
<col span=”2″ style=”background-color:white;font-color:red”>
</colgroup>

<thead>
<th colspan=”2″>GOOD</th><th colspan=”2″>BAD</th><br>
</thead>
<th>FIRST NAME</th><th>SURNAME</th><th>FIRST NAME</th><th>SURNAME</th>
<tfoot>
<th colspan=”2″>GOOD</th><th colspan=”2″>BAD</th><br>
</tfoot>
<tbody>
<tr>
<td>Muhammad</td><td>Ali</td><td>Adolph</td><td>Hitler</td>
</tr>
<tr>
<td>Malcolm</td><td>X</td><td>Joseph</td><td>Stalin</td>
</tr>
</tbody>
</table>
[/code]

I get no error but text colour not chaging.
Want to change text colour to white on all cells under the GOOD heading column.
And text colour to black on all cells under the BAD heading column.
That is all.

Do not want to be doing like this for each and every cell:

[code]
<tr>
<td style=”color:white”>Muhammad</td><td style=”color:white”>Ali</td><td style=”color:black”>Adolph</td><td style=”color:black”>Hitler</td>
</tr>
[/code]

In pure html5 only. No css.

to post a comment
HTML

14 Comments(s)

Copy linkTweet thisAlerts:
@novice2022authorJun 22.2022 — Here is another attempt.

When you hover over cells, their background changes.

But I can't seem to get the cell text to change colour when mouse hovered.

<i>
</i>&lt;style&gt;
th:hover {background-color: gold;}
tr:hover {background-color: blue;}
td:hover {background-color: green;}
td:hover {text-color: purple;}
td:hover {font-color: purple;}
&lt;/style&gt;

&lt;table border="20" width="100%" cellspacing="5" cellpadding="20" bordercolor = "gold"&gt;
&lt;caption&gt;Monthly Svings&lt;/caption&gt;
&lt;colgroup&gt;
&lt;col span="2" style="background-color:grey"&gt;
&lt;col span="2" style="background-color:black"&gt;
&lt;/colgroup&gt;
&lt;thead&gt;
&lt;th colspan="2" style="color:white"&gt;GOOD&lt;/th&gt;&lt;th colspan="2" style="color:red"&gt;BAD&lt;/th&gt;&lt;br&gt;
&lt;/thead&gt;
&lt;th style="background-color:white"&gt;FIRST NAME&lt;/th&gt;&lt;th style="background-color:white"&gt;SURNAME&lt;/th&gt;&lt;th style="background-color:white"&gt;FIRST NAME&lt;/th&gt;&lt;th style="background-color:white"&gt;SURNAME&lt;/th&gt;
&lt;tfoot&gt;
&lt;th colspan="2"&gt;GOOD&lt;/th&gt;&lt;th colspan="2"&gt;BAD&lt;/th&gt;&lt;br&gt;
&lt;/tfoot&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style="color:white"&gt;Muhammad&lt;/td&gt;&lt;td style="color:white"&gt;Ali&lt;/td&gt;&lt;td style="color:red"&gt;Adolph&lt;/td&gt;&lt;td style="color:red"&gt;Hitler&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Malcolm&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;Joseph&lt;/td&gt;&lt;td&gt;Stalin&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;


These a failure ....
<i>
</i>td:hover {text-color: purple;}
td:hover {font-color: purple;}


What's the solution ?

Remember, I want no css. Pure html 5.
Copy linkTweet thisAlerts:
@novice2022authorJun 22.2022 — @Nogdog

Possible to do what I want to do ?
Copy linkTweet thisAlerts:
@NogDogJun 23.2022 — I think it's just color for the text, but I'm a php/database guy, not a front-end guy.
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — @NogDog#1644821

Thanks.

This working ,....
<i>
</i>td:hover {color: yellow;}


It changes the text colour of all the cells when mouse is hovered over the cells.
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — Hi,

But how to change text colour of specific cells only ?

I tried these and they are not working ....
<i>
</i>&lt;style&gt;
th:hover {background-color: black;}
tr:hover {background-color: silver;}
td:hover {background-color: yellow;}
th:hover {color: green;}
tr:hover {color: blue;}

id:gf1:hover {color: orange;}
name:gf1:hover {color: orange;}

id:"gf1":hover {color: orange;}
name:"gf1":hover {color: orange;}

id:gf1{hover {color: orange;}}
name:gf1{hover {color: orange;}}


td:id:gf1:hover {color: orange;}
td:name:gf1:hover {color: orange;}

td:id:"gf1":hover {color: orange;}
td:name:"gf1":hover {color: orange;}

td:id:gf1{hover {color: orange;}}
td:name:gf1{hover {color: orange;}}

td:gf1:hover {color: orange;}
td:"gf1":hover {color: orange;}
td:gf1{hover {color: orange;}}

&lt;/style&gt;


CONTEXT:
<i>
</i>&lt;html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;

&lt;style&gt;
th:hover {background-color: black;}
tr:hover {background-color: silver;}
td:hover {background-color: yellow;}
th:hover {color: green;}
tr:hover {color: blue;}

id:gf1:hover {color: orange;}
name:gf1:hover {color: orange;}

id:"gf1":hover {color: orange;}
name:"gf1":hover {color: orange;}

id:gf1{hover {color: orange;}}
name:gf1{hover {color: orange;}}


td:id:gf1:hover {color: orange;}
td:name:gf1:hover {color: orange;}

td:id:"gf1":hover {color: orange;}
td:name:"gf1":hover {color: orange;}

td:id:gf1{hover {color: orange;}}
td:name:gf1{hover {color: orange;}}

td:gf1:hover {color: orange;}
td:"gf1":hover {color: orange;}
td:gf1{hover {color: orange;}}

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;table border="20" width="100%" cellspacing="5" cellpadding="20" bordercolor = "red" bgcolor="orange"&gt;
&lt;caption&gt;Caption&lt;/caption&gt;
&lt;colgroup&gt;
&lt;col span="2" style="background-color:white"&gt;
&lt;col span="2" style="background-color:black"&gt;
&lt;/colgroup&gt;
&lt;thead&gt;
&lt;th colspan="2" style="color:black"&gt;GOOD&lt;/th&gt;&lt;th colspan="2" style="color:white"&gt;BAD&lt;/th&gt;&lt;br&gt;
&lt;/thead&gt;
&lt;th style="background-color:black"&gt;FIRST NAME&lt;/th&gt;&lt;th style="background-color:black"&gt;SURNAME&lt;/th&gt;&lt;th style="background-color:white"&gt;FIRST NAME&lt;/th&gt;&lt;th style="background-color:white"&gt;SURNAME&lt;/th&gt;
&lt;tfoot&gt;
&lt;th colspan="2" style="color:black"&gt;GOOD&lt;/th&gt;&lt;th colspan="2" style="color:white"&gt;BAD&lt;/th&gt;&lt;br&gt;
&lt;/tfoot&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td name="gf1" id="gf1"&gt;Muhammad&lt;/td&gt;&lt;td name="gs1" id="gs1"&gt;Ali&lt;/td&gt;&lt;td name="bf1" id="bf1"&gt;Adolph&lt;/td&gt;&lt;td name="bs1" id="bs1"&gt;Hitler&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td name="gf2" id="gf2"&gt;Malcolm&lt;/td&gt;&lt;td name="gs2" id="gf2"&gt;X&lt;/td&gt;&lt;td name="bf2" id="bf2"&gt;Joseph&lt;/td&gt;&lt;td name="bs2" id="bs2"&gt;Stalin&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@SempervivumJun 23.2022 — Make yourself familiar with CSS selectors:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — @Sempervivum#1644825

I checked that link but it does not teach how to select more than one #id.

<i>
</i>#gt0:hover {background-color: orange; color: red;}
#gt1:hover {background-color: orange; color: red;}
#gt2:hover {background-color: orange; color: red;}


I tried shortening but not working:
<i>
</i>#gt0-#gt2:hover {background-color: orange; color: red;}
Copy linkTweet thisAlerts:
@SempervivumJun 23.2022 — @novice2022#1644828 You have to separate them by commas:

`#gt0, #gt2: hover {background-color: orange; color: red;}`
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — @Sempervivum#1644830

I did do it like that. But it did not work.

Run the following code in your localhost and see for yourself.

Look under the "Title" column.

FULL CODE
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;Table&lt;/title&gt;
&lt;style&gt;

th:hover {background-color: black; color: gold;}
tr:hover {background-color: silver; color: white;}

#gt0,#gt1,#gt2:hover {background-color: orange; color: red;}

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;table border="20" width="100%" cellspacing="5" cellpadding="20" color="red" bgcolor="orange"&gt;
&lt;caption&gt;Caption&lt;/caption&gt;
&lt;colgroup&gt;
&lt;col span="3" style="background-color:white; color:green; font-family:courier; font-size:50%;"&gt;
&lt;col span="3" style="background-color:black; color:blue; font-family:verdana; font-size:40%;"&gt;
&lt;col span="3" style="color:red; font-family:arial; font-size:10%;"&gt;
&lt;/colgroup&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th colspan="3"&gt;GOOD&lt;/th&gt;&lt;th colspan="3"&gt;BAD&lt;/th&gt;&lt;th colspan="3"&gt;NEUTRAL&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;FIRST NAME&lt;/td&gt;&lt;td&gt;SURNAME&lt;/td&gt;&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;FIRST NAME&lt;/td&gt;&lt;td&gt;SURNAME&lt;/td&gt;&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;FIRST NAME&lt;/td&gt;&lt;td&gt;SURNAME&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="gt0"&gt;Mr&lt;/td&gt;&lt;td id="gf0"&gt;Muhammad&lt;/td&gt;&lt;td id="gs0"&gt;Ali&lt;/td&gt;&lt;td id="bt0"&gt;Mr&lt;/td&gt;&lt;td id="bf0"&gt;Adolph&lt;/td&gt;&lt;td id="bs0"&gt;Hitler&lt;/td&gt;&lt;td id="nt0"&gt;Mr&lt;/td&gt;&lt;td id="nf0"&gt;Mohandas&lt;/td&gt;&lt;td id="ns0"&gt;Ghandi&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="gt1"&gt;Mr&lt;/td&gt;&lt;td id="gf1"&gt;Mike&lt;/td&gt;&lt;td id="gs1"&gt;Tyson&lt;/td&gt;&lt;td id="bt1"&gt;Mr&lt;/td&gt;&lt;td id="bf1"&gt;Winston&lt;/td&gt;&lt;td id="bs1"&gt;Churchill&lt;/td&gt;&lt;td id="nt1"&gt;Mr&lt;/td&gt;&lt;td id="nf1"&gt;Crocodile&lt;/td&gt;&lt;td id="ns1"&gt;Dundee&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td id="gt2"&gt;Mr&lt;/td&gt;&lt;td id="gf2"&gt;Malcolm&lt;/td&gt;&lt;td id="gs2"&gt;X&lt;/td&gt;&lt;td id="bt2"&gt;Mr&lt;/td&gt;&lt;td id="bf2"&gt;Joseph&lt;/td&gt;&lt;td id="bs2"&gt;Stalin&lt;/td&gt;&lt;td id="nt2"&gt;Mr&lt;/td&gt;&lt;td id="nf2"&gt;Napolean&lt;/td&gt;&lt;td id="ns2"&gt;Bonaparte&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;td colspan="3"&gt;GOOD&lt;/td&gt;&lt;td colspan="3"&gt;BAD&lt;/td&gt;&lt;td colspan="3"&gt;NEUTRAL&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;


You will see these:

Mr Muhammad Ali

Mr Mike Tyson

Mr Malcolm X

I wanted the "Mr" cells to change background to "orange" and text colour to "red" on mouse hover.

But you will see that, the first two cells change the background colour to orange and text to red as soon as the page loads before you even hovered your mouse. That's not how it should be.

The third "Mr" cell is working fine as it's background colour only changes to orange and it's text colour to red once you have hovered your mouse and not before. Watch how the third "Mr" cell behaves when you hover on & off your mouse. That is how the other two "Mr" cells should have behaved. But they do not! **Doing my head-in**.

This weirdness happening in Fire Fox and Chrome. That means, this following line is not correct:
<i>
</i>#gt0, #gt2: hover {background-color: orange; color: red;}

But as far as I can see from tutorials, it is correct. So, why not working on two web browsers ?
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — The conversation is continuing here now, from here ...

https://forum.webdeveloper.com/d/400061-they-deprecated-in-html-5/15
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — It seems I cannot shorten it then to make it work on my two browsers and would have to stick to the longest way ...
<i>
</i>#gt0:hover {background-color: orange; color: red;}
#gt1:hover {background-color: orange; color: red;}
#gt2:hover {background-color: orange; color: red;}


This did not work!
<i>
</i>#gt0-#gt2:hover {background-color: orange; color: red;}


Nor this:
<i>
</i>#gt0, #gt1, #gt2:hover {background-color: orange; color: red;}

https://forum.webdeveloper.com/d/400061-they-deprecated-in-html-5/14
Copy linkTweet thisAlerts:
@SempervivumJun 23.2022 — @novice2022#1644833

Again the selector is correct from the view of syntax but it doesn't do what you want.

`#gt0,#gt1,#gt2:hover {background-color: orange; color: red;}</C><br/>
You have to specify the pseudo class ":hover" for each of the elements:<br/>
<C>
#gt0:hover, #gt1:hover, #gt2:hover {background-color: orange; color: red;}`
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — @Sempervivum#1644843

Thank you very much!

One issue sorted! Working as expected now. Your code is fine ...
<i>
</i>#gt0:hover, #gt1:hover, #gt2:hover {background-color: orange; color: red;}


Now just one more issue to solve for tonight then I can pack it in for the night as it's nearly sunrise here.

Continuing this issue over here now:

https://forum.webdeveloper.com/d/400067-why-colgroup-style-has-no-effect/3

You may close this thread.

Thanks!
Copy linkTweet thisAlerts:
@novice2022authorJun 23.2022 — @NogDog

Can you lock this thread and then help me here, if you not busy or sleepy ? ;)

https://forum.webdeveloper.com/d/400067-why-colgroup-style-has-no-effect/3

Cheers!
×

Success!

Help @novice2022 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 7.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @Nanditha,
tipped: article
amount: 1000 SATS,
)...