Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Background Color change

Posted by: D.Joe Oct 4 2018, 01:37 PM

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>"
}

Posted by: CharlesEF Oct 4 2018, 02:18 PM

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?

Posted by: Christian J Oct 4 2018, 04:05 PM

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.

Posted by: D.Joe Oct 4 2018, 08:19 PM

@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..

Posted by: pandy Oct 4 2018, 10:28 PM

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.

Posted by: D.Joe Oct 5 2018, 01:46 PM

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...

Posted by: pandy Oct 5 2018, 02:19 PM

That's right - just forget about me. IPB Image

Posted by: Christian J Oct 7 2018, 04:51 PM

QUOTE(D.Joe @ Oct 5 2018, 08:46 PM)

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...