Vertically center text in a table header

Question

I'm new to CSS and HTML and I'm trying to vertically center some text in a table header. At the moment the text is aligned with the top of the table cell. I was unsuccessful with vertical-align: middle;, and the only solution seems to be to add padding-top to match the space underneath the text. However this is not the best solution because I would like to have the text fit snugly within the table cell. Any ideas are appreciated.

body {
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    color: black;
    background-size: 100%;
    padding:0;
}

.mytable {
  border: solid 1px #DDEEEE;
  border-collapse: collapse;
  border-spacing: 0;
  width: 80%;
}

.mytable thead th {
  background-color: #DDEFEF;
  border: solid 1px #DDEEEE;
  color: #336B6B;
  /*padding: 30px;*/
  text-align: center;
  vertical-align: middle;
}

.mytable tbody td {
  border: solid 1px #DDEEEE;
  color: #333;
  padding: 30px;
}

<div id="myWebPage" style="display:block">
  <br><br><br><br>
  <h3>Page title here</h3><br><br><br>

  <table class="mytable" align="center">
    <thead>
      <tr>
        <th><u>Resource</u><br><br><br></th>
        <th><u>Contact</u><br><br><br></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th align="left">Resource 1<br><br></th>
        <th align="left" width=35%;>999-999-9999<br> <br></th>
      </tr>
      <tr>
        <th align="left">Resource 2<br><br></th>
        <th align="left">888-888-8888<br><br></th>
      </tr>
      <tr>
        <th align="left">Resource 3<br><br></th>
        <th align="left" width=35%;>777-777-7777<br> <br></th>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

You have done it right in your CSS, just remove your <br> tags. E.g.

<th><u>Resource</u></th>

The vertical alignment won't work whilst you're manually inserting lines under your headings.

Full example

body {
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    color: black;
    background-size: 100%;
    padding:0;
}

.mytable {
  border: solid 1px #DDEEEE;
  border-collapse: collapse;
  border-spacing: 0;
  width: 80%;
}

.mytable thead th {
  background-color: #DDEFEF;
  border: solid 1px #DDEEEE;
  color: #336B6B;
  /*padding: 30px;*/
  text-align: center;
  vertical-align: middle;
}

.mytable tbody td {
  border: solid 1px #DDEEEE;
  color: #333;
  padding: 30px;
}

<div id="myWebPage" style="display:block">
  <br><br><br><br>
  <h3>Page title here</h3><br><br><br>

  <table class="mytable" align="center">
    <thead>
      <tr>
        <th><u>Resource</u></th>
        <th><u>Contact</u></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align="left">Resource 1<br><br></td>
        <td align="left" width=35%;>999-999-9999<br> <br></td>
      </tr>
      <tr>
        <td align="left">Resource 2<br><br></td>
        <td align="left">888-888-8888<br><br></td>
      </tr>
      <tr>
        <td align="left">Resource 3<br><br></td>
        <td align="left" width=35%;>777-777-7777<br> <br></td>
      </tr>
    </tbody>
  </table>
</div>