<style>
  p {
    margin-bottom: .5rem;
    color: #808080;
  }

  .border-black {
    border: 1px solid black;
  }

  .thick-border-black {
    border: 10px solid black;
  }

  .table-border-black, table.table-border-black tr, table.table-border-black td  {
    border: 1px solid black;
  }

  .table {
    display: table;
  }

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

  .table-cell {
    display: table-cell;
  }
</style>

<!-- Copied from html tests Userland/Libraries/LibWeb/Tests/Pages/Table.html -->
<p>Empty table</p>
<table id="empty-table"></table>

<!-- Copied from html tests Userland/Libraries/LibWeb/Tests/Pages/Table.html -->
<p>Full table</p>
<table id="full-table">
  <caption>
    A Caption
  </caption>
  <thead>
    <tr>
      <th>Head Cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body Cell</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer Cell</td>
    </tr>
  </tfoot>
</table>

<p>Table with 2 columns and border</p>
<table class="table-border-black">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<!-- Border-collapse and hidden -->
<p>No borders</p>
<table class="table-border-black" style="border-collapse: collapse; border-style: hidden;">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<!-- Border-collapse and hidden with divs -->
<p>No borders v2</p>
<div class="table border-black" style="border-collapse: collapse; border-style: hidden;">
  <div class="table-row border-black">
    <div class="table-cell border-black">Firstname</div>
    <div class="table-cell border-black">Lastname</div>
  </div>
  <div class="table-row border-black">
    <div class="table-cell border-black">Peter</div>
    <div class="table-cell border-black">Griffin</div>
  </div>
  <div class="table-row border-black">
    <div class="table-cell border-black">Lois</div>
    <div class="table-cell border-black">Griffin</div>
  </div>
</div>

<!-- Border-collapse and hidden with divs -->
<p>Columns should be tightly packed with no overflows nor extra space</p>
<div class="table thick-border-black" style="border-collapse: collapse; border-style: hidden;">
  <div class="table-row thick-border-black">
    <div class="table-cell thick-border-black">Firstname</div>
    <div class="table-cell thick-border-black">Lastname</div>
  </div>
  <div class="table-row thick-border-black">
    <div class="table-cell thick-border-black">Peter</div>
    <div class="table-cell thick-border-black">Griffin</div>
  </div>
  <div class="table-row thick-border-black">
    <div class="table-cell thick-border-black">Lois</div>
    <div class="table-cell thick-border-black">Griffin</div>
  </div>
</div>