Menu
Community /Pin to ProfileBookmarkHow To Change Text Colour In A Table Via
When you hover over cells, their background changes.
But I can't seem to get the cell text to change colour when mouse hovered.
These a failure ....
What's the solution ?
Remember, I want no css. Pure html 5.
@NogDogJun 23.2022 — #I think it's just @NogDog#1644821
Thanks.
This working ,....
It changes the text colour of all the cells when mouse is hovered over the cells.
But how to change text colour of specific cells only ?
I tried these and they are not working ....
CONTEXT:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors @Sempervivum#1644825
I checked that link but it does not teach how to select more than one #id.
I tried shortening but not working:
@novice2022#1644828 You have to separate them by commas:
` @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
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:
But as far as I can see from tutorials, it is correct. So, why not working on two web browsers ?
https://forum.webdeveloper.com/d/400061-they-deprecated-in-html-5/15
This did not work!
Nor this:
https://forum.webdeveloper.com/d/400061-they-deprecated-in-html-5/14 @novice2022#1644833
Again the selector is correct from the view of syntax but it doesn't do what you want.
` @Sempervivum#1644843
Thank you very much!
One issue sorted! Working as expected now. Your code is fine ...
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!@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!
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>
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>
In pure html5 only. No css.
Sign in
to post a comment14 Comments(s) ↴
0
@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><style>
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;}
</style>
<table border="20" width="100%" cellspacing="5" cellpadding="20" bordercolor = "gold">
<caption>Monthly Svings</caption>
<colgroup>
<col span="2" style="background-color:grey">
<col span="2" style="background-color:black">
</colgroup>
<thead>
<th colspan="2" style="color:white">GOOD</th><th colspan="2" style="color:red">BAD</th><br>
</thead>
<th style="background-color:white">FIRST NAME</th><th style="background-color:white">SURNAME</th><th style="background-color:white">FIRST NAME</th><th style="background-color:white">SURNAME</th>
<tfoot>
<th colspan="2">GOOD</th><th colspan="2">BAD</th><br>
</tfoot>
<tbody>
<tr>
<td style="color:white">Muhammad</td><td style="color:white">Ali</td><td style="color:red">Adolph</td><td style="color:red">Hitler</td>
</tr>
<tr>
<td>Malcolm</td><td>X</td><td>Joseph</td><td>Stalin</td>
</tr>
</tbody>
</table>
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.
reply?
0
@NogDogJun 23.2022 — #I think it's just colorreply?
0
@novice2022authorJun 23.2022 — #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.
reply?
0
@novice2022authorJun 23.2022 — #Hi,But how to change text colour of specific cells only ?
I tried these and they are not working ....
<i>
</i><style>
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;}}
</style>
CONTEXT:
<i>
</i><html>
<!DOCTYPE html>
<html>
<head>
<style>
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;}}
</style>
</head>
<body>
<table border="20" width="100%" cellspacing="5" cellpadding="20" bordercolor = "red" bgcolor="orange">
<caption>Caption</caption>
<colgroup>
<col span="2" style="background-color:white">
<col span="2" style="background-color:black">
</colgroup>
<thead>
<th colspan="2" style="color:black">GOOD</th><th colspan="2" style="color:white">BAD</th><br>
</thead>
<th style="background-color:black">FIRST NAME</th><th style="background-color:black">SURNAME</th><th style="background-color:white">FIRST NAME</th><th style="background-color:white">SURNAME</th>
<tfoot>
<th colspan="2" style="color:black">GOOD</th><th colspan="2" style="color:white">BAD</th><br>
</tfoot>
<tbody>
<tr>
<td name="gf1" id="gf1">Muhammad</td><td name="gs1" id="gs1">Ali</td><td name="bf1" id="bf1">Adolph</td><td name="bs1" id="bs1">Hitler</td>
</tr>
<tr>
<td name="gf2" id="gf2">Malcolm</td><td name="gs2" id="gf2">X</td><td name="bf2" id="bf2">Joseph</td><td name="bs2" id="bs2">Stalin</td>
</tr>
</tbody>
</table>
</body>
</html>
reply?
0
@SempervivumJun 23.2022 — #Make yourself familiar with CSS selectors:reply?
0
@novice2022authorJun 23.2022 — #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;}
reply?
0
@SempervivumJun 23.2022 — ##gt0, #gt2: hover {background-color: orange; color: red;}`reply?
0
@novice2022authorJun 23.2022 — #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><!DOCTYPE html>
<head>
<title>Table</title>
<style>
th:hover {background-color: black; color: gold;}
tr:hover {background-color: silver; color: white;}
#gt0,#gt1,#gt2:hover {background-color: orange; color: red;}
</style>
</head>
<body>
<table border="20" width="100%" cellspacing="5" cellpadding="20" color="red" bgcolor="orange">
<caption>Caption</caption>
<colgroup>
<col span="3" style="background-color:white; color:green; font-family:courier; font-size:50%;">
<col span="3" style="background-color:black; color:blue; font-family:verdana; font-size:40%;">
<col span="3" style="color:red; font-family:arial; font-size:10%;">
</colgroup>
<thead>
<tr>
<th colspan="3">GOOD</th><th colspan="3">BAD</th><th colspan="3">NEUTRAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Title</td><td>FIRST NAME</td><td>SURNAME</td><td>Title</td><td>FIRST NAME</td><td>SURNAME</td><td>Title</td><td>FIRST NAME</td><td>SURNAME</td>
</tr>
<tr>
<td id="gt0">Mr</td><td id="gf0">Muhammad</td><td id="gs0">Ali</td><td id="bt0">Mr</td><td id="bf0">Adolph</td><td id="bs0">Hitler</td><td id="nt0">Mr</td><td id="nf0">Mohandas</td><td id="ns0">Ghandi</td>
</tr>
<tr>
<td id="gt1">Mr</td><td id="gf1">Mike</td><td id="gs1">Tyson</td><td id="bt1">Mr</td><td id="bf1">Winston</td><td id="bs1">Churchill</td><td id="nt1">Mr</td><td id="nf1">Crocodile</td><td id="ns1">Dundee</td>
</tr>
<tr>
<td id="gt2">Mr</td><td id="gf2">Malcolm</td><td id="gs2">X</td><td id="bt2">Mr</td><td id="bf2">Joseph</td><td id="bs2">Stalin</td><td id="nt2">Mr</td><td id="nf2">Napolean</td><td id="ns2">Bonaparte</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">GOOD</td><td colspan="3">BAD</td><td colspan="3">NEUTRAL</td>
</tr>
</tfoot>
</table>
</body>
</html>
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 ?
reply?
0
@novice2022authorJun 23.2022 — #The conversation is continuing here now, from here ...reply?
0
@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;}
reply?
0
@SempervivumJun 23.2022 — #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;}`reply?
0
@novice2022authorJun 23.2022 — #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:
You may close this thread.
Thanks!
reply?
0
@novice2022authorJun 23.2022 — #Can you lock this thread and then help me here, if you not busy or sleepy ? ;)
Cheers!
reply?