Hi everyone, would like to ask two questions:
(1) Question 1
Based on the code below, in the CSS the selector of thead th was used. May I know why this is so?
I believe the CSS was meant to style the heading. If so, wouldn’t it have been sufficient to use thead alone? Also, if the author meant to be precise in their selection, shouldn’t they be using thead tr th as the selector?
index.html
<table>
<thead>
<tr>
<th scope="col">Company Name</th>
<th scope="col">Number of items to Ship</th>
<th scope="col">Next Action</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">Out of Town</td>
<td>Package items</td>
</tr>
<tr>
<td>Davie's Burgers</td>
<td rowspan="2">2</td>
<td>Send Invoice</td>
</tr>
<tr>
<td>Baker's Bike Shop</td>
<td>Send Invoice</td>
</tr>
<tr>
<td>Miss Sally's Southern</td>
<td>4</td>
<td>Ship</td>
</tr>
<tr>
<td>Summit Resort Rentals</td>
<td>4</td>
<td>Ship</td>
</tr>
<tfoot>
<tr>
<td>Strike Fitness</td>
<td>1</td>
<td>Enter Order</td>
</tr>
</tfoot>
</tbody>
</table>
CSS
thead th {
background: #88CCF1;
color: #FFF;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}
(2) Question 2
What is the difference between specifying a header as a td instead of using th? Based on my experimentation, it seems like if you use th, it comes out as bold. Is that the only difference? Thank you.
<table>
<tr>
<td>Company Name</td>
<td>Number of items to Ship</td>
<td>Adam's Greenworks</td>
</tr>
<tr>
<td>Adam's Greenworks</td>
<td>14</td>
<td>Package items</td>
</tr>
</table>
<table>
<tr>
<th scope="col">Company Name</th>
<th scope="col">Number of items to Ship</th>
<th scope="col">Next Action</th>
</tr>
<tr>
<td>Adam's Greenworks</td>
<td>14</td>
<td>Package items</td>
</tr>
</table>