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

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

<!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>

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

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

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

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

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

效果如下：

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

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

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

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

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

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

然后再看跨行：

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

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

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

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

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

這里也說(shuō)一下僅作了解：其實(shí)有三個(gè)標(biāo)簽<thead></thead> 這是表頭，誒，這你聽(tīng)懂了，那么下面就好理解了，<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í)候我在想，我為什么要講表格？后來(lái)想想，淘寶設(shè)計(jì)師還是用的到的，那么只好咬牙堅(jiān)持了。講表格要做噩夢(mèng)的，求安慰啊～～

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

本書(shū)是收費(fèi)的，不過(guò)交費(fèi)憑自覺(jué)。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

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

主站首發(fā)： http://coffee.zji.me/
Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
簡(jiǎn)書(shū)： http://www.jianshu.com/users/d37eaf3de0ff
站酷： http://www.zcool.com.cn/u/12927742

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

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

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

第九章 來(lái)吧，表哥（表格）！

第九章來(lái)吧，表哥（表格）！