Bài sau đây sẽ giới thiệu các bạn cách tạo một table từ tag div nhanh chóng.

1. Bước đầu chúng ta tạo một table như sau :

<div class="container">
    <div class="heading">
         <div class="col">Id</div>
         <div class="col">Danh mục</div>
    </div>
    <div class="table-row">
         <div class="col">1</div>
         <div class="col">PHP</div>
    </div>
    <div class="table-row">
         <div class="col">2</div>
         <div class="col">HTML</div>
    </div>
</div>

– Col   giống như  các   col (td)  trong table

Tạo CSS cho table div như sau:

.container{
     display:table;
     width:90%;     
     border-collapse: collapse;     
    }
.heading{ 
     font-weight: bold;
     display:table-row;
     background-color:#C91622;
     text-align: center;
     line-height: 25px;
     font-size: 14px;
     font-family:georgia;
     color:#fff;
  }  
.table-row{
      display:table-row;
      text-align: center;
  }  
.col{
  display:table-cell;
   border: 1px solid #CCC;  
}

2. Kết quả cuối cùng ta được :