1.預(yù)熱

css樣式多如牛毛，我不可能一個一個去講氨菇，那樣好像背字典一樣，我相信你們也不喜歡這樣的方式妓湘。所以查蓉，我會在實戰(zhàn)中慢慢和你講解，然后榜贴，你記住一些重要的css屬性就可以了豌研。關(guān)鍵是，你要學(xué)會去查資料唬党，最好的查資料方法鹃共，不是那種去W3C School上，一頁一頁看過去驶拱，那樣的話不知道要看到什么時候霜浴，而是應(yīng)該去看一些網(wǎng)頁的源碼，看看他們的網(wǎng)頁是怎么做起來的蓝纲，用了哪些css屬性阴孟？這里面，肯定有很多css屬性你連見都沒見過税迷，我的建議是永丝，先大概去猜一下，然后用瀏覽器的F12調(diào)試功能去倒騰倒騰箭养。不需要你對每一個css屬性都了如指掌慕嚷，你只要大概理解意思，然后掌握一些基本的css屬性就可以了露懒。普通的網(wǎng)頁能自己畫出來闯冷，復(fù)雜的網(wǎng)頁能從別的地方拷貝過來，并且看懂懈词，就可以了蛇耀。

那么今天呢，我?guī)Т蠹矣胻able來做一個簡單的demo坎弯，通過一個具體的例子纺涤，來看一下table怎么用译暂？首先，打開Eclipse撩炊，新建一個HTML頁面外永。

1489021441090048056.png

首先，我們要在body區(qū)域弄出個空間來拧咳，專門存放這個table伯顶。之前我們都是直接在body上面弄的，而事實上骆膝，在實際開發(fā)中是不會這么做的祭衩。好的，我們來一個div元素阅签，加一個class叫做wrap掐暮，wrap表示包裹，我們需要一個div來包裹table政钟。

接著路克，在head元素上掛載一個style元素，專門用來設(shè)置樣式表养交。接著精算，給wrap設(shè)置一點點樣式。

效果：

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

哇破花，是不是有了谦趣，太棒了。現(xiàn)在我做一個事情座每，看好前鹅，我把wrap變成span元素，會怎樣峭梳？

看效果哈：

臥槽舰绘，畫風(fēng)突變，這是什么情況葱椭？對了捂寿，span是什么元素啊，是不是行內(nèi)元素啊孵运。我們給一個行內(nèi)元素設(shè)置寬度和高度是沒有效果的秦陋。所以就變成了這樣，那么治笨，怎么辦呢驳概，我們需要把span強制轉(zhuǎn)換成塊級元素赤嚼，是不是就好了呀？

效果：

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

在剛才的例子中顺又，我們把一個div元素或者span元素都相對于父元素居中顯示了更卒，我現(xiàn)在請問一下大家，在實際開發(fā)中稚照，讓一個元素相對于父元素居中顯示蹂空，這樣的需求是不是很常見呀？

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

1489026181387098368.png

引入這個css：

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

這樣就OK啦琉苇。

3.終于開始畫table了

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

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

刷新頁面：

就這樣抡诞，一個簡單的table就畫好咯~

4.合并單元格

既然學(xué)table穷蛹，肯定會遇到一個問題，那就是怎樣合并單元格呢昼汗？

比如肴熏，我希望在第二列和第三列下面增加一行，怎么辦顷窒？很簡單蛙吏，我只需要在后面再寫一個tr，里面有兩個td：

這個tr希望和它平級：

可惜效果不對鞋吉，這一行被擠下來了鸦做，原因很簡單，因為第一列沒有占據(jù)兩行谓着，所以如果我們硬是在后面添加一行泼诱，就會被擠下來。解決方法赊锚，是在第一列的td元素上坷檩，綁定一個rowspan屬性却音，設(shè)置為2：

1489026700715061544.png

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

如圖，我在</tr>下面重新寫了一個tr句灌，這表示重起一行夷陋，然后，掛載一個td元素胰锌，并且綁定colspan屬性骗绕，這個屬性的含義就是列合并。

各位资昧，再看一下之前的這個例子酬土，是不是一共有三列啊，那么我就colspan=3格带，表示合并三列撤缴，效果：

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

1489027220387037348.png

這樣是不是就好了呀屈呕？

5.畫一張請假單？

接下來我們加快一點進度棺亭，來做一個請假單吧虎眨。我們把顏色調(diào)成黑色。

再添幾行：

把文字填進去：

最后是班主任審批：

效果：

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

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

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

最后约啊，手動調(diào)一個高度出來：

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