Question

我需要显示一个简单的两列列表。我看到的选项是<table>，<ul>或<dl>。一种方式比其他方式“更好”吗？我认为我将“更好”定义为在所有相对现代的浏览器中一致呈现，在语义上更正确，更具可访问性等。

+--------------+-----------------+
| Name         | John Doe        |
| Address      | 101 Main Street |
| City         | Doomview        |
| State        | NY              |
| Zipcode      | 12312           |
| Phone Number | (555) 555-1212  |
+--------------+-----------------+

Answer 1

是和否。没办法比另一个更“好”。每个选项可能“更好”的唯一方法是每个选项的用途。

请点击此处查看每个代码用于的完整列表：http://www.w3schools.com/tags

在您的情况下，您需要一个看起来有两列的表的布局。在这种情况下，我会使用<table>而不是其他标签，因为您需要表格布局。

<dl>

的用法

The <dl> tag defines a description list.

<ul>

的用法

The <ul> tag defines an unordered (bulleted) list.

<table>

的用法

The <table> tag defines an HTML table.

Answer 2

我一直坚持这个问题。我决定使用<dl>元素。

从语义上讲，我觉得<table>并没有完全捕捉到你正在做的事情。表格应该用于表格数据，对我来说，这意味着列（=属性）和行（=实体）。

根据MDN：

HTML元素（或HTML描述列表元素）包含一对术语和描述的列表。此元素的常见用途是实现词汇表或显示元数据（键值对列表）。

在这种情况下，我们似乎只有1个实体，基本上是一个键=＆gt;价值表，又名DL。

我将链接到将DL样式化为表格的示例： http://www.onextrapixel.com/2009/05/13/how-to-use-dl-dt-and-dd-html-tags-to-list-data-vs-table-list-data/
结果：http://www.onextrapixel.com/examples/dl-tags-vs-table/

Answer 3

表格设计是一种设计网站的旧方法，因此只有在您真正想要表格样式时才使用它们。使用而不是div设计。对于列表，请使用内置ul元素的li。你可以使用这样的东西：

<div id="left-col">
    <ul>
        <li></li>
        <li></li>
    <ul>
</div>
<div id="right-col">
    <ul>
        <li></li>
        <li></li>
    <ul>
</div>

但是如果你想要一个带边框的表格，那就使用<table>标签

使用HTML显示多个列列表的最佳方法

3 个答案: