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

我注意到大多数人都在讨论如何将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标签和文本框。

---

请考虑Woork上的这篇文章，题为“清洁和纯CSS表单设计”

我已经实现了这种风格，包括fieldset并为所需的外观/感觉适当调整了所有样式。

考虑使用<label runat="server">通过CSS而不是asp:label来继承标签的样式。 或者，你可以把你的asp:label放在label标签中。 由于asp:label发出<span> ，这只会导致一组<label><span></span></label> 。

---

请考虑使用CssDrive中的CSS标题为Tableless forms。

一点风格确实有帮助。 我一直在重构/用上面的文章中找到的模式替换我所有的表格。

使用以下代码：

asp：textbox完美工作，不需要修改所有类型的文本框

asp：按钮完美工作，无需修改

asp：checkbox可能需要修改，也许包裹在另一个具有特殊风格的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>

---

从我的代码中提取：

<div>
    <label for="Password"> Password:</label>
    <input id="Password" type="password" name="Password"/>
    <label for="ConfirmationPassword"> Confirmation: </label>
    <input id="ConfirmationPassword" type="password" name="ConfirmationPassword"/>
<div class="clear"/>
</div>
<div>
    <label for="FirstName"> Prénom:</label>
    <input id="FirstName" type="text" value="" name="FirstName"/>
    <label for="LastName"> Nom:</label>
    <input id="LastName" type="text" value="" name="LastName"/>
    <div class="clear"/>
    </div>
</div>

与以下CSS：

label {
    float:left;
    margin-right:0.5em;
    margin-top:10px;
    padding-left:5px;
    text-align:justify;
    width:200px;
}

input[type="text"], textarea, input[type="password"], input[type="checkbox"], select {
    float:left;
    margin-right:10px;
    margin-top:5px;
}

.clear {
    clear:both;
}

链接地址: http://www.djcxy.com/p/88151.html

上一篇: How to switch from table to div for FORM layout?

下一篇: What is the benefit of tableless design if you need clearing blocks everywhere?