tableタグを使わずに、ul、li、spanタグだけで作った「項目名」、「区切り文字」、「項目値」の3列入力フォームです。難しくない手法ですが毎回調べるのが面倒臭くなってきたので雛形として載せました。
項目名と項目値の間の区切り文字はcssの「.ItemSeparetor:befor」で好きな文字へ設定できるので場合に合わせて変更できます。
ボックスの枠に色を付けているのはデバッグのために見やすくしただけで特に意味はありません。実用では削除するかまたは適切な見た目にした方が良いと思います。
1番左に項目番号を追加したいとか、1番上の行に列名を追加したいなど手を入れたいところは沢山あると思いますが、要件次第になりそうなので簡易にしました。
フォームタグの中にulタグといったブロックタグが入っているので正確にはHTMLの規格違反だと思います。ただ、ほとんどのブラウザーで問題となることは無いでしょう。
タグという呼び方は間違いで、正式には要素と呼ぶべきらしいですが一般的にはタグと呼ばれているのでここでもそう記載しています。
<html>
<head>
<style>
/* リストに見えないようにする */
.ful {
list-style: none;
margin-left: 0;
padding-left: 0;
width: 600px;
}
.ful li {
margin-left: 0;
padding: 0;
border-style: solid;
border-width: 1px;
border-color: green;
width: 20em;
}/* 項目名の幅を固定にする。 */
.ItemName {
display: inline;
float: left;
border-style: solid;
border-width: 1px;
border-color: red;
width: 8em;
height: 1.2em;
margin: 1px;
padding: 1px;
}
/* 項目値の幅を固定にする。 */
.ItemValue {
display: inline;
width: 20em;
height: 1.2em
margin: 1px;
padding: 1px;
}
/* 項目名と項目値の区切り文字を指定する */
.ItemSeparetor:before {
content: ":";
text-align: center;
width: 1em;
margin-left: 0.5em;
}
</style>
</head>
<body>
<form>
<ul class="ful">
<li>
<span class="ItemName">first name</span>
<span class="ItemSeparetor"/>
<span class="ItemValue"><input name="fname" value="太郎"/></span>
</li>
<li>
<span class="ItemName">last name</span>
<span class="ItemSeparetor"/>
<span class="ItemValue"><input name="lname" value="山田"/></span>
</li>
<li>
<span class="ItemName">address</span>
<span class="ItemSeparetor"/>
<span class="ItemValue"><input name="address" value="東京都千代田区"/></span>
</li>
<li>
<span class="ItemName">phone number</span>
<span class="ItemSeparetor"/>
<span class="ItemValue"><input name="phone" value="03-1111-111"/></span>
</li>
<li>
<span class="ItemName">fax number</span>
<span class="ItemSeparetor"/>
<span class="cname"><input name="fax" value="03-2222-2222"/></span>
</li>
</ul>
</form>
</body>
</html>
