table的使用以及其內padding、margin的實現

如圖，這樣的樣式該如何排版呢？

可能會有人這樣排版：最外層一個div，裏面有2個子div，而後每一個子div中又有5個行級元素：

<div>
  <div class="first">
     <spam>xxx</span>
     <spam>xxx</span>
     <spam>xxx</span>
     <spam>xxx</span>
     <spam>xxx</span>
  </div>

  <div class="second">
     <spam>xxx</span>
     <spam>xxx</span>
     <spam>xxx</span>
     <spam>xxx</span>
     <spam>xxx</span>
  </div>
</div>

這樣會有一個什麼問題呢？因爲每個span中的內容是不肯定的，有的內容長，有的內容短，那麼就沒法保證每一列都是對其的。也就是說，咱們想要在同一列的元素是相同的寬度，一列中任意一個元素變長，整個列內的元素寬度都會變長，這樣才能保證每一列都保持整齊。若是採用上述，只能每一行都單獨給span元素設置不一樣的margin，來保證每一列排列整齊，這仍是在內容再也不發生變化的前提下，若是往後內容再發生變化，又要從新調整margin值，維護性太差。

因此！總結，一旦遇到須要每一列排列整齊的，不要多想，使用表格table！

但使用table，並非很順手，由於會發現，有些table元素設置padding和margin沒有鳥用。

首先來講說，table、tr和td這3個元素標籤。

元素/是否支持	margin	padding
table	有效	視狀況而定
tr	無效	有padding區但無效
td	無效	有效

解釋一下：table至關於一個容器，margin固然有效。但其padding要看狀況了。

table有一個屬性，叫作border-collapse，默認的值是separate，就是說每個td都是獨立的，各自有各自的邊框，互不重疊，td與table之間有距離，如圖：

這個時候，table元素的paddnig屬性是有效的（固然有效，你看如今每個td和table不也有間距嗎，這個間距就是padding了。）

但若是設置table的border-collapse屬性爲collapse，即每一個td都緊挨着，且和table之間沒空隙，如圖：

此時，table元素的paddnig屬性就無效了（固然咯，你設置合併了，td和table之間原本就無縫隙了，你再設置padding固然無效了。）

tr的padding，設置tr的padding後，咱們審查元素，確實能看到設置的padding區，可是徹底不影響，td的內容仍是能夠在tr的padding區顯示，因此這裏，你們能夠認爲，tr的padding也是無效的。

如今問題就是，有效的咱們能夠設置，那無效的咱們怎麼設置呢？

①table的padding

剛纔說了，想要設置table的padding，能夠默認table的屬性border-collapse爲separate，這樣就能設置padding了。

然而，這樣每個td就分開了。實際上，如今不少框架，默認的border-collapse已是collapse，由於沒有任何一個表格，想要每一個單元格分開那種醜陋的效果（看上面那個分開的表格）。那怎麼辦呢？拿最上面的效果圖來講，能夠在table外套一層div，將table須要的padding值，改爲外層div的padding值，效果是同樣的，如圖：

<div style="padding"0 20px;">
 <table>
   內容
 </table>
</div>

table的padding使用外層div的padding代替。

②tr的margin和padding

表格就是一行接着一行展現數據和參數，因此，行與行（tr和tr）之間有必要空一段距離顯示嗎？顯然，是不必的。因此，tr的margin無效，不用管，由於咱們根本不用設置tr的margin。

tr的padding，設置tr的padding對佈局無影響，若是真的須要tr的padding，其實tr的padding不也至關於table的padding嗎？而table的padding，剛纔不是說了，至關於外層div的padding嗎？因此，咱們看錶格時，都是看的table的有效區，無效邊白區都是靠外層div設置padding的。

總結，tr不要設置任何的margin和padding，只是起到換行做用的元素，沒其餘任何做用。

③td的margin

一旦設置了border-collapse的屬性爲collapse，也就是說咱們但願td的無間隙，即margin爲0的。因此，不必設置td的margin。

所有總結一下，table的每一個單元格確定是緊挨着的，而不是separate的。若是你用的是框架，則默認值必定是border-collapse：collapse。若是你沒采用任何框架，記得將border-collapse設置爲collapse。

一旦設置爲collapse後，意味着咱們但願table是沒padding的，td是沒margin的。此外，tr是不須要設置任何margin和padding的。則剩下的只有table的padding和td的padding。td的padding能直接設置，table的padding則採用套外層div設置。