HTML vs CSS table

by Town

HTML

<hr/>
<table>
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </thead>
</table>
<hr/>
<div class="table">
  <div class="table-header">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
  <div class="table-row">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>
<hr/>

CSS

table {
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid red;
}

.table {
  display: table;
  border-collapse: collapse;
  width: 100%
}

.table-header {
  font-weight: bold;
  text-align: center;
}

.table-header,
.table-row {
  display: table-row;
}

.table-header > div,
.table-row > div {
  display: table-cell;
  border: 1px solid blue;
  padding: 1px;
}