1.預(yù)熱

css樣式多如牛毛，我不可能一個(gè)一個(gè)去講，那樣好像背字典一樣，我相信你們也不喜歡這樣的方式。所以，我會(huì)在實(shí)戰(zhàn)中慢慢和你講解，然后，你記住一些重要的css屬性就可以了。關(guān)鍵是，你要學(xué)會(huì)去查資料，最好的查資料方法，不是那種去W3C School上，一頁一頁看過去，那樣的話不知道要看到什么時(shí)候，而是應(yīng)該去看一些網(wǎng)頁的源碼，看看他們的網(wǎng)頁是怎么做起來的，用了哪些css屬性？這里面，肯定有很多css屬性你連見都沒見過，我的建議是，先大概去猜一下，然后用瀏覽器的F12調(diào)試功能去倒騰倒騰。不需要你對(duì)每一個(gè)css屬性都了如指掌，你只要大概理解意思，然后掌握一些基本的css屬性就可以了。普通的網(wǎng)頁能自己畫出來，復(fù)雜的網(wǎng)頁能從別的地方拷貝過來，并且看懂，就可以了。

那么今天呢，我?guī)Т蠹矣胻able來做一個(gè)簡(jiǎn)單的demo，通過一個(gè)具體的例子，來看一下table怎么用？首先，打開Eclipse，新建一個(gè)HTML頁面。

首先，我們要在body區(qū)域弄出個(gè)空間來，專門存放這個(gè)table。之前我們都是直接在body上面弄的，而事實(shí)上，在實(shí)際開發(fā)中是不會(huì)這么做的。好的，我們來一個(gè)div元素，加一個(gè)class叫做wrap，wrap表示包裹，我們需要一個(gè)div來包裹table。

接著，在head元素上掛載一個(gè)style元素，專門用來設(shè)置樣式表。接著，給wrap設(shè)置一點(diǎn)點(diǎn)樣式。

效果：

如何讓這個(gè)div元素居中呢？是不是只要讓它左右兩邊的margin自適應(yīng)就OK了呀？OK，我們加上：

哇，是不是有了，太棒了?，F(xiàn)在我做一個(gè)事情，看好，我把wrap變成span元素，會(huì)怎樣？

看效果哈：

臥槽，畫風(fēng)突變，這是什么情況？對(duì)了，span是什么元素啊，是不是行內(nèi)元素啊。我們給一個(gè)行內(nèi)元素設(shè)置寬度和高度是沒有效果的。所以就變成了這樣，那么，怎么辦呢，我們需要把span強(qiáng)制轉(zhuǎn)換成塊級(jí)元素，是不是就好了呀？

效果：

2.編寫工具類樣式文件 tool.css

在剛才的例子中，我們把一個(gè)div元素或者span元素都相對(duì)于父元素居中顯示了，我現(xiàn)在請(qǐng)問一下大家，在實(shí)際開發(fā)中，讓一個(gè)元素相對(duì)于父元素居中顯示，這樣的需求是不是很常見呀？

那有沒有什么辦法，讓我們下次再遇到這個(gè)需求的時(shí)候，直接用起來就行了呢？答案肯定是有的，我們可以封裝一個(gè)通用的工具類，然后把一些經(jīng)常要用到的樣式放進(jìn)去，就OK了。現(xiàn)在我們來編寫一個(gè)tool.css工具類。

引入這個(gè)css：

然后，在span元素上綁定對(duì)應(yīng)的class：

這樣就OK啦。

3.終于開始畫table了

現(xiàn)在，我們開始畫一個(gè)table，比如來一個(gè)一行三列的table：

為了看出效果，我們需要另外給這個(gè)table元素，tr和td元素設(shè)置樣式：

刷新頁面：

就這樣，一個(gè)簡(jiǎn)單的table就畫好咯~

4.合并單元格

既然學(xué)table，肯定會(huì)遇到一個(gè)問題，那就是怎樣合并單元格呢？

比如，我希望在第二列和第三列下面增加一行，怎么辦？很簡(jiǎn)單，我只需要在后面再寫一個(gè)tr，里面有兩個(gè)td：

這個(gè)tr希望和它平級(jí)：

可惜效果不對(duì)，這一行被擠下來了，原因很簡(jiǎn)單，因?yàn)榈谝涣袥]有占據(jù)兩行，所以如果我們硬是在后面添加一行，就會(huì)被擠下來。解決方法，是在第一列的td元素上，綁定一個(gè)rowspan屬性，設(shè)置為2：

這樣就可以了吧，這就是所謂的行合并，那么怎樣列合并呢？

如圖，我在下面重新寫了一個(gè)tr，這表示重起一行，然后，掛載一個(gè)td元素，并且綁定colspan屬性，這個(gè)屬性的含義就是列合并。

各位，再看一下之前的這個(gè)例子，是不是一共有三列啊，那么我就colspan=3，表示合并三列，效果：

還有個(gè)問題，這個(gè)table沒有默認(rèn)占滿父容器，那么我就得手動(dòng)設(shè)置它的width為100%：

這樣是不是就好了呀？

5.畫一張請(qǐng)假單？

接下來我們加快一點(diǎn)進(jìn)度，來做一個(gè)請(qǐng)假單吧。我們把顏色調(diào)成黑色。

再添幾行：

把文字填進(jìn)去：

最后是班主任審批：

效果：

這樣就有一個(gè)問題，對(duì)于領(lǐng)導(dǎo)批示，寬度應(yīng)該比較窄才會(huì)比較好看，可是現(xiàn)在的話明顯太寬了，有沒有什么辦法呢？第一個(gè)想到的，肯定是給它設(shè)置寬度：

刷新頁面,無效，這又是什么原因呢？原來，現(xiàn)在我們每一行是三列，第一列就只能這么寬，除非我們給它多加一列。

這表示給第一行第一列設(shè)置列合并為2，那么每一行就有了4列。一共有幾列是以第一行為準(zhǔn)的。這樣一來，下面這幾個(gè)地方也要跟著改：

最后，手動(dòng)調(diào)一個(gè)高度出來：

接著，就好像撘房子一樣，房子搭好了，就可以把一些輔助工具撤銷掉了，比如border。

歡迎關(guān)注我的個(gè)人博客，http://www.xiaotublog.com/ ，不定期分享各種資料。

http://www.cnblogs.com/skyblue-li/p/6525480.html