none
How do I make table data red in <td>? RRS feed

  • Question

  • There is this code that have a name in the table data <td> and I have been asked to make that data red. Right now it is bold (strong). I need to add code to also make it appear read. How do I do this?

    Here is the code in C#

    <ItemTemplate>
        <%# 
            Eval("AttorneyPartyID").ToString() != Eval("PartyID").ToString() ? 
            "<table><tr><td><strong>" + Eval("AttorneyFullName") + "</strong></td></tr>"
            : 
            "<strong>Pro Se</strong>" 
        %>
    </ItemTemplate>


    • Edited by winkimjr2 Wednesday, March 4, 2020 7:33 PM added <td> to the question
    Wednesday, March 4, 2020 7:30 PM

Answers

  • Hi Karen. So based on my code <td><strong>" + Eval("AttorneyFullName") + "</strong></td> and based on your suggestion, I did it this way but the name is now showing without bold which is fine however its font is not in red.

    Here is my new code

    <td style='color:red>" + Eval("AttorneyFullName") + "</td>

    If there is another css rule with a higher specificity that will override your styling. Here is a very simple example for styling in general.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
    
        <style>
            .kp {
                color: green;
                font-weight: bold
            }
        </style>
    </head>
    <body>
        <table>
        <tr>
            <td>First</td>
            <td style="color: red; font-weight: bold">Middle</td>
            <td class="kp">last</td>
        </tr>
    </table>
    </body>
    </html>


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange


    Wednesday, March 4, 2020 8:34 PM
    Moderator

All replies

  • CSS

    <td style="color:red;">

    And more properties can be set separated by a semicolon or even better yet create a .css file, include it to the project or just the page and reference a specific style <td class="red" where red is a style named .red


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange

    Wednesday, March 4, 2020 7:38 PM
    Moderator
  • Hi Karen. So based on my code <td><strong>" + Eval("AttorneyFullName") + "</strong></td> and based on your suggestion, I did it this way but the name is now showing without bold which is fine however its font is not in red.

    Here is my new code

    <td style='color:red>" + Eval("AttorneyFullName") + "</td>

    Wednesday, March 4, 2020 7:55 PM
  • Hi Karen. So based on my code <td><strong>" + Eval("AttorneyFullName") + "</strong></td> and based on your suggestion, I did it this way but the name is now showing without bold which is fine however its font is not in red.

    Here is my new code

    <td style='color:red>" + Eval("AttorneyFullName") + "</td>

    If there is another css rule with a higher specificity that will override your styling. Here is a very simple example for styling in general.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
    
        <style>
            .kp {
                color: green;
                font-weight: bold
            }
        </style>
    </head>
    <body>
        <table>
        <tr>
            <td>First</td>
            <td style="color: red; font-weight: bold">Middle</td>
            <td class="kp">last</td>
        </tr>
    </table>
    </body>
    </html>


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange


    Wednesday, March 4, 2020 8:34 PM
    Moderator
  • You should learn how to use Bootstrap for various colors of HTML text that will be displayed on tne  page.  Any decent Web UI solution would have Bootstrap implemented. Maybe Bootstrap is implemented in your Web UI solution.

    https://www.w3schools.com/bootstrap/bootstrap_alerts.asp

    Wednesday, March 4, 2020 8:48 PM
  • Hi winkimjr2,

    Table tag at the end not closed ! 

    "<table><tr><td><strong>" + Eval("AttorneyFullName") + "</strong></td></tr>"

    try this,

     <ItemTemplate>
                        <%# 
            Eval("AttorneyPartyID").ToString() != Eval("PartyID").ToString() ? 
            "<table><tr><td style='color:red;><strong>" + Eval("AttorneyFullName") + "</strong></td></tr></table>"
            : 
            "<strong>Pro Se</strong>" 
                        %>
                    </ItemTemplate>


    Please remember to mark the replies as answers if they helped you :) ~


    • Edited by Rebin Qadir Wednesday, March 4, 2020 8:53 PM
    Wednesday, March 4, 2020 8:52 PM
  • Here is a simple example for working with Bootstrap 4.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <link href="Content/bootstrap.css" rel="stylesheet" />
    </head>
    <body>
    <div class="container-fluid">
        <table class="mt-4 ml-2">
            <tr>
                <td>First</td>
                <td class="text-danger font-weight-bold">Middle</td>
                <td style="font-weight: bold; color: red">last</td>
            </tr>
        </table>
    </div>
    </body>
    </html>

    Note the Bootstrap red is slightly different than conventional red but you can override the style in a css file or create a new base Bootstrap file via a tool such as Pinegrow editor is what we use for our agency.


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange

    Wednesday, March 4, 2020 9:01 PM
    Moderator
  • Thanks for your response. The table is not closed because there are other table rows that I did not include in this question. There are 4 more rows. In the code I have the table is closed </table>

    Because there is a css file, I think I will add new code to make name red. The reason is that there are other pages that will need similar change to make name red. I am learning how to do this JavaScript stuff. Probable something like this. .

    .InactiveAttorney
    {
        color: #AD0000;
        font-weight:bold
    }

    Now how would I call it on the line I want to use it inside the table row, data cell? And on any other page where I need to make name red? 



    • Edited by winkimjr2 Thursday, March 5, 2020 6:28 PM Add more questions
    Thursday, March 5, 2020 5:48 PM
  • Just use <td class="InactiveAttorney">Name Here</td>

    Although I think classes are usually named in lower case, so perhaps it should be inactiveAttorney.

    Your HTML should include reference to your css file at the header section.

    https://www.w3schools.com/css/css_howto.asp


    For every expert, there is an equal and opposite expert. - Becker's Law


    My blog


    My TechNet articles



    Thursday, March 5, 2020 6:39 PM
    Moderator
  • Nice catch Naomi about using lower case for naming the class. I did change it. However the page I am making changes to is a usercontrol which is using a <asp:Panel></asp:Panel>

    Then inside the asp Panel there is a <div class="width100percent"></div>

    So there is no header for me to add a reference for my css class. I am sure there is a way to do it inside the panel or div. I just do not know how to do it. 

    Thursday, March 5, 2020 6:51 PM
  • Do you have an access to the HTML where you add your asp panel? Your css class should be added to that HTML. 

    For every expert, there is an equal and opposite expert. - Becker's Law


    My blog


    My TechNet articles

    Thursday, March 5, 2020 6:56 PM
    Moderator
  • I added the inactiveAttorney class to to an existing css file names viewcase.css. This is already added to the ViewCase.aspx page like this  

    <link href="../Content/viewcase.css" type="text/css" rel="stylesheet" />

    My hope was my code should work now but it is not. It is frustrating. My change is in a page named ucPartiesAttorney.ascx


    • Edited by winkimjr2 Thursday, March 5, 2020 7:10 PM add name of page where I am making changes
    Thursday, March 5, 2020 6:59 PM
  • Hmm,

    I think it should have worked. When you open your page in the browser, can you do View Source? Try to see the resulting html.

    Also, I normally use F12 (Development Tools) and then inspect the element I need. It should show you the classes used and all the properties. May be something is overriding your style?


    For every expert, there is an equal and opposite expert. - Becker's Law


    My blog


    My TechNet articles


    Thursday, March 5, 2020 7:25 PM
    Moderator
  • That is great advise. I am going to do exactly as you suggested and let you know. When I look in the resulting html here is what I see

     <table><tr><td class=" inactiveattorney="">ESTHERNAME, RACHELET</td></tr> 

    The class inactiveAttorney equals empty string. That is class=" inactiveattorney="". I think this is the problem. I named the class .inactiveAttorney. nI do not know why html is showing inactiveattorney and empty string.  

     
    • Edited by winkimjr2 Thursday, March 5, 2020 8:50 PM Added more explaination of what html is showing
    Thursday, March 5, 2020 8:01 PM
  • Try adding the .css file to _Layout.cshtml e.g.

    Here I added StyleSheet1.css

    style in the file above

    body {
    }
    h1 {color: red}
    

    About.cshtml

    @{
        ViewBag.Title = "About";
    }
    <h2>@ViewBag.Title.</h2>
    <h3>@ViewBag.Message</h3>
    <h1>Hello</h1>
    <p>Use this area to provide additional information.</p>


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange

    Thursday, March 5, 2020 8:02 PM
    Moderator
  • Please post questions related to web development and ASP.NET/HTML/CSS in the ASP.NET forums. This forum is only for C#-specific questions.

    Michael Taylor http://www.michaeltaylorp3.net

    Thursday, March 5, 2020 9:42 PM
    Moderator
  • Can you now post your C# code that used to generate that?

    Obviously this is something wrong in the resulting html as it should have been just

    <td class="inactiveAttorney">Name</td>

    So, let's look at your code first and also what tools do you use and what kind of project it is?

    The code I see at the very top of your question looks like old style ASP code to me. Is it what it's used?


    For every expert, there is an equal and opposite expert. - Becker's Law


    My blog


    My TechNet articles


    Thursday, March 5, 2020 10:02 PM
    Moderator
  • Naomi the code is in C# and this is a web application not old ASP code.

    Before I add the code behind, I want to also say that the product owner have added a condition on when to make the attorney name red. This will be when fActive is false or have a value =0.

    So on this line of code I need to add a condition when fActive =false then make the AttorneyFullName red, but I do not know how to do it

    "<table><tr><td><strong>" + Eval("AttorneyFullName") + "</strong></td></tr>"

    Here is an example of some code with condition in the application. I need to do something similar.

    <tr><td><%# (bool)Eval("PartyPhoneNumber") == true ? "<img src=\"../../Images/YellowLock_16x16.png\" alt=\"Phone Secured\" />":"" %><%#Eval("PartyPhoneNumber").ToString() != "" && Eval("PartyPhoneNumber") != null ? "<strong>" + Eval("PartyPhoneNumber") + "</strong>":string.Empty%></td></tr> 

     Finally here is the C# code

    using Work.CustomObjects;
    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    namespace Work.CustomObjects
    {
        #region PartyInformations
        /// This is the PartyInformation object.
        [Serializable()]
        public class PartyInformation
        {
            #region Class Members
            private string _attorneyFullName;
            public string AttorneyFullName
            {
                get { return this._attorneyFullName; }
                set { this._attorneyFullName = value; }
            }
            private DateTime _attorneyRemovedDate;
            public DateTime AttorneyRemovedDate
            {
                get { return this._attorneyRemovedDate; }
                set { this._attorneyRemovedDate = value; }
            }
            private bool _fActive;
            public bool fActive
            {
                get { return this._fActive; }
                set { this._fActive = value; }
            }
            private DateTime _dateRemoved;
            public DateTime DateRemoved
            {
                get { return this.__dateRemoved; }
                set { this._dateRemoved = value; }
            }
            
            private string _attorneyStanding;
            public string AttorneyStanding
            {
                get { return this._attorneyStanding; }
                set { this._attorneyStanding = value; }
            }
            #region Private Methods
            /// PopulatePartyInformation()
            private void PopulatePartyInformation(DataRow row)
            {
                try
                {
                    //TryParse non-nullable columns
                    DateTime parseDateRemoved = new DateTime();         DateTime.TryParse(row["AttorneyRemovedDate"].ToString(), out parseDateRemoved);
                    DateTime parseAttorneyRemovedDate = new DateTime(); DateTime.TryParse(row["AttorneyRemovedDate"].ToString(), out parseAttorneyRemovedDate);
                    bool parsefActive = false;                          Boolean.TryParse(row["fActive"].ToString(), out parsefActive);
                    //Populate members of class
                    this._fActive = parsefActive == true ? true : false;
                    this._attorneyRemovedDate = parseDateRemoved;
                    this._attorneyStanding = row["Attorney Standing"].ToString();                         
                }
                catch (Exception e) { throw e; }
            }
            #endregion
        }
    }

    Friday, March 6, 2020 3:41 PM
  • The reason I asked is that I'm now more familiar with the Razor syntax https://www.w3schools.com/asp/razor_syntax.asp vs. what you're using https://support.microsoft.com/en-us/help/976112/introduction-to-asp-net-inline-expressions-in-the-net-framework



    For every expert, there is an equal and opposite expert. - Becker's Law


    My blog


    My TechNet articles

    Friday, March 6, 2020 11:23 PM
    Moderator
  • I think I need to use inline expression. However I have no idea how to do it.

    I did add css class to existing css file. 

    .inactiveAttorney

    { color: #AD0000;   

    font-weight:bold

    }

    The product owner have asked me to only make the attorney name red when <b>fActive = 0</b> (false).

    The code behind have this code

    private bool _fActive;
    public bool fActive
    {
       get { return this._fActive; }
       set { this._fActive = value; }
    }
    this._fActive = parsefActive == true ? true : false; //This is how it is called or populated

    I have successfully been able to use css class to make attorney name red. However, I need help to add a condition so that the name is red only when fActive =false (0).

    Here is my code which is working and needs adding condition

    "<table><tr><td class='inactiveAttorney'>" + Eval("AttorneyFullName") + "</td></tr></table>"
    The fActive is a Boolean and else where in the code I see something done when a Boolean is true. I need to do something similar but I do not know how.


    Here is that example.

    <tr><td><%# (bool)Eval("PartyConfidentialHomePhone") == true ? "<img src=\"../../Images/YellowLock_16x16.png\" alt=\"Home Phone Secured\" />":"" %><%#Eval("PartyHomePhone").ToString() != "" && Eval("PartyHomePhone") != null ? "<strong>" + Eval("PartyHomePhone") + "</strong>":string.Empty%></td></tr>





    • Edited by winkimjr2 Monday, March 9, 2020 5:34 PM Updated reply saying I am able to make attorney name red. Need help to add a condition to make name red only when fActive - false
    Monday, March 9, 2020 2:09 PM
  • Probably (from the top of my head and since I don't use the inline expressions):

    <table><tr>

    <%# (bool) Eval("fActive")==true ? "<td>" : "<td class='inactiveAttorney'>"+ Eval("AttorneyName") + "</td>" %>


    For every expert, there is an equal and opposite expert. - Becker's Law


    My blog


    My TechNet articles

    Tuesday, March 10, 2020 8:10 PM
    Moderator
  • Hi Naomi, I am trying to get this code you gave me to work for me. But the first error I am getting is The 'table' does not exist in the current context, then The name 'tr' does not exist in the current context and Invalid expression term '%'

    However when I add double quotes in front of "<table, because the code for the table that I need to make changes to have double quotes in front of it, and then I add a closing tr tag (</tr>) I get several errors. The first one is The name 'fActive' does not exist in the current context. Syntax error ':' expected. 

    • Edited by winkimjr2 Wednesday, March 11, 2020 2:13 PM Added new code of what I tried
    Wednesday, March 11, 2020 2:08 PM
  • A bit of guessing game, but try (using example above):

    <table><tr>
    
    <%# (bool)Eval("fActive")==true ? "<td>" : "<td class='inactiveAttorney'>" %><%# Eval("AttorneyName") %>
    </td></tr></table>


    For every expert, there is an equal and opposite expert. - Becker's Law


    My blog


    My TechNet articles

    Thursday, March 12, 2020 2:59 AM
    Moderator
  • Hi Naomi, Kareninstructor and CoolDadTX, 

     

    I wanted to thank you for trying to help me on this problem. I also wanted to post my solution that fixed the problem. After hours of try and error and frustration, I found a solution that works. So again, I wanted to let you know this is now fixed. Here is my solution. Looks pretty simple! So the logic is, if AttorneyPartyID = PartyID that is Pro Se, else if fActive is false that means the attorney is inactive. Use inactiveAttorney css class to display attorney name with red font

    else the attorney is active and no need to display name in red fond. Display in bold font.

    <%# 
        Eval("AttorneyPartyID").ToString() == Eval("PartyID").ToString()
        ?   "Pro Se"
        : (bool) Eval("fActive") == false
        ?  "<table><tr><td class='inactiveAttorney'>" + Eval("AttorneyFullName") + "</td></tr>" /*This is inactive attorney*/
        :"<table><tr><td>" + Eval("AttorneyFullName") + "</td></tr>" /*This is Active attorney*/
    %> 



    • Edited by winkimjr2 Thursday, March 12, 2020 2:20 PM Explained code logic
    Thursday, March 12, 2020 2:14 PM
  • Hi winkimjr2,

    It seems that your problem has been solved.

    Please take some time to mark one or more responses as answers (including your own),  so that it will help other members to find the solution quickly if they face a similar issue.

    Best Regards,

    Timon


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, March 13, 2020 2:07 AM