Table and List to DIV Converter

Table and List to DIV Converter

Convert tables and list tags to structured div elements. Make sure you use the CSS codes attached.

Responsiveness is the main reason you should consider using structured div tags instead of tables. The classic table HTML tags are not so customizable and we can't adjust the grid layout on narrow screen sizes.

Make sure you use the CSS below to style the divs and adjust the codes according to your needs.

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