我如何在 CSS 中做到这一点而不使用表格？

Posted 2023-03-05

【中文标题】我如何在 CSS 中做到这一点而不使用表格？

【英文标题】：How can I do this in CSS without using a table?

【发布时间】：2011-10-29 02:07:08

【问题描述】：

通常情况下，这对于表格来说非常容易，但每个人都说现在表格很糟糕。我的大部分网络表单都是这样的：

[标签] [文本框]

[标签] [文本框]

[标签] [组合框] [文本框]

我只是希望一切都整齐排列。

*编辑：澄清一下，我没有使用表格来布局我的网络表单。这是使用 CSS 完成的。但是，从一些 cmets 看来，表格似乎可以用来排列我的控件。我认为这可能是最好的解决方案...

【问题讨论】：

看看右边的相关问题列表 - 有很多类似的问题。

将表格用于表格数据并没有错。这不是表格数据。表格对于页面布局总是错误的。您正在尝试做的事情同样非常容易使用 CSS。

@Rob 那么请向我们展示您的 非常简单的 css 来创建这样的表单！

嗯。无视那些抱怨。做极其简单的事情，然后把时间花在极其困难的部分上。

@Fatal，任君挑选bit.ly/oWbIzf

【参考方案1】：

我只在 FF6 和 Chrome 中进行过测试，但这是一种方法。

http://jsfiddle.net/e7T3g/3/

请注意，第一个是您的图像。是的，这不是 100% 完美的，需要进行测试和调整，但只是想向您展示使用 CSS 创建这种布局不是梦想。

（一个原因）为什么这比使用表格更好：

如果你看一下标记，根本就没有任何关于布局的建议，一切都是语义化的并且使用类。如果有一天你想彻底改变布局的外观，这一切都在你的 CSS 文件中。使用表格，您将不得不在 html 文件和 CSS 文件中处理大量乏味的 <tr>s 和 <td>s 才能进行更改。同样，如果您想进行一点小改动，您也不会受到表格标记的限制，这很难使用。

又快又脏：

<form>
    <div class="address">
        <label>Address</label><input>
    </div>
    <div class="city">
        <label>City</label><input>
    </div>
    <div class="state">
        <label>State</label>
        <select>
            <option></option>
            <option>___</option>
            <option>___</option>
        </select>
    </div>
    <div class="zip">
        <label>Zip</label>
        <input>
    </div>
    <div class="archive">
        <label>Archive Location</label>
        <input type="checkbox">
    </div>
</form>

input 
    padding:3px;   

label:after 
    content:":";   

form 
    background:#888;
    padding:15px 25px 10px 15px;
    width:470px;
    float:left;
    font:900 13px serif;

.archive,
.address 
    float:left;
    width:100%;  
    margin-bottom:3px;


.archive label,
.city label,
.address label 
    width:100px;
    text-align:right;
    float:left;

.address input 
    width:360px;

.zip input 
    width:70px;   

.address,
.zip 
    float:right;   

.city,
.state 
    float:left;  
    margin-right:8px;

.archive 
    margin-top:5px;   

有上百万种方法来做这个布局，（它还不是一个完整的 HTML 片段，我们缺少一些必需的属性）我相信我可以想出一个更好的版本，但我会留下那个作为你继续学习 CSS 的练习。

【讨论】：

你会说它比使用表格更容易吗？这是一个严肃的问题。在我看来，这比这种表单的基于表格的布局更难读写。但也许这只是因为它是我。 +1 虽然第一个在这里发布代码

@Fatal：HTML 还是 CSS，哪一部分对您来说难以阅读或编写？请记住，如果我们正在做一个真正的网站，我们会为此设置某种 CSS 框架，而且这只是一个快速的组合。请记住，CSS 用于样式化 HTML，而 HTML 用于描述内容 是什么。

IE8 在邮政编码输入上有点偏离 - 但就像我说的 - 这不是一个完整的解决方案，只是一个可能的演示。这种布局愚蠢地依赖于文本宽度之类的东西，但如果我们愿意的话，我们真的可以把它做得很棒并且可以防止 IE。

@Wesley Murch 很难将这段 HTML 和 CSS 代码放在一起。当我阅读基于表格的布局时，我可以想象不渲染它会是什么样子。这对于您发布的代码要困难得多。这些浮动，清除，标签：之后，内容：“：”等等......而且我相信只要没有框架为你做“艰苦的工作”，就很难维护。

@Fatal：CSS 一开始很棘手，但它的好处是值得的。当我说“框架”时，我的意思是我们会编写一个样式表，以一般方式处理很多小事情（如默认输入填充、字体等），并且此代码可能更小。我不是指网格系统，但这可能是一种可能性，这不是我个人的喜好。 FWIW 我知道这段代码可能会更紧凑，我只是想快速完成一些事情，以便 OP 可以看到可能性。看看这个网站，了解我所说的 CSS 很棒的意思：csszengarden.com

【参考方案2】：

查看本教程：

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

您可以将表格用于表单，但我更喜欢使用 CSS，因为它更易于维护且性能更佳。严格来说，表格只能用于“表格数据”，这并不能准确描述表单字段...

【讨论】：

取决于报价表格数据的定义。 webdesign.about.com/od/tables/a/aa122605.htm 我不认为.com 是福音，但是“如果您要在数据列的顶部或数据行的左侧有标题字段，那么它是表格的，表格应该是用过的。”似乎适用于带有标题的表单。

仍有争议：表格取自 SEO 和语义 HTML，仅提及避免它的几个原因。性能是另一回事，现在移动访问已经超过桌面浏览器访问，这一点变得更加重要......

性能是一个很好的理由，但如果数据确实是“表格数据”，那么表格是完全语义化的。

我会同意你...但我仍然不会选择使用表格创建表格，因为它太乱了:)

【参考方案3】：

利用 ems、p 标签和模块化 CSS 的强大功能：

HTML：

<form action="post" class="dummyForm" method="./" onsubmit="return false;">
    <fieldset class="formContainer">
        <legend class="formDescription">Form styling made easy!</legend>
        <p class="formElementWrapper">
            <label class="leftLabel formLabel" for="address">Address:&nbsp;</label>
            <input class="formElement orphanElement" id="address" name="address" type="text">
        </p>
        <p class="formElementWrapper">
            <label class="leftLabel formLabel" for="city">City:&nbsp;</label>
            <input class="cityInput formElement" id="city" name="city" type="text">
            <label class="formLabel" for="state">State:&nbsp;</label>
            <select class="formElement stateSelect" id="state" name="state">
                <option value="HI">HI</option>
            </select>
            <label class="formLabel" for="zip">Zip:&nbsp;</label>
            <input class="zipInput formElement" id="zip" name="zip "type="text">
        </p>
        <p class="formElementWrapper">
            <label class="leftLabel formLabel" for="archive">Archive Location:&nbsp;</label>
            <input class="formElement" id="archive" name="archive" type="checkbox">
        </p>
    </fieldset>
</form>

CSS：

form.dummyForm

    width: 40em;
    background-color: #999999;
    font-family: Times New Roman, serif;
    font-size: .8em;
    font-weight: bold;

legend.formDescription, fieldset.formContainer, form.dummyForm

    border: none;

label.formLabel

    width: auto;
    padding-top: .1em;
    float: left;
    clear: right;

label.leftLabel

    width: 9em;
    text-align: right;

input.formElement, select.formElement, textarea.formElement

    margin-right: .5em;
    float: left;
    clear: right;
    display: inline;

input.cityInput

    width: 9em;

select.stateSelect

    width: 4em;

input.zipInput

    width: 5em;

input.orphanElement, select.orphanElement, textarea.orphanElement

    width: 25em;
    float: left;
    clear: right;

p.formElementWrapper

    padding: .5em;

演示： http://www.fortybelow.ca/hosted/misc/ieforms/

---

作为奖励，以下是各种 IE 版本中的表单：

IE 6：

IE:Mac（一个臭名昭著的糟糕和过时的浏览器）：

【讨论】：

干得好，这看起来像是可以在生产中使用的东西，我的被尽快拼凑在一起以平息表支持者。这是一个很好的例子。

【参考方案4】：

根据您的编辑，不，表格仍然不适合布局，因为它是一种形式。您的输入仍然不是表格数据。您可以将整个内容包装在一个 div 中，并根据需要设置每个输入元素的样式。有关示例，请参阅其他答案中的 Smashing 链接。

【讨论】：

嘘。查看 Smashing 文章示例，其中大多数都很糟糕，我要离开几个小时。如果没有其他人为他的榜样创造一个小提琴，我今晚会做一个。

既然 css 非常简单，为什么不发布一些代码 sn-ps 呢？我的经验是另外一种：用纯 CSS 做这样的事情是很糟糕的，而且它的可维护性也较差。但是，当一些非常简单的 CSS 出现在此表单中时，我会改变主意...

好的，但是对于表格，创建类似的东西大约需要几分钟。似乎与 CSS 样式的表单有关。无论如何，我保持关注。 :-)

@Fatal - 比预期早回来，但你得到了很多例子。