Link to home
Start Free TrialLog in
Avatar of CipherIS
CipherISFlag for United States of America

asked on

HTML add CSS to <TD>

I am trying to add CSS to <TD> in a <TABLE>  I am using W3C to validate.  I have the below code

<td class="row3">

Open in new window


but it gives me below error:

Line 111, Column 29: The scope attribute on the td element is obsolete. Use the scope attribute on a th element instead.

How do I assign my CSS to the <TD>?
Avatar of Randy Downs
Randy Downs
Flag of United States of America image

Try <th class="row3"> or just assign th to row3
How is "row3" defined in CSS?
Avatar of CipherIS

ASKER

Doesn't work and I need to assign it to a TD
Put your row3 attributes in a css statement like the following:

Typical default display properties
th {
display: table-cell;
vertical-align: inherit; }
th {
font-weight: bold;
text-align: center; }
Some nice examples here.
Here is my CSS

.pretty-table td[scope=row3] {
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #0000FF;
    color: #FFFFFF
}

Open in new window


I tried below but its still not displaying my CSS

<td class="row3"><img src=images/paella.jpg alt='Paella' height=100 width=150></td>
It must be something in the 'row3' definition because there is no problem with assigning a generic 'row3' CSS to a <td>.   http://www.dibsiam.com/TD-CSS.html passes validation with no errors.
The link that you provided is displaying the wrong color.  It should be dark blue

http://www.computerhope.com/cgi-bin/htmlcolor.pl?c=0000FF
Just use ".row3" in the CSS instead of ".pretty-table td[scope=row3]"
When I use scope and validate against W3C I receive an error.
Possible to do this & switch th with td?

.pretty-table th[scope=row3] {
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #0000FF;
    color: #FFFFFF
}

Open in new window


Alternative :


  <tr>
    <th scope="row3">Text</th>
    <th scope="row3">More Text</th>
  </tr>

Open in new window

@chaau - that worked but I lost my forecolor now.
Why can't you use:
.row3 {
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #0000FF;
    color: #FFFFFF
}

Open in new window

and leave your TD as it was:
<td class="row3"><img src=images/paella.jpg alt='Paella' height=100 width=150></td> 

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of chaau
chaau
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
@chaau - I am using your suggestion.  I lost my forecolor on my second column.
OK, show us your second column HTML/CSSclass
.row4 {
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #0000FF;
    color: #FFFFFF
}

Open in new window

            <tr>
            <td class="row4"><img src=images/paella.jpg alt='Paella' height=100 width=150></td>
            <td class="row4">Paella</td>
            </tr>

Open in new window

One suggestion: Apply class to <TR>. If all TD's are the same in a row, there is no reason to apply class to the TD's individually
Do you have a separate CSS definition for "TD"?
This is my CSS

.title {
    background-color: #630C0C;
    color: white;
    font-size: 65px;
}

.location
{ 
    font-weight: bold;
    font-size: 25px;
}

.valigntop {
    display: table-cell;
    vertical-align: top;
}

.alignleft {
    text-align: left;
}

.aligncenter {
    text-align: center;
}

.tablecenter {
    margin-left:auto; 
    margin-right:auto;
}

.tdleft {
        text-align: left;
}

.pretty-table {
    border-collapse: collapse;
    margin-left:auto; 
    margin-right:auto;
}
.pretty-table th, .pretty-table td { padding: 0.5em; }
.pretty-table th[scope=col]
{
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}
.pretty-table th+th[scope=col] { border-right: 1px dotted #666; }
.pretty-table th[scope=row] {
    border-right: 2px solid #333;
    border-bottom: 2px solid #000000;
    border-left: 2px solid #000000;
}
.pretty-table td[scope=row1] {
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #0000FF;
}
.pretty-table td[scope=row2] {
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #0066FF;
}
.pretty-table td[scope=row3] {
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #0000FF;
    color: #FFFFFF
}

.row4 {
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #0000FF;
    color: #FFFFFF
}

.pretty-table th, .pretty-table td { color: #632a39; }
.pretty-table th[scope=col] { color: #000; background-color: #8fadcc; }
.pretty-table th+th[scope=col] { color: #fff; background-color: #7d98b3; }
.pretty-table th[scope=row] { background-color: #b8cfe5; }

.content {
    background-color: #F6F6FD;
    text-align: center;
}

.firstLetter {
    background-color: #3399FF;
    color: #FFF;
    float: left;
    font-size: 48px;
    margin-right: 10px;
    margin-top: 7px;
    padding: 18px;
    border-radius: 5px;
    box-shadow: 0 0 10px -2px #999999;
}

Open in new window

Found the issue.  Thanks
I think the colour comes from this:
.pretty-table th, .pretty-table td { color: #632a39; }

Open in new window

Awesome