Question on tables


#1

https://www.codecademy.com/courses/learn-html-css/lessons/tables/exercises/table-css?action=lesson_resume&link_content_target=interstitial_lesson

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>


#2

Maybe reading the Book finding the position with a search
table site:developer.mozilla.org/en-us/

I think you will find most of your questions answered…


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.