Skip to main content
helpvid
helpvid
Participant
September 21, 2009
Answered

Change text color in <td></td>

  • September 21, 2009
  • 1 reply
  • 135864 views

Guys i have a table and i want to change the text color within certain cells, I know i can easile change the background color, and i am also aware i can wrap the text in a header tag <h1>text<.h1>, but is there another way to get this like <td> text color="#ff9933" my text</td>

This topic has been closed for replies.
Correct answer Nadia-P

Something like this: The following will style all the text in a cell either orange or blue.  You can go even further and add the colour to a <p> tag inside the cell if you need to.

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#maintable {width: 800px; margin: 0 auto;}

 #maintable td.orange {color: #ff9933;}
 #maintable td.blue {color:#00F;}

</style>
</head>
<body>
<table width="800" border="0" cellpadding="0" cellspacing="0" id="maintable">
  <tr>
    <td class="orange">THIS IS SOME TEXT COLOURED ORANGE</td>
  </tr>
  <tr>
    <td class="blue">THIS IS SOME TEXT COLOURED BLUE</td>
  </tr>
</table>
</body>
</html>

1 reply

Nadia-P
Nadia-PCorrect answer
Inspiring
September 21, 2009

Something like this: The following will style all the text in a cell either orange or blue.  You can go even further and add the colour to a <p> tag inside the cell if you need to.

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#maintable {width: 800px; margin: 0 auto;}

 #maintable td.orange {color: #ff9933;}
 #maintable td.blue {color:#00F;}

</style>
</head>
<body>
<table width="800" border="0" cellpadding="0" cellspacing="0" id="maintable">
  <tr>
    <td class="orange">THIS IS SOME TEXT COLOURED ORANGE</td>
  </tr>
  <tr>
    <td class="blue">THIS IS SOME TEXT COLOURED BLUE</td>
  </tr>
</table>
</body>
</html>
Nadia-P
Nadia-P
Inspiring
September 21, 2009

And one more example:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#maintable {
     width: 800px;
     margin: 0 auto;
}

#maintable td.orange {
     color: #ff9933;
}

#maintable td.blue {
     color:#00F;
}

#maintable p.red {
     color: red;
}
</style>
</head>
<body>
<table width="800" border="0" cellpadding="0" cellspacing="0" id="maintable">
  <tr>
    <td valign="top" class="orange"><p>THIS IS SOME TEXT COLOURED RED</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec.</p></td>
  </tr>
  <tr>
    <td class="blue"><p>THIS IS SOME TEXT COLOURED BLUE</p>
      <p class="red">This paragraph is red, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus</p></td>
  </tr>
  <tr>
    <td class="blue"> </td>
  </tr>
</table>
</body>
</html>
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices