Use div for Table Layout in HTML

table HTML Tag has been in HTML for long time to show table-like layout. Now div is more powerful tag to display a block of text, and this can be used for table-like layout.

The basic concept is to use css styles as a way to instruct div to show block of text in table-like layout. After search on web, I found a couple ways to use div, and I place the correspoding ccs styles in Blogger's templates.

The following are some ccs classes in Blogger template:

/* -- no border table using div class */
.nbTable { 
  display: table;
  width: 100%;
} 
.nbTableRow {
  display: table-row;
}
.nbTableHeadRow {
  display: table-header-group; 
  font-weight: bold;
} 
.nbTableBody {
  display: table-row-group; 
} 
.nbTableFoot {
  display: table-footer-group; 
}
.nbTableCell, .nbTableHead {
  display: table-cell; 
}
.nbTableCell1Line, .nbTableHead1Line {
  display: table-cell;
  white-space: nowrap;
}

/* -- table with border using div class */
.bTable {
  display: table;
  width: 100%;
} 
.bTableRow {
  display: table-row;
}
.bTableCell, .rTableHead {
  display: table-cell;
  padding: 3px 10px;    
  border: 1px solid #999999;
}
.bTableCell1Line, .rTableHead1Line {
  display: table-cell;
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid #999999;
}
.bTableHeadRow {
  display: table-header-group;
  background-color: #ddd;
  font-weight: bold;
}
.bTableFoot {
  display: table-footer-group;
  font-weight: bold;
  background-color: #ddd;
}
.bTableBody {
  display: table-row-group;
}