上節(jié)課果覆，使用table做出了一個最基本的表格呜笑，學會了設(shè)置表格的屬性夫否，調(diào)整寬度和邊框。
這節(jié)課叫胁，來學習如何更多table的用法凰慈，以及使用table來對頁面進行版面布局的方法。
上節(jié)課的課后練習
1.表格當中增加4行內(nèi)容：Windows 20年驼鹅，Linux 10年微谓，Oracle 10年，MySQL 12年输钩。
修改html文件豺型，復制粘貼4行，然后修改里面的文字內(nèi)容：
刷新頁面：
2.表格增加一列买乃，放在第一列姻氨，列里面的內(nèi)容分別是：1-6行：編程語言，7-8行：操作系統(tǒng)剪验，9-10行：數(shù)據(jù)庫肴焊。
修改html代碼，在table里面的每一個<tr>后面增加內(nèi)容：<td class="td1">編程語言</td>功戚，7-10行修改文字內(nèi)容娶眷，如下圖：
刷新頁面看看：
縱向合并td
通過新增td可以在表格中增加列。這里感覺有點不好的地方疫铜，就是1-6行都是編程語言茂浮，有點重復，是否可以合并為一個格子呢壳咕？
可以使用rowspan屬性來將td進行縱向合并席揽。
修改html代碼如下，在需要向下合并的td里面設(shè)置屬性rowspan=行數(shù)：
刷新頁面：
可以看到谓厘，rowspan可以告訴td向下合并幾行幌羞，同時注意下面的幾行都不要再寫這一列被合并掉的td了，否則會多出來td的竟稳。
大家可以嘗試属桦，不刪除某一行的<td class="td1">編程語言</td>語句看看是什么樣的效果熊痴。
td中的文字內(nèi)容居中
表格的td中的文字內(nèi)容默認是靠左對齊的，如果要讓表格中的第一列文字希望水平居中顯示聂宾，可以使用CSS屬性text-align: center;來實現(xiàn)果善，修改css里面的樣式td1和td2：
刷新頁面看看：
很多標簽元素都可以使用屬性text-align來實現(xiàn)文字水平居中顯示。
可以使用text-align: left; 來讓文字靠左對齊系谐；還可以使用text-align: right; 來讓文字靠右對齊巾陕。
橫向合并td
既然可以縱向合并td，那么肯定也可以進行橫向合并td纪他，就是將同一行的2列的td合并為一個td鄙煤。
可以使用td屬性colspan=列數(shù)來實現(xiàn)橫向合并td。
在html代碼的table里面最后一行下面新增一行內(nèi)容：其它茶袒，J2ME游戲開發(fā)若干年梯刚。
將第2列和第3列合并為一個td。
修改html文件：
刷新頁面：
可以看到薪寓，2列的td被合并在一起了亡资。
改成2行2列表格來對頁面排版
使用div標簽元素來對頁面進行排版，有一個不足之處预愤，那就是div結(jié)束的地方會自動進行換行沟于。
如果要將兩個div并排顯示在同一個水平線上就有些不太方便。
可以通過修改div為相對父元素定位改變?yōu)楦咏^對位置定位的方式來實現(xiàn)植康，但是這種方式同樣也存在一些局限性，它需要對div的層次關(guān)系非常清楚展懈，并且不方便根據(jù)不同瀏覽器的寬度進行相對的設(shè)置销睁。
通過用table表格標簽來進行布局，在td當中嵌套div的方法存崖，是一個有效的完成頁面布局排版的方式冻记。
例如，來將上面?zhèn)€人簡介網(wǎng)頁當中的“工作經(jīng)歷”和“工作經(jīng)驗（部分）”這2大塊設(shè)置為同一行的并排兩大塊来惧。
首先冗栗，在“工作經(jīng)驗”這個div之前插入表格的5行代碼：
<table><tr><td class="td3">
</td><td class="td4">
</td></tr><tr><td class="td3">
</td><td class="td4">
</td></tr></table>
然后，將“工作經(jīng)歷”的標題部分代碼剪切粘貼到第1個td當中供搀；
將“工作經(jīng)驗（部分）”的標題部分代碼剪切粘貼到第2個td當中隅居；
將“工作經(jīng)歷”的詳細內(nèi)容部分代碼剪切粘貼到第3個td當中；
將“工作經(jīng)驗（部分）”的詳細內(nèi)容部分代碼剪切粘貼到第4個td當中葛虐；
html修改后代碼如下：
然后修改css文件胎源，增加td3和td4的屬性設(shè)置，設(shè)置寬度各為50%屿脐，內(nèi)邊距為0px涕蚤。
css修改后代碼如下：
刷新頁面：
發(fā)現(xiàn)幾個問題：
第1個是div的邊框是跟隨著div的內(nèi)容的宪卿，內(nèi)容多，邊框上下高度就大万栅，內(nèi)容少佑钾，則邊框上下高度就小，這樣看起來就是不對齊的烦粒。
由于div里面的內(nèi)容是變化的休溶，不固定的，因此不能采用div的邊框撒遣，而要改成td的邊框來設(shè)置邮偎，因為td的邊框總是對齊的。
第2個是td當中的div內(nèi)容是默認垂直居中的义黎，要修改為靠上對齊禾进；
第3個是由于前面定義了針對table標簽元素的通用屬性，有右邊框和下邊框廉涕，因此這里也用到了table標簽泻云，所以這個table也被設(shè)置了右邊框和下邊框，要把這里的table邊框?qū)傩匀サ簟?br>
下面先來解決div邊框變?yōu)閠d邊框的問題：
首先狐蜕，修改css文件宠纯，復制一個moresmallcontent樣式，然后樣式名字變?yōu)閙oresmallcontent2层释，把里面的border設(shè)置為0px;
然后婆瓜，修改td3的邊框，增加一個border屬性和之前div的邊框?qū)傩灾狄粯庸备幔缓笤黾右粋€特殊的border-right屬性廉白，顏色值不一樣；
然后乖寒，修改td4的邊框猴蹂，增加一個border屬性和之前div的邊框?qū)傩灾狄粯樱缓笤黾右粋€特殊的border-left屬性楣嘁，為0px磅轻；
css修改后代碼如下：
html將原來的moresmallcontent樣式名字修改為moresmallcontent2。
html修改后代碼如下：
刷新頁面：
設(shè)置元素內(nèi)的內(nèi)容垂直方向?qū)R
上面的效果圖可以看到右側(cè)的內(nèi)容比較少逐虚，由于td針對元素內(nèi)部的內(nèi)容聋溜，默認是垂直居中顯示的，這里修改為垂直靠上比較好看痊班。
修改css文件勤婚，在td3和td4里面增加一行vertical-align:top;
修改后的css代碼如下：
刷新頁面：
可以看到右側(cè)的內(nèi)容也是靠上對齊了，這樣如果繼續(xù)往下面增加更多內(nèi)容的話涤伐，就不會影響到頁面的排版了馒胆。
還可以使用屬性值middle和bottom來設(shè)置垂直居中和垂直靠下的對齊方式缨称。
針對某個特定元素的id設(shè)置樣式
前面定義了針對table標簽元素的通用屬性，有右邊框和下邊框祝迂，因此這里也用到了table標簽睦尽，所以這個table也被設(shè)置了右邊框和下邊框，要把這里的table邊框?qū)傩匀サ簟?br>
前面講過可以通過class="樣式名"的方式給某個特定元素設(shè)置指定的樣式型雳，其實還有另外一種方式可以針對某個特定元素設(shè)置樣式当凡。
每個標簽元素可以設(shè)置一個屬性id="頁面中唯一id值"，來給每一個標簽元素賦予一個獨一無二的名字纠俭，這就是id屬性的功能沿量。
給元素設(shè)置好id屬性之后，就可以在css文件中通過設(shè)置樣式 #id 的方式來給這個特定的元素設(shè)置樣式值冤荆。
修改html文件來給剛才的table增加一個id朴则。
html修改后的代碼如下：
修改css文件來給這個id賦予樣式值。
css修改后的代碼如下：
刷新頁面：
可以看到钓简，表格的右邊框和下邊框不見了乌妒，并且通過增加border-collapse:collapse;來讓td之間的邊框合并為一個單一的邊框，讓當中的豎線開起來比較舒服外邓。
標簽元素嵌套繼承關(guān)系和順序關(guān)系
總結(jié)一下撤蚊，標簽元素之間比較重要的嵌套的層次關(guān)系。
A標簽元素被包含在B標簽元素當中损话。那么B就是A的父元素侦啸，A就是B的子元素。父子關(guān)系一定不能搞錯丧枪。
因為元素嵌套關(guān)系中匹中，父元素的屬性會影響到子元素，除非子元素自定重新定義豪诲。
這個知識點，前面有講過挂绰，這里這是再次提醒屎篱。
另外，CSS樣式里面還有一個順序關(guān)系要注意葵蒂。
就是針對同一個標簽元素的同樣的樣式定義交播，以最后一個樣式的值為準。
例如前面的樣式：
border: solid 1px #303030;
border-right: solid 1px #b2b2b2;
這2行践付，是針對td的邊框進行設(shè)置秦士。
先設(shè)置4個邊框的樣式都是 solid 1px #303030;樣式值，這里面就包含了border-right永高，然后再下面一行再設(shè)置border-right隧土，樣式值就以后面一個值為準提针，前面的設(shè)置的值就被替換掉了。
課后練習
1.去網(wǎng)上搜索2個自己喜歡的圖片曹傀，1個圖片用來作為整個網(wǎng)頁的背景辐脖，另一個圖片可以進行重疊組成網(wǎng)頁的背景。
2.給技術(shù)經(jīng)驗的表格增加一個表頭皆愉，標題分別是：技術(shù)類別嗜价，技術(shù)點，經(jīng)驗?zāi)陻?shù)幕庐。文字加粗顯示久锥。
往期教程
因為教程是系列教程，前后關(guān)聯(lián)性非常強异剥，請大家按照歷史消息發(fā)布時間先后次序進行閱讀瑟由。
