TABLEタグを使わずに、表を作るサンプルCSS

Tweet

[`evernote` not found]

テーブルタグは使うとソースがわかりにくくなるのでできるだけ使いたくない。
データをリストで表示してそれをCSSで表組みできないかと色々試した自分用サンプル

CSS部分

ul{
list-style:none;
margin:0;
padding:0;
}
li{
float:left;

}
.item{
clear:both;
margin:5px;
}

.object{
width    :100px;
border:1px solid #000000;
padding    :10px;
margin-right:5px;
}
.data{
width    :300px;
border:1px solid #000000;
padding    :9px;
}

ｈｔｍｌ部分

<ul>
<li>
<ul>
<li>季節</li>
<li>
<input type=”radio” name=”season” value=”指定しない” checked>指定しない
<input type=”radio” name=”season” value=”春”>春
<input type=”radio” name=”season” value=”夏”>夏
<input type=”radio” name=”season” value=”秋”>秋
<input type=”radio” name=”season” value=”冬”>冬
</li>
</ul>
</li>
<li>
<ul>
<li>予算</li>
<li>
<input type=”input” name=”budget” value=”0″>円
</li>
</ul>
</li>
<li>
<ul>
<li>人数</li>
<li>
<input type=”input” name=”number” value=”0″>人
</li>
</ul>
</li>
<li>
<ul>
<li>宿泊日数</li>
<li>
<select name=”lodge”>
<option value=”1″ selected>一泊二日</option>
<option value=”2″ >二泊三日</option>
<option value=”3″ >三泊四日</option>
<option value=”4″ >四泊五日</option>
<option value=”5″ >五泊六日</option>
<option value=”6″ >六泊七日</option>
<option value=”7″ >七泊八日</option>
<option value=”8″ >八泊九日</option>                                                    <option value=”9″ >九泊十日</option>                                                </select>

</li>
</ul>
</li>

</ul>

スタイル適用前

スタイル適用後