Avatar of CipherIS
CipherIS
Flag 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>?
HTMLCSS

Avatar of undefined
Last Comment
CipherIS

8/22/2022 - Mon
Randy Downs

Try <th class="row3"> or just assign th to row3
chaau

How is "row3" defined in CSS?
CipherIS

ASKER
Doesn't work and I need to assign it to a TD
Your help has saved me hundreds of hours of internet surfing.
fblack61
Randy Downs

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; }
Randy Downs

Some nice examples here.
CipherIS

ASKER
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>
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Dave Baldwin

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 Baldwin

CipherIS

ASKER
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
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
chaau

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

ASKER
When I use scope and validate against W3C I receive an error.
Randy Downs

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

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
CipherIS

ASKER
@chaau - that worked but I lost my forecolor now.
chaau

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
chaau

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
CipherIS

ASKER
@chaau - I am using your suggestion.  I lost my forecolor on my second column.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
chaau

OK, show us your second column HTML/CSSclass
CipherIS

ASKER
.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

chaau

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
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
chaau

Do you have a separate CSS definition for "TD"?
CipherIS

ASKER
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

CipherIS

ASKER
Found the issue.  Thanks
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
chaau

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

Open in new window

CipherIS

ASKER
Awesome