• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 299
  • Last Modified:

css

Hi,

Please assist is it possible to add name to a <TD> so that it would change the color depending o n the TD's name? I'd like to know how can we add it in the CSS file below.

<table name ="old">
<tr>
<td name="red">this background will now turn red
</td><td>normal</td>
</tr>
</table>

Thanks


table #old ,#old td,#old th{
      font-size:100%;
      font-family: Arial;
      border:1px solid #666;
      border-collapse:collapse;
      margin:0;
      padding:0;
}
#old td,#old th{
      font-size:90%;
      padding:.2em .5em;
      font-weight:bold;
      vertical-align:top;
      font-weight:normal;
}
#old thead th{
      font-weight:bold;
      font-family: Arial;
      background:#FFD735;
      font-size: 11px;
      color:black;
}
#old tbody td{
      font-size:70%;
      background:#ccc;
}
#old tbody th{
      font-size:70%;
      background:#999;
}
#old tbody tr.odd td{
      font-size:70%;
      background:#eee;
}
#old tbody tr.odd th{
      font-size:70%;
      background:#ccc;
}
#old caption {
      background:#666;
      color:#fff;
      font-weight:bold;
      text-align:left;
      font-size:75%;
}
0
FrankPorter
Asked:
FrankPorter
  • 3
  • 2
1 Solution
 
under_dogCommented:
You want to give the TD a class rather than a name like:

<table name ="old">
<tr>
<td class="red">this background will now turn red
</td><td>normal</td>
</tr>
</table>

and then add this to your styles:

.red {

  background-color: red;

}
0
 
FrankPorterAuthor Commented:
sad to say the color didnt change, ther must be something wrong with the declaration in the style file.

i added this to the end

.red {

  background-color: red;

}
0
 
under_dogCommented:
It works for me ... here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
      table #old ,#old td,#old th{
              font-size:100%;
              font-family: Arial;
              border:1px solid #666;
              border-collapse:collapse;
              margin:0;
              padding:0;
      }
      #old td,#old th{
              font-size:90%;
              padding:.2em .5em;
              font-weight:bold;
              vertical-align:top;
              font-weight:normal;
      }
      #old thead th{
              font-weight:bold;
              font-family: Arial;
              background:#FFD735;
              font-size: 11px;
              color:black;
      }
      #old tbody td{
              font-size:70%;
              background:#ccc;
      }
      #old tbody th{
              font-size:70%;
              background:#999;
      }
      #old tbody tr.odd td{
              font-size:70%;
              background:#eee;
      }
      #old tbody tr.odd th{
              font-size:70%;
              background:#ccc;
      }
      #old caption {
              background:#666;
              color:#fff;
              font-weight:bold;
              text-align:left;
              font-size:75%;
      }
      .red {
            background-color: red;      
      }

</style>
</head>

<body>
<table name ="old">
<tr>
<td class="red">this background will now turn red
</td><td>normal</td>
</tr>
</table>

</body>
</html>
0
 
FrankPorterAuthor Commented:
what application do you use to edit web pages?
0
 
under_dogCommented:
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now