使用DIV時，table和ul分別在什麼情況下使用？

01-11

使用div進行基礎布局之後，對於布局內的一些排版，大家都說最好用ul來代替table，但是感覺有些情況table用起來就是比ul簡單啊？比如用戶的註冊窗口，用table就可以很好的控制每一行的對齊了，但是一些網站還是用了ul，來通過設置每一行的邊距控制對齊，為什麼？到底什麼table和ul分別在什麼情況下使用呢？

不鞋葯

題主對幾個基本概念的理解及其混亂。

div table ul 他們都是HTML中的標籤，通常情況下，每個標籤都是有語義的，所謂語義就是你的衣服分為外套，褲子，裙子，內褲等，各司其職。你不能把內褲套在脖子上。﹌○﹌

當然實際上很多人這樣幹了，也就是分不清每個標籤具體的作用。

所謂的 div + CSS 是極其毒害概念，莫要再看些國內山寨的網站或書籍了。

div span 在HTML中是無語義的標籤，不要大面積使用。
table 的語義是一個數據表，比如一個課程表。
ul 的語義是無序列表，比如這裡的三種標籤的介紹。

然後，對於樣式的控制應該用CSS，也更容易控制。為什麼？耦合什麼的你可能不太理解，還是那個例子，穿對衣服，搭配好衣服，才能更美噠●﹏●。

前段時間一小伙穿了件日本國旗的衣服，結果給自己找了很多麻煩。

學好基礎，重視語義，重視CSS。

ヾ(￣▽￣)更新：

lwx22
div可以達到代碼簡潔的效果，是趨勢，span才是無語義的。比如，一段文字中，要粗體紅色大號「特價」兩個字，就用span，然後CSS定義屬性，而不能用div，因為div必須有高度寬度，即使是自適應。

這是典型的CSS和HTML概念模糊的理解，HTML是表意而非表象的。

通俗來說就是，HTML 中的標籤應該是描述內容本質的含義，而非這塊內容顯示什麼顏色，多寬多高。比如具有導航性質的內容就應該用 HTML5 新增的 & 標籤（注意：不是只有導航欄才能用 nav 標籤），建議大家反覆理解 @winter 的答案：HTML5 里 section article 什麼區別？header footer nav 該怎麼理解？

另外參考：html導航菜單為什麼都用li+a標籤，而不直接用a標籤，或者用nav+a標籤，html5中導航菜單該怎樣寫？

塊級或者行內是CSS中的概念，HTML並不是這麼分的。你看到的 div 元素默認是 Block 的，這是因為瀏覽器給了他默認的樣式 display: block, 你完全可以把它設置為 inline 或者 none，不存在 div 必須有寬高的說法。

「div可以達到代碼簡潔的效果」這是因為沒有充分了解 HTML 還有其他哪些標籤可以用。

如果是一段粗體紅色大號「特價」兩個字，那這裡在 HTML 中的描述應該是要強調「特價」二字，強調語義對應的有 & 標籤，所以這裡用 strong 能更好的描述語義。

& &特價&

& & strong { color: red; font-size: 30px; } &

就醬……

首先要理解語義化，這個也是 HTML 標籤最直接的用法。比如 table 就是表格，所有表格類型的數據，都應該用 table 來放。nav 代表導航欄，裡邊可以放一個 ul 來寫鏈接列表。

我自己理解的語義化 HTML，就是當你的頁面撤掉所有的 CSS，仍然能夠清晰的反應各種層次和結構，這就是比較好的實現，這也是可訪問性的一個要求吧。

有朋友提到的可以用 CSS 改造樣式，就可以把 HTML 標籤改造並應用到任何地方，這個觀點也是有誤區的。

CSS 是一種增強頁面內容表現的語言，可以用來改變顏色（color/bgc）、尺寸（width/height/margin/padding/border）、交互效果（hover/active/visited/transform/transition），也可以用來破壞布局（display/position/float，我用的是破壞，而不是改變，我覺得差別還是很大的）。HTML 的設計是語義化的，任何非正常的使用都會降低頁面的可訪問性（比如最初的 table 布局，DIV+CSS 編寫風格等），可以參考 http://semantic-ui.com/ 中與 Bootstrap 的對比，可以很好的反應語義化。

最後，附上我自己的兩篇文章吧，希望能有幫助：

blog/html.md

blog/html_semantic.md

很簡單：table用於表格，ul用於無序列表。

ul在導航欄等地的使用也非常廣泛——因為它們就是個無序列表。

在CSS時代，不要糾結於元素樣式。把樣式交給CSS，讓元素標籤回歸本源。

這樣瀏覽器也更方便，你閱讀源碼也更方便。

何樂而不為呢。

如果是發批郵的話，註冊窗口等就用table寫，考慮兼容性。

如果是網頁的話，肯定還是用ul，一個是標籤讀取速度，第二是便於控制，第三是便於seo優化。

如果是做後台系統，需要呈現出大量的數據列表，那肯定是tr，td了。

其實在什麼時候都應該少用table，而選擇用css控制樣式，ul是個選擇，但也不是唯一選擇。

而div跟這個問題其實沒什麼關係。建議你學好關於html標籤的基礎，以及css的用法和用處在來思考這個問題

最早frontpage時代，大家都是ul ul ul

然後dreamweaver時代，大家都是table table table

後dreamweaver時代，大家都是div div div

現在大家都是CSS CSS CSS

一個語意上的，一個效率上的，table代碼多，更改td會造成整個table重新布局

個人理解

table表示的是有行列結構的數據

ul表示的是沒有順序的簡單列表數據

他們的本質都是容器，只要有足夠的CSS，他們表現是一致的，都可以滿足人們的需求。

他們的適用場所，就是按照語義來使用。table只用於表格，ul只用於無序列表。

具體到你說的註冊頁面，使用div足夠應對。從語義上說，不應該用ul。

實在不知道怎麼搞，可以看看bootstrap。

table的定義較繁瑣，有三個層級，table，tr，td，而且它的有些屬性，用CSS不易控制，代碼繁複混亂。ul只要兩層，ul，li，他們可以隨意鑲套，css中可以div.ul，http://div.li這樣定義屬性，清楚瞭然。之所以單獨推廣div加css，不是為了裝逼，用table也完全可以做到的功能，而是為了代碼的簡潔和樣式的分離，還有清晰的代碼結構。

table完全可以退休，不再在網站結構上使用，只是作為表格出現在內容里。