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>?
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; }
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>
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
http://www.computerhope.com/cgi-bin/htmlcolor.pl?c=0000FF
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>
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>
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
.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
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;
}
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.