How to prevent the table cells from expanding the margins HTML - html

Question

I would like to make a table in html. It is supposed to display two rows and three columns. For some reason, currently the margins of the table cells keep expanding.
The first cell has a small margin, the second cell has bigger margins, the third cell's margins are even bigger, and so on. It keeps getting bigger and bigger.
I have attached a screenshot that shows how it currently looks:
Table with expanding margins
Here is my HTML & CSS code respectively:
html {
text-align: center;
}
body {
background-color: antiquewhite;
width: 50%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
table,
td {
margin-right: auto;
margin-left: auto;
table-layout: fixed;
}
<table>
<tr>
<td colspan="6">
<h1>Voici la liste de modules</h1>
</td>
</tr>
<tr>
<td colspan="2">
<button class="bouton_module" onlcick="window.location.href='m01/module1.html';">Module 1</button>
</td>
<td colspawn="2">
<button class="bouton_module" onclick="window.locaiton.href='m02/module2.html';">Module 2</button>
</td>
<td colspan="2">
<button class="bouton_module" onclick="window.location.href='m03/module3.html';">Module 3</button>
</td>
</tr>
<tr>
<td colspan="2">
<button class="bouton_module" onclick="window.location.href='m04/module4.html';">Module 4</button>
</td>
<td colspan="2">
<button class="bouton_module">Module 5</button>
</td>
<td colspan="2">
<button class="bouton_module">Module 6</button>
</td>
</tr>
</table>

Answer 1

You were mishandling the colspan and rowspan of cells, plus a misspelled ("colspaWn"). I just removed that and inserted the td {text-align: center;} rule. Note that you can enter td { outline: 1px solid red; } to see its lines without affecting the width.
html {
text-align: center;
}
body {
background-color: antiquewhite;
width: 50%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
table, td {
/* outline: 1px solid red; */
text-align: center;
margin-right: auto;
margin-left: auto;
table-layout: fixed;
}
<table>
<tr>
<td colspan="6">
<h1>Voici la liste de modules</h1>
</td>
</tr>
<tr>
<td>
<button class="bouton_module" onlcick="window.location.href='m01/module1.html';">Module 1</button>
</td>
<td>
<button class="bouton_module" onclick="window.locaiton.href='m02/module2.html';">Module 2</button>
</td>
<td>
<button class="bouton_module" onclick="window.location.href='m03/module3.html';">Module 3</button>
</td>
</tr>
<tr>
<td>
<button class="bouton_module" onclick="window.location.href='m04/module4.html';">Module 4</button>
</td>
<td>
<button class="bouton_module">Module 5</button>
</td>
<td>
<button class="bouton_module">Module 6</button>
</td>
</tr>
</table>