使用HTML顯示多列列表的最佳方式

我需要顯示一個簡單的兩列列表。我看到的選項是<table>，<ul>或<dl>。一種方式比其他方式「更好」嗎？我想我定義「好」在所有比較現代的瀏覽器始終呈現，更多的語義正確比其他更方便，等使用HTML顯示多列列表的最佳方式

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

來源

2014-02-20 user1032531

我已經遇到這個問題了一段時間了。我決定去與<dl>元素。

從語義上講，我覺得<table>並不完全捕捉你在做什麼。表格應該用於表格數據，這對我來說意味着列（=屬性）和行（=實體）。

根據MDN：

的HTML元素（或HTML描述列表元素）包圍對術語和描述的列表。此元素的常用用途是實現詞彙表或顯示元數據（鍵值對列表）。

然而，在這種情況下，我們似乎只有1個實體，它本質上是一個key =>值列表，又名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/

來源

2014-02-20 14:37:18 Bart

是的，但是您可以將dl與桌子相同嗎？邊框顏色，背景顏色。等等。？ –

是的，看看這個鏈接的例子... – Bart

是的，我一直在這個問題上停留了一段時間。我同意'

'在語義上更加正確，但是，需要更多的CSS，如果元素爲空（我使用' '來修復它），渲染有時會成爲問題。您發佈的良好鏈接。 – user1032531

是，也不是。沒有辦法比另一個「更好」。每個選項可能是「更好」的唯一方法是每個選項的用途。

在這裏看到的一張好名單什麼每個標籤用於：http://www.w3schools.com/tags

在你的情況，你想要的佈局，看起來表兩列。在這種情況下，我會使用<table>而不是其他標籤，因爲您需要表格佈局。

的<table>

The <table> tag defines an HTML table.

的 <ul>

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

用法的<dl>

The <dl> tag defines a description list.

的使用的使用

來源

2014-02-20 14:28:46

定義列表似乎是一個不錯的選擇 - HTTP：//www.iandevlin。com/blog/2012/01/html/marking-up-a-postal-address-with-html作爲'Name'鏈接到一個值。 –

謝謝精英。我知道桌子是「舊時尚」，但他們確實很好。定義的列表在語義上更加正確，因爲「address」是「101 Main Street」的定義。但是，這一切如此重要？ – user1032531

對於你想要的佈局，我願意'

'標籤將是最合理的選擇，這取決於你要求的佈局。 @ user1032531 –

表格設計是設計網站的一種古老方式，所以只有在您真正需要表格樣式時才使用它們。改用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>標籤

來源

2014-02-20 14:29:11 Fxxxx

是的，舊的網站設計與表，但爲佈局的目的，表是完美的。 –

如果你想要表格樣式（邊框等），你必須使用表格BUT表不應該用於設計網站的結構。這已被棄用。 – Fxxxx

是的，同意了。但他的問題確實沒有說明他正在使用

來設計他的整個網站。 –

相關問題

使用HTML顯示多列列表的最佳方式

回答

相關問題