Search notes:

CSS: property display and the values table, table-row and table-cell to create tables with divs only

With CSS, it is possible to simulate a html <table> using the attribute display and the values table, table-row and table-cell:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>TODO</title>

<style type="text/css">
  .table {display: table     }
  .row   {display: table-row }
  .cell  {display: table-cell;
          border : 1px solid black;
          padding: 3px}
</style>

</head>
<body onload='main()'>

  <div class='tab'>
    <div class='row'><div class='cell'>abc def   </div><div class='cell'>ghij klmn</div></div>
    <div class='row'><div class='cell'>opqrs tuvw</div><div class='cell'>xyz      </div></div>
  </div>

</body>
</html>

Github repository about-css, path: /properties/display/table-elements.html

See the result of this html on htmlpreview.github.io.

Index