HTML Element Style How to - Create table from div tags

Question

We would like to know how to create table from div tags.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#table-like {<!--   www  .ja va2s  . c om-->
  display: table;
  width: 500px;
}

#table-like div {
  display: table-row;
}

#table-like div span {
  display: table-cell;
}
/* add borders */
#table-like, #table-like div span {
  border: 1px solid black;
}
/* bold on 1st row */
#table-like div:nth-child(1) {
  font-weight: bold;
}
</style>
</head>
<body>
  <div id="table-like">
    <div>
      <span>one</span> <span>two</span> <span>three</span> <span>four</span>
    </div>
    <div>
      <span>five</span> <span>six</span> <span>seven</span> <span>eight</span>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: