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;
}
Posts
