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
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>?
<td class="row3">
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
Last Comment
CipherIS
Try <th class="row3"> or just assign th to row3
How is "row3" defined in CSS?
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
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.
ASKER
Here is my CSS
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>
.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
}
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.
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.
More info... http://www.w3schools.com/tags/att_td_scope.asp
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
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
Just use ".row3" in the CSS instead of ".pretty-table td[scope=row3]"
ASKER
When I use scope and validate against W3C I receive an error.
Possible to do this & switch th with td?
Alternative :
.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
}
Alternative :
<tr>
<th scope="row3">Text</th>
<th scope="row3">More Text</th>
</tr>
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
@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
}
<td class="row3"><img src=images/paella.jpg alt='Paella' height=100 width=150></td>
ASKER CERTIFIED SOLUTION
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
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 questionASKER
@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
OK, show us your second column HTML/CSSclass
ASKER
.row4 {
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
background-color: #0000FF;
color: #FFFFFF
}
<tr>
<td class="row4"><img src=images/paella.jpg alt='Paella' height=100 width=150></td>
<td class="row4">Paella</td>
</tr>
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.
Do you have a separate CSS definition for "TD"?
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;
}
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
I think the colour comes from this:
.pretty-table th, .pretty-table td { color: #632a39; }
ASKER
Awesome