HTML的dl、dt、dd標記制作表格對決Table制作表格

2024-08-26 00:09:35

字體：大中小

來源：轉載

供稿：網友

過去有很多網頁設計師喜歡將他們的網頁效果圖用table布局實現成網頁，但是這樣做會遇到一個比較麻煩的問題就是，后期調試和維護會相當的困難。現在，越來越多的前端開發er們開始使用xhtml+css替代最初的table布局完成網頁的整體布局，不但讓網站降低了開發和維護的成本，而且代碼也更語義化了。但是，并不是說table從此消失了，它仍然被很多人用來作為網頁中數據表現的必需品，比如個人信息數據列表等。事實上，使用html的dl、dt、dd標簽會讓你節省更多的代碼，更能讓代碼符合內容的語義化。當然，table也有它的用武之地，那就是很大數據量的數據表，但是小型的數據列表和表單完全可以不使用table哦！

dl列表和table表格哪個更適合數據列表

如果你仍然在使用傳統table來創建數據列表，那么請繼續往下看，看看使用html的dl、dt、dd標簽是如何讓你的工作更輕松…

table數據列表

傳統table的數據列表代碼如下所示。我們要為每行添加tr標簽，然后還要在其中為標題和數據各加一個td標簽，由于標簽都是td，想要添加樣式的話還要為每個td添加class屬性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<table>
<tbody>
<tr>
<td class="title">name:</td>
<td class="text">squall li</td>
</tr>
<tr>
<td class="title">age:</td>
<td class="text">23</td>
</tr>
<tr>
<td class="title">gender:</td>
<td class="text">male</td>
</tr>
<tr>
<td class="title">day of birth:</td>
<td class="text">26th may 1986</td>
</tr>
</tbody>
</table>

上一篇：知名瀏覽器對DOCTYPE模式的選擇機制

下一篇：用標準dl,dt,dd標簽拋棄table列表