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>

CodePudding user response：

Voici la liste de modules

Module 1 Module 2 Module 3 Module 4 Module 5 Module 6

CodePudding user response：

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>