Solved

css

Posted on 2007-03-21
5
278 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html input 8 57
Use Images instead of radio button and get the checked value and pass it to a h2 tag 3 41
email validation 9 51
CSS question 4 29
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

730 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