logo标签列表

无表格HTML替代方案

htmlcss
3
有人能展示一些不使用表格的HTML布局吗？
______________________________________
|_______|_____________|               |
|_______|_____________|_______________|
|_______|_____________|               |
|_______|_____________|               |
|_______|_____________|_______________|

第三列需要跨越前两个“行”，然后跨越接下来的三个“行”。 第一列需要具有相同的宽度。
我之所以这么问是因为整个“表格已死”的争论。
更新： 标记的内容包括复选框、文本框和文本区域。
结论： 这非常启发人。我相信我已经通过这个哲学问题得到了澄清。
在我看来，通常的规则应该是：不要在整个网站中使用表格，如果有类似表格的部分，则使用表格。过于极端的“永远不要使用表格”似乎不切实际和理论化。同样地，过度使用表格会使维护变得困难，并且处理四层嵌套表格可能会真正令人头疼。
因此，因为上面的布局“看起来像一个表格”，我将使用表格。 :)
2
这是用于布局还是表格数据？ - Pekka
21
关于“表格不适用于布局”的事情：这并不完全正确。当您使用它们来布置表格数据时，表格仍然非常有效，而且表格数据比您想象的更常见。此外，您不使用表格的原因是为了促进语义化的 HTML。CSS 样式和布局并不是终点，而只是提高语义化的机制。如果您有一个简单的表格可以比一堆 div 更语义化地表达设计的情况，请使用它。 - Joel Coehoorn
这是表格预期用途的完美例子。 - Fosco
你在问如何在HTML中制作表格而不使用选项卡？;) 根据你所描述的，它看起来像是一个表格。因此，请将其制作成表格。 - jalf
相对容器内的绝对定位... 赢了！ - Josh Stodola
9个回答
5

我完全同意不使用表格来布局页面。然而，上面的图表实际上看起来像一个表格，所以你可能想使用一个。

4
我认为您应该使用表格来达到您的目的，但既然您不想用表格......这是我快速制作的仅使用 <div> 的东西：http://jsfiddle.net/HEfTE/1/ 您没有提及复选框、文本框和文本区域将如何使用和在哪里使用，因此我不确定如何将它们合并到我的示例中。但如果您发布更多信息，将很容易将它们添加到其中。
希望这有所帮助！
你的清晰类需要一些东西才能在每个浏览器中正常显示：特别是在IE6/7中需要overflow:hidden和font-size:0。 - Bob Fincheimer
3
即使内容不是表格，如果需要的话，请使用表格。大多数反对使用表格进行布局的论点纯粹是理论上的（例如，您真的计划为您的网站提供多个样式表吗？您在意您的表单在语义上如何显示吗？）有时，在网站的更大布局问题中，表格比CSS更有效。

使用有效的工具。

表格经常被滥用于布局，并且其中大部分可以被简单的CSS布局所取代。但偶尔，表格是更好的工具。

1
我认为你误解了CSS的好处。CSS并不是关于为您的网站提供多个样式表，而是使您的代码更加高效、易于阅读和易于维护。表格非常适合显示表格数据，但对于样式设计来说效率低下，并且会使基本网站维护变得不可能。 - riwalk
我同意CSS比表格更适合布局。几乎总是如此。但是有时您需要创建一个易于表达为表格的布局，并且在CSS中很难实现，或者需要添加额外的div等。 CSS布局也可能很难维护。我不是反对CSS，我完全支持它。我只是认为教条式的“不要使用表格进行布局”态度并不是最好的选择。 - Ned Batchelder
是的，我们通常提供多个样式表，并关注适当的语义（更不用说SEO和可访问性了）。 - DA.
@DA：听起来你肯定想尽可能多地使用CSS。 - Ned Batchelder
2
“没有足够的信息来回答你的问题。像Pekka说的那样，它是一个表格吗？”
“它是一个表单吗？如果有文本框、文本区域等，我假设是这样的。如果是一个表单，你可以为左侧两列使用一个容器，右侧使用一个容器。”
<style type="text/css">

div#formLeft {
    float: left;
}

textarea {
   display: block;
}

</style>

<div id="formLeft">
    <label>Form Field 1</label><input type="text" /><br />
    <label>Form Field 2</label><input type="text" /><br />
    <label>Form Field 3</label><input type="text" /><br />
    <label>Form Field 4</label><input type="text" /><br />
    <label>Form Field 5</label><input type="text" /><br />
</div>

<div id="formRight">
    <textarea></textarea>
    <textarea></textarea>
</div>

现在，显然还有很多需要做的事情，但这只是最基本的。
推荐：使用固定宽度样式标签以保持其外观类似表格。当然，要根据实际情况调整高度和其他参数来适应它。右侧的方框，我猜想是文本域，只需给它们分配ID和高度即可。
我截了一张屏幕截图，帮助您在不真正输入代码的情况下可视化它。这就是我认为您的布局方式，当然您可以轻松添加其他列。只需将ID "formLeft" 转换为类，并添加另一个即可！ alt text http://img94.imageshack.us/img94/5341/testbp.gif 编辑：图片上传到了image shack. 我无法保证它会在那里停留多久。
祝好运！
这个实现的问题在于右侧的文本区域没有按照我的要求正确定位。我看到的唯一解决方案是指定实际像素高度和宽度，但我认为这不是一个好的做法。感谢您的评论。 - Jose
不幸的是，如果您希望每个浏览器看起来都一样，表单元素的显式高度和宽度是不可避免的。输入框、文本框、下拉框等很难在没有非常明确的CSS的情况下实现相同的外观。 - Bob Fincheimer
指定高度和宽度是良好的实践。为您网站上的元素定义形状和大小始终是一件积极的事情，这样用户代理样式表就不会在不同的浏览器中更改某些内容。只是为了明确，您是通过CSS对它们进行样式设置。这仍然是将演示文稿与内容分开的方式，而使用表格进行布局会破坏它。此外，相比于实际操作，表格对于此布局来说更加复杂，正如您可以看到我提供的代码是多么简洁、短小和语义化的。 - Tarik
@Bob：我个人不为旧版浏览器开发，但如果跨浏览器兼容性是问题，他可以为每一行制作一个div类，这样也无妨。 - Tarik
2
这些组件似乎形成了一个表格，因此我会使用表格。
以下内容不是表格，因此不要使用表格来布局它。（显然应该使用< div >）
-------------------------------- | | | | |------------------------------| | | | | | | | | | | | | | | | | | | | | | | | | | | | --------------------------------
你看到了你的例子和我的例子之间的区别了吗？
1
我会这样做（在没有任何细节的情况下，我添加了一些示例元素）：
<html>
    <head>
        <style type="text/css">
            * { margin: 0; padding: 0; }
            #form {
                width: 400px;
                margin: 10px;
            }
            #textareas {
                width: 145px;
                float: right;
            }
            #textareas textarea {
                width: 145px;
                margin-bottom: 3px;
            }
            #textareas #textarea1 {
                height: 43px;
            }
            #textareas #textarea2 {
                height: 66px;
            }
            .forminput {
                height: 23px;
                width: 250px;
            }
            .forminput span {
                display: block;
                float: left;
                width: 75px;
            }
            .forminput input {
                width: 175px;
            }
        </style>
    </head>

    <body>
        <div id="form">
            <div id="textareas">
                <textarea id="textarea1"></textarea>
                <textarea id="textarea2"></textarea>
            </div>
            <div class="forminput">
                <span>Label 1</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 2</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 3</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 4</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 5</span>
                <input type="text" />
            </div>
        </div>
    </body>
</html>

你总是可以不用表格来完成它。

1
请在标签中使用实际的LABEL标签来定义标签。 - DA.
1

你可以使用DIV并小心地使用float: right，float: left和clear: both来实现。

我同意你的观点，你所描述的不是表格，使用DIV可能有优势，例如在移动设备上查看时它们可能能够更好地流动（特别是如果你给它们一个不同的样式表）。

然而，我必须说，对于这种东西使用DIV非常麻烦，我通常使用表格，因为它们非常容易，并且它们做得更好，可以调整列的大小以适应内容。

1

表单可以被视为表格数据。并非所有人都同意这一点，但足够多的人认同，我会称其为一个50/50的决定。在这种情况下，可以抛硬币来决定。

我更担心的是，一个具有多列和多行以及跨越多行的字段的表单开始让我觉得设计不良。在这种情况下可能完全合理，但如果没有更多的上下文，很难说什么是最好的。

如果每行/列中的表单元素之间存在直接关系，了解这一点可能有助于我们为您回答问题。

回答你关于关系的问题，是的，第三列的第一行与前两行有关联，第三列的第二行与最后三行也有关联。 - Jose
0

这个内容是什么？表格数据吗？如果是的话，请使用表格。

不，它是一个表单，包含文本输入、复选框，右列有文本区域。 - Jose
直觉认为这可能是一个布局不良的表单。尽管如此，表单也可以被视为表格数据。在这种情况下，没有正确或错误的答案。表格可能是可以接受的，CSS布局也可以。但要真正回答这个问题，我们需要更多的上下文信息...特别是表单元素之间的关系。 - DA.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接