<div class="container">
  <table>
    <caption><em>Change the widths and layout algorithm to see how the table and column widths change.</em></caption>
    <thead>
      <tr>
        <th>Column 1. Change the widths of the cells in each column to see how they affect the width of the column.</th>
        <th>Column 2. You can change the table markup any way you want to experiment too.</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>The initial table layout of this table is set to auto.</td>
        <td>The width of this table is set to 100%.</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Change the content of these cells while you play with table layout algorithms.</td>
        <td>Also try to play with text wrap values.</td>
      </tr>
    </tbody>
  </table>
</div>
body {
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  width: 100%;
  table-layout: auto;
}

caption {
  caption-side: bottom;
  padding: .5em;
  color: #0099CC;
}