[html][css] tableタグを使わないテーブルレイアウト
まずリストを作る。
<ul> <li> <div>名前</div> <div>ニックネーム</div> </li> <li> <div>宮代大輔</div> <div>ぷりんす</div> </li> <li> <div>太郎</div> <div>元首相</div> </li> </ul>
こんなんになる。
名前ニックネーム
宮代大輔ぷりんす
太郎元首相
ulタグにclassを定義してスタイルを当てる
html
<ul class="table"> .... </ul>
.table{list-style:none;mergin:0;padding:0;} .table li{clear:both;} .table li div{display:block;float:left;}
こんなんになる。
名前ニックネーム
宮代大輔ぷりんす
太郎元首相
各divにclassを定義して幅を決め、borderで線を入れる。
html
... <div class="col1 head">名前</div> <div class="col2 head">ニックネーム</div> ... <div class="col1">宮代大輔</div> <div class="col2">ぷりんす</div> ...
// 幅 .col1{width:100px;} .col2{width:200px;} // 線 .table li div{border-right:1px solid #000;border-bottom:1px solid #000;} .head{border-top:1px solid #000;} .col1{border-left:1px solid #000;}
こんなんになる。
名前ニックネーム
宮代大輔ぷりんす
太郎元首相