Background Color change, Changing Background color based on column value of a HTML Report |
Background Color change, Changing Background color based on column value of a HTML Report |
D.Joe |
Oct 4 2018, 01:37 PM
Post
#1
|
Group: Members Posts: 3 Joined: 4-October 18 Member No.: 26,722 |
Hi , i am using the below script to convert CSV File to HTML Table (Shell Script to be used) , and change the background color of the cell of 1st column, if the value is less than 100 to RED. If the value=100 then as is else RED..Below is the script/code (suggested in one of the Forums) , however the background color remains the same (Lemon Chifon) even for the values less than 100. I am new to HTML..Any help on this will be much appreciated..
BEGIN { print "<html><head>" print "<title >Title </title>" print "<style type=\"text/css\">" print ".error { print " color: red," print " font-size: larger," print "}" print "</style></head>" print "<body>" print "<p>The report provides overall Percentage Secured in the given subjects.</p>" print "<table border=1 bgcolor=\"LemonChiffon\" cellspacing=1 cellpadding=1>" } NR == 1 # Header row print "<tr>" print "<th><Score %></th>" print "<th><Status></th>" print "<th><Exam Date></th>" print "<th><Term></th>" print "<th><Subject></th>" print "</tr>" } NR > 1 { # Data rows print "<tr>" for ( i = 1; i <= NF; i++ ) { class = $i < 100 ? "class=\"error\"" : "" printf "<td %s>%s</td>\n", class, $i } print "</tr>" } |
CharlesEF |
Oct 4 2018, 02:18 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Your CSS for .error doesn't change the background color. It only changes the text color and font size. Does the text show in RED?
|
Christian J |
Oct 4 2018, 04:05 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
This is incorrect:
QUOTE CODE print ".error { print " color: red," print " font-size: larger," print "}" (each CSS property/value pair must be separated by semicolons, not commas). A few sidenotes: QUOTE CODE BEGIN { print "<html><head>" It's good practice to use a DOCTYPE before the HTML: CODE BEGIN { print "<!doctype html><html><head>" (without this browsers emulate bugs from older versions). QUOTE CODE print "<table border=1 bgcolor=\"LemonChiffon\" cellspacing=1 cellpadding=1>" It's more practical to only use CSS for decorations, i.e. not mix in older presentational HTML attributes like the above. |
D.Joe |
Oct 4 2018, 08:19 PM
Post
#4
|
Group: Members Posts: 3 Joined: 4-October 18 Member No.: 26,722 |
@Charles , No the text color remains the same. it doesn't change... Style attrributes are not getting called i guess . Font/Color/BG-Color everything remains the same..Nothing changes... ..Banging my head.. |
pandy |
Oct 4 2018, 10:28 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Christian told you. The delimiter between property-value pairs should be a semicolon. Not a comma as you have it. Lite this.
CODE print ".error { print " color: red;" print " font-size: larger;" print "}" It still won't change the background, because you haven't defined a background color. |
D.Joe |
Oct 5 2018, 01:46 PM
Post
#6
|
Group: Members Posts: 3 Joined: 4-October 18 Member No.: 26,722 |
Thank you so much Christian & Charles.
Christian was right by inserting the correct Background property and <Value> and by replacing the comma with semi colon has done the trick. I am now able to generate the Background color. Thank you once again to both Lastly one small doubt, how to centre-allign the following Header. It should come on top of the Column headers and centre allign. print "</p>"report provides overall Percentage Secured in the given subjects"</p>" Thanks alot... |
pandy |
Oct 5 2018, 02:19 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
That's right - just forget about me.
|
Christian J |
Oct 7 2018, 04:51 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Thank you once again to both You're welcome! QUOTE Lastly one small doubt, how to centre-allign the following Header. It should come on top of the Column headers and centre allign. You could use a CAPTION element inside the table, its default styling is to be centered over the table grid. See http://www.htmlhelp.com/reference/html40/tables/caption.html You might also use a heading element (H1, H2 etc) and make its text centered with CSS "text-align: center". QUOTE print "</p>"report provides overall Percentage Secured in the given subjects"</p>" The above example starts with a P end tag, not a start tag, and the quote characters seem wrong... |
Lo-Fi Version | Time is now: 23rd April 2024 - 04:11 PM |