Как сверстать таблицу на html?
Вот тебе как путеводитель, дальше сам справишься, уверена. https://codepen.io/anon/pen/JaVJEg<section class="table">
  <div class="table__header">
    <div class="table__heading">Order</div>
    <div class="table__heading">Date</div>
    <div class="table__heading">Name</div>
    <div class="table__heading">city</div>
    <div class="table__heading">payment status</div>
    <div class="table__heading">order status</div>
    <div class="table__heading table__heading--reverse">total</div>
  </div>
  
  <div class="table__row">
    <div class="table__data">1</div>
    <div class="table__data">2</div>
    <div class="table__data">3</div>
    <div class="table__data">4</div>
    <div class="table__data">5</div>
    <div class="table__data">6</div>
    <div class="table__data table__data--reverse">7</div>
  </div>
</section>.table{
  background: #eee;
  padding: 0 10px 10px 10px;
}

.table__header{
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 10px;
}

.table__heading{
  flex-grow: 1;
  flex-basis: 100px;
  color: #aaa;
  text-transform: uppercase;
}

.table__heading--reverse{
  text-align: right;
}

.table__row{
  display: flex;
  align-items: center;
  height: 60px;
  background: #fff;
  box-shadow: 0 0 2px 0 #aaa;
  border-radius: 2px;
  padding: 0 10px;
}

.table__data{
  flex-grow: 1;
  flex-basis: 100px;
}

.table__data--reverse{
  text-align: right;
}
Я бы взял обычные div
Можно с сеткой бутстрап, так еще проще будет