CSSのdisplayプロパティを使って作るtableの確認です。displayプロパティには、table要素とほぼ同様の動きが用意されています。ただし、table要素のcolspanやrowspan的な指定はできません。

サンプルは、table要素を使わずにtable構造を作っていますが、4行目でcolspan的なセルを作るため、構造の基本になる「display:table」を3つ繋いでいます。

サンプルのtable構造

サンプルのhtmlソース

<div class="d_table">
	<div class="d_caption">table-caption</div>
	<div class="d_thead">
		<div class="d_tr">
			<div class="d_th">thead1</div>
			<div class="d_th">thead2</div>
			<div class="d_th">thead3</div>
			<div class="d_th">thead4</div>
			<div class="d_th">thead5</div>
		</div>
	</div>
	<div class="d_tbody">
		<div class="d_tr">
			<div class="d_td">tbody1-1</div>
			<div class="d_td">tbody1-2</div>
			<div class="d_td">tbody1-3</div>
			<div class="d_td">tbody1-4</div>
			<div class="d_td">tbody1-5</div>
		</div>
		<div class="d_tr">
			<div class="d_td">tbody2-1</div>
			<div class="d_td">tbody2-2</div>
			<div class="d_td">tbody2-3</div>
			<div class="d_td">tbody2-4</div>
			<div class="d_td">tbody2-5</div>
		</div>
		<div class="d_tr">
			<div class="d_td">tbody3-1</div>
			<div class="d_td">tbody3-2</div>
			<div class="d_td">tbody3-3</div>
			<div class="d_td">tbody3-4</div>
			<div class="d_td">tbody3-5</div>
		</div>
	</div>
</div>
<div class="d_table"> 
	<div class="d_tbody">
		<div class="d_tr">
			<div class="d_td1">tbody4-1</div>
			<div class="d_td1">tbody4-2</div>
			<div class="d_td2">tbody4-3</div>
			<div class="d_td1">tbody4-4</div>
		</div>
	</div>
</div>
<div class="d_table"> 
	<div class="d_foot">
		<div class="d_footer">     	
			<div class="d_footcell"></div>
			<div class="d_footcell"></div>
			<div class="d_footcell">tfoot</div>
			<div class="d_footcell"></div>
			<div class="d_footcell"></div>      
		</div>
	</div>
</div>

サンプルのCSSソース

.d_table {
	width:100%;
	display: table;
	border-collapse: collapse;
	text-align:center;
	margin:0;
	}
.d_caption {
	display: table-caption;
	}
.d_thead  {
	display:table-header-group;
	background:lightgreen;
	font-weight:bold;
	}
.d_tbody {
	display:table-row-group;
	}
.d_foot  {
	display:table-footer-group;
	}
.d_tr {
	display: table-row;
	}
.d_th,.d_td,.d_td1,.d_td2  {
	display: table-cell;
	padding: 5px 0;
	border: 1px solid #999;
	vertical-align: middle;
	width:20%;
	}
.d_td1,.d_td2 {
	border-width:0 1px;
	}
.d_td2 {
	width:40%;
	}
.d_footer {
	display: table-row;
	border: 1px solid #999;
	vertical-align: middle;
	}
.d_footcell {
	display: table-cell;
	padding: 5px 0;	
	}