title: Align text in a table header
body: <p>It seems <code>align</code> is not working for the <strong>th</strong> element. Here is my HTML:</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;div style="width: 100%; height: 175px; overflow: auto;"&gt;
    &lt;table class="grid" id="table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th class="not_mapped_style" style="display: none;" align="center"&gt;id&lt;/th&gt;
          &lt;th class="not_mapped_style" align="center"&gt;DisplayName&lt;/th&gt;
          &lt;th align="center"&gt;PrimaryEmail&lt;/th&gt;
          &lt;th align="center"&gt;Age&lt;/th&gt;
          &lt;th align="center"&gt;Phone&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;caption&gt;Contacts&lt;/caption&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td style="display: none;" property_value="0" property_name="id" align="center"&gt;0&lt;/td&gt;
          &lt;td property_value="rpcuser" property_name="DisplayName" align="center"&gt;rpcuser&lt;/td&gt;
          &lt;td property_value="admin@example.com" property_name="PrimaryEmail" align="center"&gt;admin@example.com&lt;/td&gt;
          &lt;td property_value="69" property_name="Age" align="center"&gt;69&lt;/td&gt;
          &lt;td property_value="+722616807" property_name="Hand_Phone" align="center"&gt;+18007&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Text aligning is working just fine for the <code>td</code> elements but fails for the <code>th</code>. Why?</p>