We help IT Professionals succeed at work.

HTML add CSS to <TD>

CipherIS
CipherIS asked
on
479 Views
Last Modified: 2014-05-07
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>?
Comment
Watch Question

CERTIFIED EXPERT

Commented:
Try <th class="row3"> or just assign th to row3
CERTIFIED EXPERT
Top Expert 2013

Commented:
How is "row3" defined in CSS?

Author

Commented:
Doesn't work and I need to assign it to a TD
CERTIFIED EXPERT

Commented:
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; }
CERTIFIED EXPERT

Commented:
Some nice examples here.

Author

Commented:
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>
Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
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.
Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:

Author

Commented:
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
CERTIFIED EXPERT
Top Expert 2013

Commented:
Just use ".row3" in the CSS instead of ".pretty-table td[scope=row3]"

Author

Commented:
When I use scope and validate against W3C I receive an error.
CERTIFIED EXPERT

Commented:
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

Author

Commented:
@chaau - that worked but I lost my forecolor now.
CERTIFIED EXPERT
Top Expert 2013

Commented:
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

CERTIFIED EXPERT
Top Expert 2013
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
@chaau - I am using your suggestion.  I lost my forecolor on my second column.
CERTIFIED EXPERT
Top Expert 2013

Commented:
OK, show us your second column HTML/CSSclass

Author

Commented:
.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

CERTIFIED EXPERT
Top Expert 2013

Commented:
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
CERTIFIED EXPERT
Top Expert 2013

Commented:
Do you have a separate CSS definition for "TD"?

Author

Commented:
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

Author

Commented:
Found the issue.  Thanks
CERTIFIED EXPERT
Top Expert 2013

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

Open in new window

Author

Commented:
Awesome
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.