Webサイト発注虎の巻ダウンロード
Webサイト発注虎の巻ダウンロード

displey:table-cellを使ったレイアウト

はやち

iPhoneサイトを制作しているときに使用した「displey:table-cell」自分も若干理解していない部分があったため復習のためにまとめてみました。

Table-cellとは簡単にいうとcssだけでテーブルの構造ができるプロパティでTable-cellはhtmlタグでいうtd ,thタグの部類になります。

左のサイズが固定の3カラムレイアウトの場合

html

<div>left</div>
    <div>center</div>
    <div>right</div>

css

body{
		width:100%;
		display:table;
	}

	#left, #center, #right {
		display: table-cell;
	}

	#left{
		width:200px;
		background-color:#F93;
	}

	#right{
		background-color:#F99;
	}

	#center{
		background-color:#F60;
	}

その他の部類はこんな感じ

table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell; }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }

ちょっとこれで理解ができました(・ω・´)
よかったよかった(´ω`*)