Table Liquid for accessible Shopify themes - https://www.shopify.com/partners/blog/developing-shopify-themes-with-accessibility-in-mind

developing-accessible-shopify-themes-table.liquid

<table class=”responsive-table”>
  <thead>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
  </thead>
  </tbody>
    {% for item in cart.items %}
      <tr class=”responsive-table__row”>
        <td>
          <a href=”{{ item.url | within: collections.all }}”>
            <img src=”{{ item | img_url: ‘medium’ }}” alt=”{{ item.title | escape }}”>
          </a>
        </td>
        <td data-label=”price”>
          <span> {{ item.price | money }} </span>
        </td>
        <td data-label=”total”>
          <span>{{ item.line_price | money }}</span>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

<style>
  .responsive-table {
    width: 100%;
  }

  .responsive-table thead {
    display: none;
  }

  .responsive-table tr {
    display: block;
  }

  /* IE9 table layout fixes */
  .responsive-table tr,
  .responsive-table td {
    float: left;
    clear: both;
    width: 100%;
  }

  .responsive-table th,
  .responsive-table td {
    display: block;
    text-align: right;
    padding: 10px;
    margin: 0;
  }

  .responsive-table td::before {
    /* create a lable for our mobile layout using the `data-label` attribute from our `<td>`s */
    content: attr(data-label);
    float: left;
    text-align: center;
    padding-right: 15px;
  }

  /* Add a keyline between rows */
  .responsive-table .responsive-table-row + .responsive-table-row,
  .responsive-table tfoot > .responsive-table-row:first-child {
    position: relative;
    margin-top: 10px;
    padding-top: 15px;
  }

  .responsive-table::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    border-bottom: 1px solid #3d3d3d;
  }
</style>