Загрузка контента при нажатии на кнопку button

Есть страница index.php. В данный момент при нажатии кнопок теория, практика и т.д. открывается такая же страница только с новым контентом в разделе td class="tdd" и td class="tdс". Как сделать так чтобы при нажатии данных кнопок информация подгружалась на страницу в эти два раздела td class="tdd"(Ссылка на статью) и td class="tdс"(Статья)? Видел на сайте похожие темы, но не разобрался. Вот часть кода

 <table class="table2" border ="0">
      <tr>
       
        <td class="td2"><button class="pan" onclick="window.location.href = 'teo.php'";><img src="../img/2.png" alt="">Теория</button></td>

        <td class="td2"><button class="pan" onclick="window.location.href = '../Praktika/pr.php'";><img src="../img/3.png" alt="">Практика</button></td>

        <td class="td2"><button class="pan" onclick="window.location.href = '../Document/Doc.php'";><img src="../img/4.png" alt="">Документы</button></td>

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

<table border="1" class="table3">

<tr>
<th>Статьи</th>
<th>Основные термины</th>
</tr>
<tr>
<td class="tdd">
<ul>
<li><a href="index.php" title="Ссылка 1"></a>Основные термины</li><li><a href="index.php" title="Ссылка 2">Структура информационной безопасности в России</a></li>
<li><a href="index.php" title="Ссылка 3"></a>Лекция 1</li>
</ul>
</td>
<td class='tdc'><p>Здесь должен быть контент!</p>
</td>
</tr>

</table>`