如何从表格布局切换到表格？

Question

我注意到大多数人都在谈论使用DIV和CSS作为标签,文本框对.如何转换表格如下:

<table>
   <tr>
      <td><some Label1> </td>
      <td><some TextBox1> </td>
   </tr>
   <tr>
      <td><some Label2> </td>
      <td><some TextBox2> </td>
   </tr>
   ...
</table>

从使用表到使用CSS说div,样本会有所帮助!目前我正在使用一个表来做这样的事情,想象一下只显示一些用户信息的网站.如何使用DIV而不是表格格式显示对(标签,文本框)？

假设标签/文本框是ASP.net标签和文本框.

Answer 1

考虑一下Woork的这篇名为Clean and Pure CSS Form Design的文章

我已经实现了这种风格,包括fieldset并适当调整所有样式以满足所需的外观.

考虑使用<label runat="server">CSS继承标签的样式而不是asp:label.或者你可以把你的asp:label内部label标签.自asp:label发出以来<span>,这只会产生一组<label><span></span></label>.

Answer 2

请考虑这篇名为使用 CssDrive中的CSS的Tableless 表单的文章.

一点点风格真的很有帮助.我一直在用上面文章中的模式重构/替换我所有的表格.

使用以下代码:

• asp:textbox工作正常,不需要修改各种文本框
• asp:按钮工作正常,无需修改
• asp:复选框可能需要修改,也许包含在另一个具有特殊风格的div中

这是给出的基本示例:

CSS:

<style type="text/css">

label{
float: left;
width: 120px;
font-weight: bold;
}

input, textarea{
width: 180px;
margin-bottom: 5px;
}

textarea{
width: 250px;
height: 150px;
}

.boxes{
width: 1em;
}

#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}

br{
clear: left;
}

</style>

HTML:

<form>

<label for="user">Name</label>
<input type="text" name="user" value="" /><br />

<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />

<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />

<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />

<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />

</form>