Question

DNN 模块包含一些表单，其中使用'tr'和'td' html标签。后来，我被告知将这些表转换为无序列表，'ul'和'li'这样做会大大改善UI渲染体验吗？

我仔细阅读了以下文件，但仍有疑问：Tables vs. Unordered Lists。

Answer 1

就用户而言，这样做与UI呈现体验无关。

这个想法是将标记与表示分开。您标记表单并使用CSS来呈现它。

表格应保留为表格数据。

注意：浏览器确实存在非常大且高度嵌套的表的性能问题，这是在CSS存在之前布局任何内容的唯一方法。但是，由于CSS确实存在，它应该用于表示而不是HTML表。

Answer 2

在展示具有两个维度信息的数据时，表格非常有用。

无序列表在使用单维信息呈现数据时非常有用。

以上是文章中值得考虑的要点

请记住，浏览器存在嵌套数据问题，这里是表格。所以列表肯定会提高性能

Answer 3

听起来好像你正在布置一个表单（'文本字段，标签和日期选择器'），在这种情况下你可能更好地使用DIV，P，SPAN和LABEL标签来组织你的控件，而不是TABLE标签或列表。

正如Oded所说，它不会对UI渲染造成太大影响，但表格最好保留表格数据，我想补充一点，有序或无序的列表最好保留在列表中的数据中：）< / p>

如果您正在布置表单控件，我认为此讨论可能与您的决定更相关：http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

冒着真的开始辩论的风险，我在Asp.Net表单中对行的首选布局是这样的：

<p class="form-line"> <!-- You could as well use a <div> -->
    <label>Field Name:</label>
    <asp:YOUR_CONTROL_HERE/>
    <asp:YOUR_VALIDATION_CONTROL_HERE/>
</p>

Answer 4

@JcFx - 事实并非如此！

<div style="width: 100%; margin-top: 10px">
        <div style="float: left; display: inline-block; width: 50%" class="div1">
            <div style="float: left; display: inline-block; width: 25%" class="div2">
                <ul>
                    <li class="list1">
                        <asp:Label ID="lblPrefix" runat="server" Text='Prefix'></asp:Label>
                    </li>

等等。

使用无序列表而不是表格会产生很大的不同吗？

4 个答案: