是的，用表格可以布局的，或者說排版，隨你怎么叫，反正都是一回事，不過現(xiàn)在幾乎被淘汰了，大家都用 DIV + CSS 布局去了，有人說你這個叫法不科學(xué)！反正科學(xué)不科學(xué)的我不是很清楚，我就知道現(xiàn)在招聘前端都煞有介事的寫上：熟練掌握 DIV + CSS 布局；熟練掌握 Dreamweaver …… 說得好像我們這些不用 Dreamweaver 的多么山寨，多么不專業(yè)似的。

不吐槽那些應(yīng)該吐槽的了，然后強(qiáng)調(diào)一下：寫代碼一定要把代碼縮進(jìn)寫整齊！?。?/strong>重要的事情三個感嘆號哦～然后讓大家理解一下什么是清晰的代碼縮進(jìn)，下面代碼中我把每一個 tab 縮進(jìn)換成一個波折號：

<!DOCTYPE html> <html lang="zh"> —— <head> —— —— <meta charset="UTF-8"> —— —— <title>這里是標(biāo)題</title> —— </head> —— <body> —— —— <a > —— —— —— <img src="http://coffee.zji.me/imgs/bridge.jpg" /> —— —— </a> —— </body> </html>

看，這樣各個標(biāo)簽間的包含關(guān)系和層次是不是一目了然了？這個一定要理解，也要做到；這個習(xí)慣是對于任何閱讀你代碼的人的起碼的尊重，亂成一團(tuán)麻的代碼沒人愛看，而且你自己閱讀起來也很吃力。最后用當(dāng)初我的老師的一句話來結(jié)束這個話題：

代碼沒有清晰縮進(jìn)的作業(yè)別給我看，我看不懂！

好了，開始我們今天的話題，表格，剛才為什么要強(qiáng)調(diào)縮進(jìn)呢？因?yàn)楸砀竦臉?biāo)簽層次比較多，要是不清晰縮進(jìn)的話，一個表格沒寫完你就哭昏在加班的午夜了。

首先，表格的標(biāo)簽是 <table></table>，但是這還不夠，我們還要知道行的標(biāo)簽是 <tr></tr>，和單元格的標(biāo)簽是 <td></td>。然后怎么把他們合理的放在一起呢？——按著大小個嵌套：

<table border="1"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> </table>

效果如下：

第一行第一列第一行第二列第一行第三列
第二行第一列第二行第二列第二行第三列

需要解釋的有兩點(diǎn)：第一、border 這個屬性是指邊框的粗細(xì)，我設(shè)置了 1 ，這樣就能看到邊框了，因?yàn)槟J(rèn)是 0 ，那樣就不容易看懂效果了。第二、每一行中的單元格數(shù)量是相同的，合并單元格的效果在下面講；

單元格有兩個跨越屬性：colspan（跨列）、rowspan（跨行），是指當(dāng)前單元格占用幾列，或者占用幾行，我們來舉例：

<table border="1"> <tr> <td colspan="2">第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> </table>

這個單元格要占兩列的位置，效果如下：

第一行第一列第一行第二列
第二行第一列第二行第二列第二行第三列

然后再看跨行：

<table border="1"> <tr> <td rowspan="2">第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table>

第一個單元格要占用兩行，所以效果如下：

第一行第一列第一行第二列第一行第三列
第二行第一列第二行第二列

好復(fù)雜是不是？我也這么覺得，所以一般我都是用可視化編輯器（比如 Dreamweaver）來生成表格，極少自己手寫，上邊幾個屬性也是現(xiàn)查了抄過來的。大家看看做個了解，將來看到能看懂就很好了。

當(dāng)然很多做淘寶的朋友會問了，雖然說看懂就行，但是我還常見到一個標(biāo)簽?zāi)銢]說啊——<tbody></tbody>

這里也說一下僅作了解：其實(shí)有三個標(biāo)簽<thead></thead> 這是表頭，誒，這你聽懂了，那么下面就好理解了，<tbody></tbody> 是表格的主體，那么 <tfoot></tfoot>就是表格的注腳（我也不知道怎么取名字，知道我什么意思就好）他們的嵌套順序是醬紫的：

<table> <thead> <tr> <td></td> <td></td> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> </tr> </tfoot> </table>

有的時候我在想，我為什么要講表格？后來想想，淘寶設(shè)計(jì)師還是用的到的，那么只好咬牙堅(jiān)持了。講表格要做噩夢的，求安慰啊～～

本章學(xué)習(xí)卡片：卡片 9

本書是收費(fèi)的，不過交費(fèi)憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

主站首發(fā)： http://coffee.zji.me/

Gitbook: http://codeme.gitbooks.io/easy-web-code-book/

簡書： http://www.jianshu.com/users/d37eaf3de0ff

站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me

上一篇：第五十五章苛刻至極！下一篇：第十九章導(dǎo)航條（四）

第一行第一列	第一行第二列	第一行第三列
第二行第一列	第二行第二列	第二行第三列

第九章 來吧，表哥（表格）！

第九章來吧，表哥（表格）！