Solved

css

Posted on 2007-03-21
5
267 Views
Last Modified: 2010-04-09
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
Comment
Question by:FrankPorter
  • 3
  • 2
5 Comments
 
LVL 9

Accepted Solution

by:
under_dog earned 500 total points
ID: 18762680
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
 

Author Comment

by:FrankPorter
ID: 18762760
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
 
LVL 9

Expert Comment

by:under_dog
ID: 18762785
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
 

Author Comment

by:FrankPorter
ID: 18762792
what application do you use to edit web pages?
0
 
LVL 9

Expert Comment

by:under_dog
ID: 18762812
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

948 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now