Table and List to DIV Converter

Need to make your tables and lists more flexible? Convert them into structured div elements with a single click. Just don't forget to apply the necessary CSS!

Table and List to DIV Converter
The div converter buttons can be found in the Tag Manager.

Using div elements instead of traditional tables improves responsiveness, making your layout more adaptable to different screen sizes. Unlike table-based designs, div-based grids can be styled more freely and adjusted for better mobile compatibility.

Why Convert Tables and Lists?

Tables aren't as flexible for modern, responsive designs.
div-based layouts allow for better control over styles and alignment.
Grid and flexbox techniques work best when applied to div-structured content.

CSS Styles

‼️ Make sure to use the CSS below to style the div elements and tweak them as needed.

Tables

.divTable{
   display: table;
   width: 100%;
}
.divTableRow {
   display: table-row;
}
.divTableHeading {
   display: table-header-group;
   background-color: #ddd;
}
.divTableCell, .divTableHead {
   display: table-cell;
   padding: 3px 10px;
   border: 1px solid #999999;
}
.divTableHeading {
   display: table-header-group;
   background-color: #ddd;
   font-weight: bold;
}
.divTableFoot {
   display: table-footer-group;
   font-weight: bold;
   background-color: #ddd;
}
.divTableBody {
   display: table-row-group;
}

CSS by DivTable.com.

Lists

.gUnordList, .gOrdList, .gDescriptionList {
   margin: 0 0 10px 10px;
}
.gListItem {
   background: transparent url("listbullet.png") no-repeat scroll left center;
   padding-left: 15px;
}
.gDescriptionListItem {
   background: transparent url("listbullet.png") no-repeat scroll left center;
   padding: 0px 0px 0px 15px;
   font-weight: bold;
}
.gDescription {
   padding-left: 30px;
   font-size: ;
   font-style: italic;
}