Q:

Как убрать отступы сверху и снизу у табличного td элемента?

Необходимо сделать табличную верстку сайта.
Всего 2 колонки плюс header и footer.
Колонка .menu фиксированной ширины 250px.
Никак не могу убрать верхние и нижние padding'и в обоих колонках, не понимаю откуда они берутся так как везде ставлю 0.

body {
  margin: 0;
}

.menu {
  width: 250px;
  background-color: #f0e68c;
}

.header {
  background-color: #add8e6;
  height: 50px;
}

.footer {
  background-color: #add8e6;
  height: 50px;
}

table {
  width: 100vw;
  height: 100vh;
  border-collapse: collapse;
  border-spacing: 0px;
}

img {
  float: left;
  margin: 20px;
  padding: 20px;
}

.hello {
  font-weight: 100;
  color: blue;
  text-align: center;
}

.participation {
  font-weight: 100;
  color: blue;
  text-align: center;
}

.content {
  background: url(img/ball.png) repeat-y right;
  margin-left: 250px;
  width: 800px;
}

.football {
  margin: 0;
}
<table>
  <tr>
    <td class="header" colspan="2">
      <p class="hello">ПРИВЕТ УЧАСТНИКАМ СОРЕВНОВАНИЙ!</p>
    </td>
  </tr>
  <tr>
    <td class="menu">
      <ul> Виды спорта:
        <li><a href="https://www.tut.by/">конькобежный спорт</a></li>
        <li><a href="https://www.tut.by/">биатлон </a></li>
        <li><a href="https://www.tut.by/">футбол</a></li>
        <li><a href="https://www.tut.by/">стрельба из лука</a></li>
        <li><a href="https://www.tut.by/">прыжки в длинну</a></li>
        <li><a href="https://www.tut.by/">прыжки в высоту</a></li>
      </ul>
    </td>
    <td class="content">
      <img src="img/photo.jpg" alt="">
      <p class="football">Футбол</p>
      <p>Футбол-командный вид спорта, в котором целью является забить мяч в ворота соперника ногами илидругими частями тела (кроме рук) большее окличество раз, чем команда соперника.<br>Есть 17 официальных правил игры, каждое из которых содержит список оговорок
        и руководящих принципов. Эти правила предназначены для применения на всех уровнях футбола, хотя есть некоторые изменения для таких групп, как юниоры, взрослые, женщины, и люди с ограниченными физическими возможностями. Законы очень часто формулировлаись
        в общих чертах, которые позволяют упростить применения взависимости от характера игры.</p>
    </td>
  </tr>
  <tr>
    <td class="footer" colspan="2">
      <p class="participation"> ГЛАВНОЕ НЕ ПОБЕДА А УЧАСТИЕ!</p>

    </td>
  </tr>
</table>

A:

Все дело в свойстве vertical-align, значение которого для <td> элементов по умолчанию равняется "middle".
Что бы выровнять блок .menu относительно верха .content достаточно:
.menu {
  vertical-align: top;
}

Рабочий пример:

body {
  margin: 0;
}

.menu {
  width: 250px;
  background-color: #f0e68c;
  vertical-align: top;
}

.header {
  background-color: #add8e6;
  height: 50px;
}

.footer {
  background-color: #add8e6;
  height: 50px;
}

table {
  width: 100vw;
  height: 100vh;
  border-collapse: collapse;
  border-spacing: 0px;
}

img {
  float: left;
  margin: 20px;
  padding: 20px;
}

.hello {
  font-weight: 100;
  color: blue;
  text-align: center;
}

.participation {
  font-weight: 100;
  color: blue;
  text-align: center;
}

.content {
  background: url(img/ball.png) repeat-y right;
  margin-left: 250px;
  width: 800px;
}

.football {
  margin: 0;
}
<table>
  <tr>
    <td class="header" colspan="2">
      <p class="hello">ПРИВЕТ УЧАСТНИКАМ СОРЕВНОВАНИЙ!</p>
    </td>
  </tr>
  <tr>
    <td class="menu">
      <ul> Виды спорта:
        <li><a href="https://www.tut.by/">конькобежный спорт</a></li>
        <li><a href="https://www.tut.by/">биатлон </a></li>
        <li><a href="https://www.tut.by/">футбол</a></li>
        <li><a href="https://www.tut.by/">стрельба из лука</a></li>
        <li><a href="https://www.tut.by/">прыжки в длинну</a></li>
        <li><a href="https://www.tut.by/">прыжки в высоту</a></li>
      </ul>
    </td>
    <td class="content">
      <img src="img/photo.jpg" alt="">
      <p class="football">Футбол</p>
      <p>Футбол-командный вид спорта, в котором целью является забить мяч в ворота соперника ногами илидругими частями тела (кроме рук) большее окличество раз, чем команда соперника.<br>Есть 17 официальных правил игры, каждое из которых содержит список оговорок
        и руководящих принципов. Эти правила предназначены для применения на всех уровнях футбола, хотя есть некоторые изменения для таких групп, как юниоры, взрослые, женщины, и люди с ограниченными физическими возможностями. Законы очень часто формулировлаись
        в общих чертах, которые позволяют упростить применения взависимости от характера игры.</p>
    </td>
  </tr>
  <tr>
    <td class="footer" colspan="2">
      <p class="participation"> ГЛАВНОЕ НЕ ПОБЕДА А УЧАСТИЕ!</p>

    </td>
  </tr>
</table>

Более подробно я уже рассматривал работу с vertical-align здесь:
Логика размещения дочерних блоков в HTML/CSS
Почему label для textarea отображается не сверху, а внизу?
Что такое базовая линия элемента?
Почему не работает vertical-align?

