<dl> 與 <table> 的區別

重點先講

序言

排列資料時，遇上這種排版結構會有點頭痛：

    姓名 | 小隊
--------------------
中須かすみ | QU4RTZ
桜坂しずく | A·ZU·NA
    鐘嵐珠 | R3BIRTH

這個該用 <dl> 類元素呢？

<dl>
    <div>
        <dt>中須かすみ</dt>
        <dd>QU4RTZ</dd>
    </div>
    <div>
        <dt>桜坂しずく</dt>
        <dd>A·ZU·NA</dd>
    </div>
    <div>
        <dt>鐘嵐珠</dt>
        <dd>R3BIRTH</dd>
    </div>
</dl>

還是 <table> 類元素呢？

<table>
    <tr>
        <td>中須かすみ</td>
        <td>QU4RTZ</td>
    </tr>
    <tr>
        <td>桜坂しずく</td>
        <td>A·ZU·NA</td>
    </tr>
    <tr>
        <td>鐘嵐珠</td>
        <td>R3BIRTH</td>
    </tr>
</table>

用 CSS 的話，當然兩個都有類似的效果──但語意上呢？

我查了一下規範與資料，答案是：儘管兩者都是呈現 key 與 value 關係的元素，但在語意上 <dl> 與 <table> 是會有區別的。

<dl>

<dl> 是用來描述詞語的定義或資訊：

The <dl> HTML element represents a description list... Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs)...

The dl element represents an association list consisting of zero or more name-value groups... A name-value group consists of one or more names... followed by one or more values...

所以一個理想的 <dl> 會是這樣：

<dl>
    <div>
        <dt>dictionary</dt>
        <dd>a list of words and their meanings</dd>
    </div>
    <div>
        <dt>Japan</dt>
        <dt>Nippon</dt>
        <dd>an island country in East Asia</dd>
    </div>
    <div>
        <dt>table</dt>
        <dd>a furniture with a top surface to accommodate a variety of uses</dd>
        <dd>a two-dimensional presentation of data</dd>
    </div>
</dl>

如果這樣還很抽象的話，我們可以想成是 JSON 格式：

{
    "dictionary": [
        "a list of words and their meanings"
    ],
    "Japan": [
        "an island country in East Asia"
    ],
    "Nippon": [
        "an island country in East Asia"
    ],
    "table": [
        "a furniture with a top surface to accommodate a variety of uses",
        "a two-dimensional presentation of data"
    ]
}

<table>

另一方面 <table> 元素會以欄和列為依據，整理或組織有關資料之間的關係：

The <table> HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

The table element represents data with more than one dimension, in the form of a table. The table element takes part in the table model. Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table's cells must completely cover that grid without overlap.

比方說，課表就是一個適合用表格排列與呈現的東西：

<table>
	<caption>標題：模擬課表</caption>
	<tr>
		<td>節次/星期</td>
		<td>星期一</td>
		<td>星期二</td>
		<td>星期三</td>
		<td>星期四</td>
		<td>星期五</td>
	</tr>
	<tr>
		<td>第一節</td>
		<td>通識教育</td>
		<td>  </td>
		<td>  </td>
		<td>微積分</td>
		<td>線性代數</td>
	</tr>
	<tr>
		<td>第二節</td>
		<td>通識教育</td>
		<td>離散數學</td>
		<td>英文(一)</td>
		<td>微積分</td>
		<td>線性代數</td>
	</tr>
	<tr>
		<td>第三節</td>
		<td></td>
		<td>離散數學</td>
		<td>英文(一)</td>
		<td>微積分</td>
		<td>線性代數</td>
	</tr>
	<tr>
		<td>第四節</td>
		<td> </td>
		<td>體育(一)</td>
		<td>計算機概論</td>
		<td>數位邏輯設計</td>
		<td></td>
	</tr>
	<tr>
		<td>第五節</td>
		<td></td>
		<td>體育(一)</td>
		<td>計算機概論</td>
		<td>數位邏輯設計</td>
		<td></td>
	</tr>
	<tr>
		<td>第六節</td>
		<td></td>
		<td></td>
		<td>計算機概論</td>
		<td>數位邏輯設計</td>
		<td>韻律教學法</td>
	</tr>
		<td>第七節</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td>韻律教學法</td>
	</tr>		
</table>

（上面 HTML 取自 gaoshix 的 課表練習）

如果想成是 JSON 格式的話，大概是這樣：

[{
    "節次/星期": "第一節",
    "星期一": "通識教育",
    "星期二": "",
    "星期三": "",
    "星期四": "微積分",
    "星期五": "線性代數"
}, {
    "節次/星期": "第二節",
    "星期一": "通識教育",
    "星期二": "離散數學",
    "星期三": "英文(一)",
    "星期四": "微積分",
    "星期五": "線性代數"
}, 
    // 以下省略
]

回到一開始的例子

再回到前面的例子：

    姓名 | 小隊
--------------------
中須かすみ | QU4RTZ
桜坂しずく | A·ZU·NA
    鐘嵐珠 | R3BIRTH

這個該用 <dl> 還是 <table> 呢？

很明顯，因為三位人名都有兩個資料：「姓名」與「小隊」。因此，這表該用 <table> 元素，把三個人的「姓名」與「小隊」關聯起來。就像這樣：

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>小隊</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>中須かすみ</td>
            <td>QU4RTZ</td>
        </tr>
        <tr>
            <td>桜坂しずく</td>
            <td>A·ZU·NA</td>
        </tr>
        <tr>
            <td>鐘嵐珠</td>
            <td>R3BIRTH</td>
        </tr>
    </tbody>
</table>

以上。

參考資料