<main>
  <h2>Table Cellpadding & Cellspacing with CSS</h2>

  <p>Certain CSS features can replace obsolete <code>cellpadding</code> and <code>cellspacing</code> in HTML. Use the button to toggle the table from the default cellpadding and cellspacing to corrected with CSS.</p>
  
  <p class="b"><button>Toggle Spacing/Padding</button></p>

  <table>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </table>

</main>

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

.b {
  text-align: center;
}

code {
  color: firebrick;
}

table {
  border: solid 1px;
  width: 100%;
  margin-bottom: 20px;
}

td {
  border: solid 1px;
}

.table1 {
  border-spacing: 0;
  border-collapse: collapse;
}

.table1 td {
  border: solid 1px;
  padding: 20px;
}

let btn = document.querySelector('button');

btn.addEventListener('click', function () {
  document.querySelector('table').classList.toggle('table1');
}, false)