[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>

css

.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>
...

css

// 幅
.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;}

こんなんになる。


  • 名前
    ニックネーム

  • 宮代大輔
    ぷりんす

  • 太郎
    元首相