uskams02 Posted March 4, 2015 Share Posted March 4, 2015 I am very new to this, so I may state some things that are pretty obvious. I am partnering on a html application project outside of my normal responsibilities, and I am just not understanding what I need to do to accomplish setting a background color for a specific row of a very long table. We are utilizing HTML 5, which from what I understand does not support the previous method of selecting a background, but instead you have to use CSS to accomplish this. I would like to set a background color for specific rows of a table. I do not want to do odd and even background coloring. Below is an example of the table code already written. I am trying to figure out how I can give "tr id=Week1" a back ground color to stand out from the other rows of data within the table. I have also attached a screen shot of the html app to help convey what it currently looks like and what I hope this forum can help me with. I would like to add a background color to the row with the "blue" font. </fieldset> </div><div overflow: auto;><table id="tblLogData" ><thead><tr><th>Log Date</th><th>Notes</th><th>Weight (lbs)</th><th>%Change (initial weight)</th><th>Water Goal (oz)</th><th>Water Actuals (oz)</th><th>% Achieved</th><th>Step Goal</th><th>Step Actuals</th><th>% Achieved</th><th>Activity Goal (mins)</th><th>Activity Actuals (mins)</th><th>% Achieved</th><th>Distance Goal (miles)</th><th>Distance Actuals (miles)</th><th>% Achieved</th></tr></thead><tbody><tr id="Week 1"><td style="width:30%;font-weight:bold;font-style:italic;color:Blue" valign="bottom">WEEK 1 - H2O</td><td style="width:30%;font-weight:bold;font-style:italic;color:Blue" valign="bottom">WATER! 320 OUNCE WEEKLY GOAL!</td><td style="width:4%" valign="bottom"><div contenteditable="true"></div></td><td style="width:4%" valign="bottom"></td><td style="width:2%;font-weight:bold;font-style:italic;color:Blue" valign="bottom">320</td><td style="width:2%" valign="bottom"></td><td style="width:4%" valign="bottom"></td><td style="width:2%" valign="bottom"></td><td style="width:2%" valign="bottom"></td><td style="width:4%" valign="bottom"></td><td style="width:2%" valign="bottom"></td><td style="width:2%" valign="bottom"></td><td style="width:4%" valign="bottom"></td><td style="width:2%" valign="bottom"></td><td style="width:2%" valign="bottom"></td><td style="width:4%" valign="bottom"></td></tr><tr id="03/23/2015"><td style="width:30%" valign="bottom">Monday, March 23rd</td><td style="width:30%" valign="bottom">Week 1 - Total of 320 oz of water for this week!</td><td style="width:4%" valign="bottom"><div contenteditable="true"></div></td><td style="width:4%" valign="bottom"></td><td style="width:2%" valign="bottom">45.71</td><td style="width:2%" valign="bottom"><div contenteditable="true"></div></td><td style="width:4%" valign="bottom"></td><td style="width:2%" valign="bottom"></td><td style="width:2%" valign="bottom"><div contenteditable="true"></div></td><td style="width:4%" valign="bottom"></td><td style="width:2%" valign="bottom"></td><td style="width:2%" valign="bottom"><div contenteditable="true"></div></td><td style="width:4%" valign="bottom"></td><td style="width:2%" valign="bottom"></td><td style="width:2%" valign="bottom"><div contenteditable="true"></div></td><td style="width:4%" valign="bottom"></td> Link to comment Share on other sites More sharing options...
davej Posted March 4, 2015 Share Posted March 4, 2015 Your id's are invalid. Limit yourself to [a-zA-Z0-9_-] and don't begin with a number, so id="Week01" is valid and id="D03-23-2015" is valid. Try something like... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>td,th{border:1px solid #999;}th{background-color:#ddd;}#Week01{background-color:#fbb}#D03-23-2015{background-color:#bbf;}.s30a{width:30%;font-weight:bold;font-style:italic;color:Blue;}.s2a{width:2%;font-weight:bold;font-style:italic;color:Blue;}.vab{vertical-align:bottom}.w4{width:4%}.w2{width:2%}</style></head><body><table id="tblLogData" ><thead><tr><th>Log Date</th><th>Notes</th><th>Weight (lbs)</th><th>%Change (initial weight)</th><th>Water Goal (oz)</th><th>Water Actuals (oz)</th><th>% Achieved</th><th>Step Goal</th><th>Step Actuals</th><th>% Achieved</th><th>Activity Goal (mins)</th><th>Activity Actuals (mins)</th><th>% Achieved</th><th>Distance Goal (miles)</th><th>Distance Actuals (miles)</th><th>% Achieved</th></tr></thead><tbody><tr id="Week01"><td class="s30a vab">WEEK 1 - H2O</td><td class="s30a vab">WATER! 320 OUNCE WEEKLY GOAL!</td><td class="w4 vab"><div contenteditable="true"></div></td><td class="w4 vab"></td><td class="s2a vab">320</td><td class="w2 vab"></td><td class="w4 vab"></td><td class="w2 vab"></td><td class="w2 vab"></td><td class="w4 vab"></td><td class="w2 vab"></td><td class="w2 vab"></td><td class="w4 vab"></td><td class="w2 vab"></td><td class="w2 vab"></td><td class="w4 vab"></td></tr><tr id="D03-23-2015"><td class="w30 vab">Monday, March 23rd</td><td class="w30 vab">Week 1 - Total of 320 oz of water for this week!</td><td class="w4 vab"><div contenteditable="true"></div></td><td class="w4 vab"></td><td class="w2 vab">45.71</td><td class="w2 vab"><div contenteditable="true"></div></td><td class="w4 vab"></td><td class="w2 vab"></td><td class="w2 vab"><div contenteditable="true"></div></td><td class="w4 vab"></td><td class="w2 vab"></td><td class="w2 vab"><div contenteditable="true"></div></td><td class="w4 vab"></td><td class="w2 vab"></td><td class="w2 vab"><div contenteditable="true"></div></td><td class="w4 vab"></td></tr></table> </body></html> Link to comment Share on other sites More sharing options...
tejasamrute Posted March 5, 2015 Share Posted March 5, 2015 (edited) <style type="text/css">#Week1 { background-color:Lavender; /* Change colour as per your need*/ color:blue; font-weight:bold; font-style:italic;</style> Add the above color in your <head> section <tr id="Week 1"><--- Your Content ----></tr> This will make.....background color of the row Lavender & font in blue & bold-italic Edited March 5, 2015 by Tezzo Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now