WEB制作(html・css(スタイルシート))に関する各種メモ書き

TABLEタグをDIVタグとCSSで表現する

● TABLEタグをDIVタグとCSSで表現する

デモ : https://pgmemo.tokyo/livedemo/div_table/div_table.html

・TABLEタグを使った表

<table>
	<tr>
		<td>タイトル</td>
		<td>
			<p>要素1</p>
			<p>要素2</p>
		</td>
	</tr>
</table>

DIVタグでこの表を表現するとこのようになります。

・DIVタグとCSSを使った表

<style type="text/css">
.table{
	display: table;
}
.table_row{
	display: table-row;
}
.table_cell{
	display: table-cell;
	vertical-align: top;
}
</style>
<div class="table">
	<div class="table_row">
		<div class="table_cell">
			タイトル
		</div>
		<div class="table_cell">
			<p>要素1</p>
			<p>要素2</p>
		</div>
	</div>
</div>

● HTML TABLE GENERATOR を使って div タグでテーブルを作成する

最初からDIVタグで生成するにはこのサイトを利用するといいでしょう
http://divtable.com/generator/

No.1250
07/31 12:27

edit