上節課，使用table做出了一個最基本的表格，學會了設置表格的屬性，調整寬度和邊框。
這節課，來學習如何更多table的用法，以及使用table來對頁面進行版面布局的方法。
上節課的課后練習
1.表格當中增加4行內容：Windows 20年，Linux 10年，Oracle 10年，MySQL 12年。
修改html文件，復制粘貼4行，然后修改里面的文字內容：
刷新頁面：
2.表格增加一列，放在第一列，列里面的內容分別是：1-6行：編程語言，7-8行：操作系統，9-10行：數據庫。
修改html代碼，在table里面的每一個<tr>后面增加內容：<td class="td1">編程語言</td>，7-10行修改文字內容，如下圖：
刷新頁面看看：
縱向合并td
通過新增td可以在表格中增加列。這里感覺有點不好的地方，就是1-6行都是編程語言，有點重復，是否可以合并為一個格子呢？
可以使用rowspan屬性來將td進行縱向合并。
修改html代碼如下，在需要向下合并的td里面設置屬性rowspan=行數：
刷新頁面：
可以看到，rowspan可以告訴td向下合并幾行，同時注意下面的幾行都不要再寫這一列被合并掉的td了，否則會多出來td的。
大家可以嘗試，不刪除某一行的<td class="td1">編程語言</td>語句看看是什么樣的效果。
td中的文字內容居中
表格的td中的文字內容默認是靠左對齊的，如果要讓表格中的第一列文字希望水平居中顯示，可以使用CSS屬性text-align: center;來實現，修改css里面的樣式td1和td2：
刷新頁面看看：
很多標簽元素都可以使用屬性text-align來實現文字水平居中顯示。
可以使用text-align: left; 來讓文字靠左對齊；還可以使用text-align: right; 來讓文字靠右對齊。
橫向合并td
既然可以縱向合并td，那么肯定也可以進行橫向合并td，就是將同一行的2列的td合并為一個td。
可以使用td屬性colspan=列數來實現橫向合并td。
在html代碼的table里面最后一行下面新增一行內容：其它，J2ME游戲開發若干年。
將第2列和第3列合并為一個td。
修改html文件：
刷新頁面：
可以看到，2列的td被合并在一起了。
改成2行2列表格來對頁面排版
使用div標簽元素來對頁面進行排版，有一個不足之處，那就是div結束的地方會自動進行換行。
如果要將兩個div并排顯示在同一個水平線上就有些不太方便。
可以通過修改div為相對父元素定位改變為浮動絕對位置定位的方式來實現，但是這種方式同樣也存在一些局限性，它需要對div的層次關系非常清楚，并且不方便根據不同瀏覽器的寬度進行相對的設置。
通過用table表格標簽來進行布局，在td當中嵌套div的方法，是一個有效的完成頁面布局排版的方式。
例如，來將上面個人簡介網頁當中的“工作經歷”和“工作經驗（部分）”這2大塊設置為同一行的并排兩大塊。
首先，在“工作經驗”這個div之前插入表格的5行代碼：
<table><tr><td class="td3">
</td><td class="td4">
</td></tr><tr><td class="td3">
</td><td class="td4">
</td></tr></table>
然后，將“工作經歷”的標題部分代碼剪切粘貼到第1個td當中；
將“工作經驗（部分）”的標題部分代碼剪切粘貼到第2個td當中；
將“工作經歷”的詳細內容部分代碼剪切粘貼到第3個td當中；
將“工作經驗（部分）”的詳細內容部分代碼剪切粘貼到第4個td當中；
html修改后代碼如下：
然后修改css文件，增加td3和td4的屬性設置，設置寬度各為50%，內邊距為0px。
css修改后代碼如下：
刷新頁面：
發現幾個問題：
第1個是div的邊框是跟隨著div的內容的，內容多，邊框上下高度就大，內容少，則邊框上下高度就小，這樣看起來就是不對齊的。
由于div里面的內容是變化的，不固定的，因此不能采用div的邊框，而要改成td的邊框來設置，因為td的邊框總是對齊的。
第2個是td當中的div內容是默認垂直居中的，要修改為靠上對齊；
第3個是由于前面定義了針對table標簽元素的通用屬性，有右邊框和下邊框，因此這里也用到了table標簽，所以這個table也被設置了右邊框和下邊框，要把這里的table邊框屬性去掉。
下面先來解決div邊框變為td邊框的問題：
首先，修改css文件，復制一個moresmallcontent樣式，然后樣式名字變為moresmallcontent2，把里面的border設置為0px;
然后，修改td3的邊框，增加一個border屬性和之前div的邊框屬性值一樣，然后增加一個特殊的border-right屬性，顏色值不一樣；
然后，修改td4的邊框，增加一個border屬性和之前div的邊框屬性值一樣，然后增加一個特殊的border-left屬性，為0px；
css修改后代碼如下：
html將原來的moresmallcontent樣式名字修改為moresmallcontent2。
html修改后代碼如下：
刷新頁面：
設置元素內的內容垂直方向對齊
上面的效果圖可以看到右側的內容比較少，由于td針對元素內部的內容，默認是垂直居中顯示的，這里修改為垂直靠上比較好看。
修改css文件，在td3和td4里面增加一行vertical-align:top;
修改后的css代碼如下：
刷新頁面：
可以看到右側的內容也是靠上對齊了，這樣如果繼續往下面增加更多內容的話，就不會影響到頁面的排版了。
還可以使用屬性值middle和bottom來設置垂直居中和垂直靠下的對齊方式。
針對某個特定元素的id設置樣式
前面定義了針對table標簽元素的通用屬性，有右邊框和下邊框，因此這里也用到了table標簽，所以這個table也被設置了右邊框和下邊框，要把這里的table邊框屬性去掉。
前面講過可以通過class="樣式名"的方式給某個特定元素設置指定的樣式，其實還有另外一種方式可以針對某個特定元素設置樣式。
每個標簽元素可以設置一個屬性id="頁面中唯一id值"，來給每一個標簽元素賦予一個獨一無二的名字，這就是id屬性的功能。
給元素設置好id屬性之后，就可以在css文件中通過設置樣式 #id 的方式來給這個特定的元素設置樣式值。
修改html文件來給剛才的table增加一個id。
html修改后的代碼如下：
修改css文件來給這個id賦予樣式值。
css修改后的代碼如下：
刷新頁面：
可以看到，表格的右邊框和下邊框不見了，并且通過增加border-collapse:collapse;來讓td之間的邊框合并為一個單一的邊框，讓當中的豎線開起來比較舒服。
標簽元素嵌套繼承關系和順序關系
總結一下，標簽元素之間比較重要的嵌套的層次關系。
A標簽元素被包含在B標簽元素當中。那么B就是A的父元素，A就是B的子元素。父子關系一定不能搞錯。
因為元素嵌套關系中，父元素的屬性會影響到子元素，除非子元素自定重新定義。
這個知識點，前面有講過，這里這是再次提醒。
另外，CSS樣式里面還有一個順序關系要注意。
就是針對同一個標簽元素的同樣的樣式定義，以最后一個樣式的值為準。
例如前面的樣式：
border: solid 1px #303030;
border-right: solid 1px #b2b2b2;
這2行，是針對td的邊框進行設置。
先設置4個邊框的樣式都是 solid 1px #303030;樣式值，這里面就包含了border-right，然后再下面一行再設置border-right，樣式值就以后面一個值為準，前面的設置的值就被替換掉了。
課后練習
1.去網上搜索2個自己喜歡的圖片，1個圖片用來作為整個網頁的背景，另一個圖片可以進行重疊組成網頁的背景。
2.給技術經驗的表格增加一個表頭，標題分別是：技術類別，技術點，經驗年數。文字加粗顯示。
往期教程
因為教程是系列教程，前后關聯性非常強，請大家按照歷史消息發布時間先后次序進行閱讀。
