title: How to center and span table heading (row)
body: <p>I need to know how to center and span the "MyTable" heading. Can it be down with both HTML (the center tag) and CSS? I tried playing around with text-align, positioning etc but I couldn't get what I want.</p>
  
  <p><img src="https://i.stack.imgur.com/o9rot.png" alt="Table examples"></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
  
              th {
                  border: 1px solid red;
                  text-align: center;
              }
  
              td {
                  border: 1px dashed black;
                  color: red;
              }
  
              table {
  
                  font-family: Calibri;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;table&gt;
              &lt;tr&gt;&lt;th&gt;My Table&lt;/th&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;th&gt;FName&lt;/th&gt;&lt;th&gt;LName&lt;/th&gt;&lt;th&gt;Age&lt;/th&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Derp&lt;/td&gt;&lt;td&gt;Derpania&lt;/td&gt;&lt;td&gt;69&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Buzz&lt;/td&gt;&lt;td&gt;Killington&lt;/td&gt;&lt;td&gt;42&lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>If there's a solution in both CSS and HTML, please give me both.</p>