title: Why use both <thead> and <th scope="col">
body: <p>I'm currently reading <em>"HTML &amp; CSS: Design and Build Web Sites"</em> by Jon Duckett and in chapter 6, which is about tables, there is an example as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Tables&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;table&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th scope="col"&gt;&lt;/th&gt;
                      &lt;th scope="col"&gt;Home starter hosting&lt;/th&gt;
                      &lt;th scope="col"&gt;Premium business hosting&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;th scope="row"&gt;Disk space&lt;/th&gt;
                      &lt;td&gt;250mb&lt;/td&gt;
                      &lt;td&gt;1gb&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;th scope="row"&gt;Bandwidth&lt;/th&gt;
                      &lt;td&gt;5gb per month&lt;/td&gt;
                      &lt;td&gt;50gb per month&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;th scope="row"&gt;Email accounts&lt;/th&gt;
                      &lt;td&gt;3&lt;/td&gt;
                      &lt;td&gt;10&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;th scope="row"&gt;Server&lt;/th&gt;
                      &lt;td&gt;Shared&lt;/td&gt;
                      &lt;td&gt;VPS&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;th scope="row"&gt;Support&lt;/th&gt;
                      &lt;td&gt;Email&lt;/td&gt;
                      &lt;td&gt;Telephone and email&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;th scope="row"&gt;Setup&lt;/th&gt;
                      &lt;td&gt;Free&lt;/td&gt;
                      &lt;td&gt;Free&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;th scope="row"&gt;FTP accounts&lt;/th&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;5&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
  
              &lt;tfoot&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td colspan="2"&gt;Sign up now and save 10%!&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tfoot&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I read <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead" rel="nofollow noreferrer">here</a> that <code>&lt;thead&gt;</code> element defines a set of rows defining the head of the columns of the table. And <code>scope="col"</code> on <code>&lt;th&gt;</code> element is used to indicate that it is a heading for a column. My question is, do we really need to use both or is using one of them sufficient? Can/does <code>&lt;thead&gt;</code> do anything that <code>scope="col"</code> can't/doesn't do or vice versa?</p>