function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Andrea SloanAndrea Sloan 

VisualForce how to add color to a table row

I have a Visualforce page with a table and would like to add color to my cells and in some cases to my entire row. I don't know what the syntax is to insert the color and what it is I need to insert and where in my table to indicate that I want a particular color either for a cell or for the entire row. Cna someone help me by posting the syntax in the exact format opening and closing statements that I must include for this to go through? Perhaps include a sample color that I could test out.
 
Best Answer chosen by Andrea Sloan
JeffreyStevensJeffreyStevens
Patcs is correct.  However, The align attribute of <td> is not supported in HTML5. Use CSS instead.

So your style tag becomes...
style="text-align:center;font-size:14pt;background-color:#f37422;" 

Note also - I changed the font-size part of the css to PT, not PX.

All Answers

Patcs_1Patcs_1
Hi

below is the sample code for your reference.

<table>
 <tr>
 <td style="font-size:15px;background-color: #f37422;"> <b> <u> <apex:outputLabel value="Sample Data"></apex:outputLabel> </u> </b> </td> 
 </tr>
</table>

Hope this helps!

Thanks
Andrea SloanAndrea Sloan
Thank you! What should I be replacing the word Sample data with?
Andrea SloanAndrea Sloan
I inserted part of your code per what I posted below as I wasn't sure how to insert the whole thing in terms of the syntax in the right place. Where would I put your code based on what I have below? Can you edit the below for me? Also, if there's something I need to edit to suit my personal coding let me know. With the below I get the message that I'm missing a > or />

 <TR>
            <TD ALIGN = "Center", style="font-size:15px;background-color: #f37422;">
                <B>Information and Analysis Reports</B>
            </TD>
            <TD ALIGN = "Center">
                <B> My Follow Up Reports</B>
            </TD>
             <TD ALIGN = "Center">
                <B> Visit Reports</B>
            </TD>
             
        </TR>
Andrea SloanAndrea Sloan
Hi Patcs:

I understand it's a sample code but in terms of  syntax, I'm getting an error and cannot save the page. Would you be able to tweak the below for me so it doesn't tell me I'm missing an "Element type for "TD" and that it must be following by weither ">" or "/>" Thanks for your help!

<TR>
            <TD ALIGN = "Center", style="font-size:15px;background-color: #f37422;">
                <B>Information and Analysis Reports</B>
            </TD>
            <TD ALIGN = "Center">
                <B> My Follow Up Reports</B>
            </TD>
             <TD ALIGN = "Center">
                <B> Visit Reports</B>
            </TD>
             
        </TR>
 
Patcs_1Patcs_1
Hi Andrea

There is a comma after "center" please remove it and give a try.

<TD ALIGN = "Center" style="font-size:15px;background-color: #f37422;">
                <B>Information and Analysis Reports</B>
            </TD>

It should work.

Thanks
JeffreyStevensJeffreyStevens
Patcs is correct.  However, The align attribute of <td> is not supported in HTML5. Use CSS instead.

So your style tag becomes...
style="text-align:center;font-size:14pt;background-color:#f37422;" 

Note also - I changed the font-size part of the css to PT, not PX.
This was selected as the best answer
Andrea SloanAndrea Sloan
Thank you patc and Jeffrey. This works very nicely. So that I understand for the future, Jeff, is what you changed just the order using a different language - is that what CSS is?

Now...what if I also want to tell it to increase the size of my font for antoher section outisde of my table but not make mention of a color? I tried to mimick what you ahd done just with the font size part and of course I get a syntax error. I'm nto a developer and not sure what the sequence has to be to get the code straight!!! here is what I have and you'll see that I've indicated a font size to the first line but I get a syntqax error.

<style="font-size:14pt Hello  {! $User.FirstName} </font> ;">
    <br/>
    <B>Please use the fields below to enter your desired dates for the specified reports.</B>
    <TABLE Border= "3" CELLSPACING="1" CELLPADDING="1" >
        <br/>
        <CAPTION><B> Salesforce Reports </B></CAPTION>
        <br/>
        <TR style="text-align:center;font-size:14pt;background-color:#FFFF00;">
            
            <TD  >
                <B>Information and Analysis Reports</B>
            </TD>
            <TD ALIGN = "Center">
                <B> My Follow Up Reports</B>
            </TD>
             <TD ALIGN = "Center">
                <B> Visit Reports</B>
            </TD>
             
        </TR>
JeffreyStevensJeffreyStevens
No the style attribute was to go inside of your TD tag.

Everything inside of the Style attribute is CSS.  You could (should) put it in a seperate CSS file, stored in static resources, and references from the VF page, but I was just trying to add to what you already had. 

So, going back to the TD tag that you had....
<TD ALIGN = "Center", style="font-size:15px;background-color: #f37422;">
                <B>Information and Analysis Reports</B>
  </TD>

should have become...
<TD style="text-align:center;font-size:14px;background-color:#f37422;">
                 <B>Information and Analysis Reports</B>
</TD>

Now - getting to your latest version - ...
Take the first line<style="font-size:14pt Hello  {! $User.FirstName} </font> ;">  out - there is no visualforce or HTML tag call style.  (there is an attribute that goes in most tags called style though - and that's where embedded css goes).

The reason it worked is because of the style attribute in the TR tag. 

Hope that helps

 
Andrea SloanAndrea Sloan
I didn't know CSS is a separate file. Is CSS a coding language like HTML? Why is it better to save it under a CSS file and then call it? Will my code not work if I have it embed it? This worked perfectly as you had suggested. I took out the word style but just kept the font tag with a size  in order to bee able to increase my font size for certain things I had included outside of my table. Your explnation sure helped!

Thank you!
JeffreyStevensJeffreyStevens
Yes - it's best to have the css in a seperate file and not embedded, as if you embed it, and then change - say just the color, you'll need to change it in every place you've used it.  CSS is the styling that is used by HTML.  Remember Visualforce is basically HTML, with a few VF (ie <apex:...> tags that make it visualforce. And to do much of anything in HTML you really need to know CSS.  You could spend some time at http://www.w3schools.com/css/ to get started on css.
Andrea SloanAndrea Sloan
Got it. That is great! I really appreciate your help in explaining all this to me and I will take a look at that link to try and put it all into CSS sheet.

thank you!!!!