div 태그를 이용한 표(테이블) 만들기 예제

div 태그를 이용한 표(테이블) 만들기 예제

div 로 테이블 만들기 결과

div 태그를 이용한 표(테이블) 만들기 예제 - 가로 6cell * 세로 4cell

div HTML Tag 

<div class="divTable" style="width: 20%;" >
	<div class="divTableBody">
		<div class="divTableRow">
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
		</div>

		<div class="divTableRow">
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
		</div>

		<div class="divTableRow">
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
		</div>

		<div class="divTableRow">
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
			<div class="divTableCell">&nbsp;</div>
		</div>
	</div>
</div>
<!-- DivTable.com -->

 

div CSS TAG

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