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

Article
2020-03-04

How do I make table data red in

Question

_{Wednesday, March 4, 2020 7:30 PM}

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>

All replies (24)

_{Wednesday, March 4, 2020 8:34 PM ✅Answered}

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

_{Wednesday, March 4, 2020 7:38 PM}

CSS

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

NuGet BaseConnectionLibrary for database connections.

StackOverFlow

_{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>

_{Wednesday, March 4, 2020 8:48 PM}

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:52 PM | 1 vote}

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 :) ~

_{Wednesday, March 4, 2020 9:01 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.

NuGet BaseConnectionLibrary for database connections.

StackOverFlow

_{Thursday, March 5, 2020 5:48 PM}

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?

_{Thursday, March 5, 2020 6:39 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:51 PM}

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="width400percent"></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:56 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:59 PM}

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

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

_{Thursday, March 5, 2020 7:25 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 8:01 PM}

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.

_{Thursday, March 5, 2020 8:02 PM}

Try adding the .css file to _Layout.cshtml e.g.

Here I added StyleSheet1.css

style in the file above

body {
}
h4 {color: red}

About.cshtml

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

NuGet BaseConnectionLibrary for database connections.

StackOverFlow

_{Thursday, March 5, 2020 9:42 PM}

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 10:02 PM}

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

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

_{Friday, March 6, 2020 3:41 PM}

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 11:23 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

_{Monday, March 9, 2020 2:09 PM}

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>

_{Tuesday, March 10, 2020 8:10 PM}

Probably (from the top of my head and since I don't use the inline expressions):

<%# (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

_{Wednesday, March 11, 2020 2:08 PM}

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.

_{Thursday, March 12, 2020 2:59 AM}

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:14 PM}

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*/
%>

_{Friday, March 13, 2020 2:07 AM}

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 [email protected].

Share via

Question

All replies (24)

Additional resources