Scope attribute general question


#1

In Learn HTML: Tables, step 5 of 13. There is mention of using the scope attribute. I’m wondering what the significance is of doing so. If the table heading has a title associated with it shouldn’t it already show up in the proper place? for example.

<tr>
  <th>Question</th>
</tr>

and

<tr>
  <th scope= "row">Question</th>
</tr>

It looks like these two display the code in the same way, so I’m wondering why we add the scope attribute (my guess is it makes something easier that we learn about late on) and whether I should just adopt it as best practice?


#2

I realize my code actually worked within my question… how can I display the code I used without it actually reflecting in my message?


#3

thankfully we have documentation for that:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope


#4

This looks like a great resource and I’ve gone ahead and bookmarked it! Thank you for that. I guess it doesn’t really answer my question though. It could be due to a lack of knowledge much beyond this point as it relates to coding, but I guess my question relates more to why we would use the scope attribute as opposed to just using my first example as the output appears to be the exact same. In this case if the best answer is “You’ll learn why later”. I’m actually perfectly fine with that response.


#5

MDN is a great resource for anything related to html, css and JS.

from w3c:

The objective of this technique is to associate header cells with data cells in complex tables using the scope attribute. The scope attribute may be used to clarify the scope of any cell used as a header.

they give a good example:

 <table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <th scope="col">Name</th>
    <th scope="col">Phone#</th>
    <th scope="col">Fax#</th>
    <th scope="col">City</th>
  </tr><tr>
    <td>1.</td>
    <th scope="row">Joel Garner</th>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>Pittsburgh</td>
  </tr><tr>
    <td>2.</td>
    <th scope="row">Clive Lloyd</th>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>Baltimore</td>
  </tr><tr>
    <td>3.</td>
    <th scope="row">Gordon Greenidge</th>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>Houston</td>
  </tr>
</table> 

using scope can help machines to much better understand your table


#6

I think this is what I needed to see to help it make sense. I appreciate your help!


#7

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