tags:

views:

168

answers:

3

I am working with the following code:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style type="text/css">
    td.one
    {
      align="center";
      colspan="3";
      bgcolor="lightgrey";
      style="font-size:15px;font-weight:bold;"
    }
  </style>
</head>

<body>
  <table border="1" cellspacing="1" cellpadding="1" width="100%">
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td class="one">Session 1</td>
     <td class="one">Session 1</td>
   </tr>
</body>

This CSS is not working for me. I want to make classes so different <td> elements will have different appearances.

+2  A: 

There's two things wrong with your current code. First, you're trying to set attributes of td with CSS, which isn't possible - you can only change styles. You have to set the align, colspan and bgcolor attributes inline (though there are CSS equivalents of some of these).

Second, the syntax is incorrect for your CSS rules. It should look like this:

td.one
{
    font-size: 15px;
    font-weight: bold;
}
Daniel Lew
+11  A: 

You're using HTML attribute names and syntax in your stylesheet, whereas you need to be using CSS names and syntax:

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            td.one
            {
                text-align: center;
                /* There's no way to do colspan="3" in CSS */
                background-color: lightgrey;
                font-size: 15px;
                font-weight:bold;
            }
        </style>
    </head>

<body>
  <table border="1" cellspacing="1" cellpadding="1" width="100%">
   <tr>
     <td> </td>
     <td> </td>
     <td class="one">Session 1</td>
     <td class="one">Session 1</td>
   </tr>
</body>
RichieHindle
The colspan can of course be set in the HTML:<td class="one" colspan="3">
Tyler Rash
A: 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        td.one
        {
            text-align:"Center";
            background-color:Gray;
            font-size:15px;
            font-weight:bold;
        }
    </style>
</head>

<body>
  <table border="1" cellspacing="1" cellpadding="1" width="100%">
   <tr>
     <td> </td>
     <td> </td>
     <td class="one" colspan="3">Session 1</td>
     <td class="one">Session 1</td>
   </tr>
</body>
Serapth