前端07班 王
對于table的使用我們會有種先入為主的厭惡。覺得頁面中不應(yīng)該出現(xiàn)表格！其實這只是針對使用HTML表格 來定義網(wǎng)頁的布局，表格在方便的排列數(shù)據(jù)信息行和列方面還是非常完美。
下面我們就一起來學(xué)習(xí)一下table吧：
對于表格，我們現(xiàn)在已經(jīng)不推薦使用它的一些自帶屬性，因為現(xiàn)在我們都在強(qiáng)調(diào)要保證結(jié)構(gòu)與樣式的分離，所以將想要定義的樣式都放到css文件中吧。
table的10個相關(guān)標(biāo)簽<table> 定義表格<caption> 定義表格標(biāo)題<col> 為表格的列定義屬性<colgroup> 定義表格列的分組<thead> 定義表格的表頭<th>定義表格的表頭<tr> 定義表格的行<tfoot> 定義表格的表注(底部)<tbody> 定義表格主體<td> 定義一個單元格
基本的表格結(jié)構(gòu):標(biāo)題、頭部、主體和底部
對于表格我們最熟悉的就是table , tr , th , td , thead ,tbody ,tfoot 這幾個標(biāo)簽了，對于col , colground 這兩個標(biāo)簽很多人都忽視了，也許有的人根本就不知道，但其實這兩個標(biāo)簽作用很大。下面我們就一起來看看這兩個標(biāo)簽的用法吧。<colgroup>此標(biāo)簽用于對表格中的列進(jìn)行組合使用 span屬性可以指定 colgroup定義的表格列數(shù)，該屬性的缺省值為 1。所有主流瀏覽器都支持 colgroup 標(biāo)簽，colgroup 標(biāo)簽只能在 table 元素中使用，colgroup中定義的style顏色屬性是會被td中重新定義的顏色覆蓋。這時style樣式不再是高優(yōu)先級了。
通過測試發(fā)現(xiàn)colgroup中除的background-color,width這兩個常用的屬性設(shè)置值是起作用的，其他一些屬性如：color , font-size , font-weight ，給這些屬性設(shè)置值是不起作用的。所以我們要很好地把這兩個屬性利用起來。
下面我們來結(jié)合圖片、代碼及文字說明來看看 這個標(biāo)簽的使用：
（一）、如圖示，下面表格的每一列的背景色與寬度是不一樣的
下面看具體的html代碼：
<table class="colgroup_data">
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>營收(百萬美元)</th>
<th>利潤(億美元)</th>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
</tbody>
</table>
我們看到上面定義了4個colgroup標(biāo)簽，他們分別對應(yīng)下面的每一列，里面分別定義了一個類名，下面看一下css樣式的定義：
.colgroup_data .one_col { background:#f2eada; text-align: center; }
.colgroup_data .two_col { background:#C7E291; text-align: center; font-weight:700; }
.colgroup_data .three_col { background: #fff287; text-align: center; }
.colgroup_data .four_col { color: #0051e6!important; background: #FFBFBF; text-align: center; }
四種樣式分別定義了四種背景色。當(dāng)然我們也可以為每列定義寬度，上面的代碼中我們看到第四行，我們給color添加了imgportant，以增加他的優(yōu)先級，但實際上我們在頁面中看到的卻不是設(shè)定的顏色，而是td單元格中定義的屬性。（二）、結(jié)合js進(jìn)行隔行變色，這樣不僅列的顏色可以不一樣，行的顏色也可以不一樣，這樣我們就可以制作出一個單元格背景色多變的多樣化表格
下面看具體的html代碼：
<table class="colgroup_span">
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>營收(百萬美元)</th>
<th>利潤(億美元)</th>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
</tbody>
</table>
我們看到上面一段代碼只定義了兩個colgroup標(biāo)簽，第一個colgroup標(biāo)簽對應(yīng)第一列，第二個colgroup標(biāo)簽對應(yīng)第二、三二列，這是因為在第二個colgroup標(biāo)簽里面定義了span屬性，值為2。當(dāng)span屬性不寫值時，它會被默認(rèn)為1。上面我們定義了兩個colgroup標(biāo)簽，總共對應(yīng)了下面的三列，但是表格有四列，則剩下的就是沒有定義的，它會繼承表格默認(rèn)的樣式。下面我們來看上面表格中的css樣式定義：
.colgroup_span .one_col { background:#f2eada; text-align: center; }
.colgroup_span .two_col { background:#fff287; text-align: center; }
分別定義了第一列為很淺紅，第二列、第三列為淡黃色，剩下的則是沒有定義的，默認(rèn)為白色。但我們現(xiàn)在看到的表格的顏色不是純粹的上面定義的兩列的顏色，這是因為我們添加了一段js,給表格的偶數(shù)行添加了青色背景。這時我們會發(fā)現(xiàn)我們列定義的背景顏色被行定義的樣式覆蓋了，這不是因為js添加的行的樣式寫大下面，優(yōu)先級比較高的原因，而是因為colgroup中定義的屬性值會被td單元格中定義的屬性值覆蓋，除非td單元格不定義樣式，則會以colgroup標(biāo)簽中的樣式為準(zhǔn)。
我們上面寫到雖然給colgroup定義了顏色屬性，但卻沒有達(dá)到預(yù)期的效果。通過多次測試，發(fā)現(xiàn)colgroup標(biāo)簽只有background-color、width這兩個屬性是起作用的。其他的屬性，如：font-size、font-weight、color等屬性，給他們設(shè)值是不起作用的，td單元格依舊以他們自己的默認(rèn)屬性值為標(biāo)準(zhǔn)，如果td單元格沒有設(shè)置樣式，它們則會繼承td單元格父級的樣式，也不會用colgroup標(biāo)簽中設(shè)置的屬性值。（注：通過測試發(fā)現(xiàn)大IE6及IE7下面colgroup中設(shè)置的一系列屬性值是有作用的，但鑒于瀏覽器的兼容性，所以除了background-color、width這兩個屬性可以使用外，其他屬性不建議使用）如果哪位高手知道colgroup中在不同瀏覽器下均可使用的屬性歡迎補(bǔ)充。
此元素是塊元素,它不需要關(guān)閉標(biāo)簽。
col元素可嵌套于 colgroup元素內(nèi)。這時嵌套的 col 屬性將覆蓋 colgroup屬性。col和 colgroup元素可用于類似的目的。如果我們在 colgroup中嵌套了col元素，則應(yīng)該避免在 colgroup中再使用 span標(biāo)簽屬性。因為嵌套的 col中的 span屬性將覆蓋 colgroup中的標(biāo)簽屬性。如果兩個都定義span標(biāo)簽屬性也容易引起代碼的混亂意想不到的結(jié)果。
下面我們來看幾種col標(biāo)簽的使用情況：
（一）、col標(biāo)簽控制列的寬度及背景色
具體html代碼：
<table class="colgroup_col">
<col align="right" />
<col />
<col />
<col />
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>營收(百萬美元)</th>
<th>利潤(億美元)</th>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
</tbody>
</table>
這段代碼是不是很熟悉，就是上面的學(xué)習(xí)colgroup標(biāo)簽時的代碼，只是這里將colgroup標(biāo)簽換成了col標(biāo)簽，然后根據(jù)里面定義的類名對這個表格的每個列的背景及寬度進(jìn)行定義。
css樣式代碼：
.colgroup_col .one_col { background:#f2eada; text-align: center; }
.colgroup_col .two_col { width:250px; background:#C7E291; text-align: center; }
.colgroup_col .three_col { background:#fff287; text-align: center; }
.colgroup_col .four_col { color: #ffd400; background: #FFBFBF; text-align: center; }
上面四行css樣式分別定義 了每一列的背景及寬度。這里發(fā)現(xiàn)一個有趣的現(xiàn)象，正常我們寫了什么結(jié)構(gòu)，在頁面下查看源碼的時候，也應(yīng)該看到什么樣的結(jié)構(gòu)
通常情況下我們會認(rèn)為我們應(yīng)該看到如上圖一樣的表格結(jié)構(gòu)，但通過在不同瀏覽器下測試發(fā)現(xiàn)（目前只測試了火狐與chrome兩個瀏覽器），在相同內(nèi)核瀏覽器下隨著瀏覽器版本的升級，它們對col與colgroup標(biāo)簽有了不同的解析，我們看一下下面的截圖：
瀏覽器經(jīng)過解析給col標(biāo)簽自動添加了父級標(biāo)簽colgroup，通過看上面兩張圖的比較，我們可以對colgroup和col有更好地理解了，col與colgroup都是定義列的標(biāo)簽元素，但colgroup標(biāo)簽還可以定義列的組，它可以單獨(dú)使用，也可以結(jié)合col標(biāo)簽一起使用。通過上面在高版本瀏覽器下的測試的例子，說明瀏覽器對col標(biāo)簽的解析更深入貼切了，所以個人建意以后使用col標(biāo)簽的時候，配合colgroup標(biāo)簽一起使用，這樣才更符合標(biāo)簽的語義話。
（二）、col標(biāo)簽結(jié)合colgroup標(biāo)簽的使用
具體html代碼：
<table class="colgroup_col">
<col />
<col />
<col />
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>營收(百萬美元)</th>
<th>利潤(億美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃爾瑪</td>
<td>351,139.0</td>
<td>11,284.0</td>
</tr>
</tbody>
</table>
通過上面代碼我們知道，第一列為一組，剩下的三列為一組，第二組又分為三列，而第二組中的第一個col標(biāo)簽又定義了二、三兩列的樣式，第二個標(biāo)簽則定義了第三列的樣式。
具體html代碼：
<table class="col_span">
<col span="2" />
<col />
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>營收(百萬美元)</th>
<th>利潤(億美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃爾瑪</td>
<td>351,139.0</td>
<td>11,284.0</td>
</tr>
</tbody>
</table>
從上面的代碼我們可以看出col可以和clogroup標(biāo)簽一樣使用span屬性來控制的列數(shù)
通過上面圖片、代碼及文字的說明我們可以很清楚地知道col及colgroup標(biāo)簽的區(qū)別及使用方法了。理解不到位的地方，歡迎大家指出與補(bǔ)充:）
表格強(qiáng)制換行（非亞洲語言文本）我們經(jīng)常會遇到表格的數(shù)據(jù)太多而，將頁面撐破的情況，這時就需要對表格進(jìn)行控制了。下面我們一起來看如何解決表格強(qiáng)制換行的問題。
表格強(qiáng)制換行，有一個必須的條件就是經(jīng)要表格定義寬度。一定是表格本身的寬度，而不是td單元格的寬度。
我們依舊圖片、代碼及文字說明相結(jié)合來學(xué)習(xí)這個問題的解決方法：
我們將單詞之間的空格去掉了，變成一個單詞，我們可以看到一個單詞之間斷開換行了。下面我們 來研究一下代碼。
具體html代碼：
<table class="wordWrap_table">
<tbody>
<tr>
<td class="wrap_td">Innovationhasnolimits.Theonlylimitisyourimagination!!!!!!!!!!!!!!!!!!!</td>
</tr>
</tbody>
</table>
我們?yōu)楸砀裉砑恿艘粋€類名，為td也添加了一個類名
具體css代碼：
.wordWrap_table{ width:200px; table-layout:fixed; word-wrap:break-word; }
.wrap_td{ padding:10px; font-size:16px; border:1px solid #ddd; }
首先為表格定義寬度，然后table-layout:fixed;它指示表格不要試圖自己計算表格寬度，而是按照HTML中定義的寬度來顯示。當(dāng)table- layout:fixed和word-wrap:break-word同時指定時，針對連續(xù)符號的斷字才會正確發(fā)生。缺少table-layout:fixed，斷字不會發(fā)生，表格仍被撐大。缺少word-wrap:break-word，則表格不會被撐大，但斷字不會發(fā)生,超過顯示區(qū)域的內(nèi)容將被hide。固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進(jìn)行布局。在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾取卧耖g距，而與單元格的內(nèi)容無關(guān)。看到一些例子，里面添加了word-break:break-all;這個控制屬性，雖然這樣也能強(qiáng)制換行，但在不同瀏覽器下會有一些小小的差別。
這種情況是大火狐，Opera瀏覽器下出現(xiàn)的情況
IE6 、IE7、IE8、Chrome等瀏覽器下出現(xiàn)的情況，通過比較我們發(fā)現(xiàn)一個細(xì)微的差別。就是第一行一個是單詞換行了，另一個是單詞斷了換行word-break:break-all; 的解釋：如table寬200px，它的內(nèi)容就會到200px自動換行，如果該行末端有個英文單詞很長（congratulation），它會把單詞截斷，變成該行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了長，但這個理論通過上面兩張圖片的比較，知道火狐與Opera是不適用的，如果是對各個主流瀏覽器要求比較高的情況下，建議不要加word-break:break-all;。通過上面的表格強(qiáng)制換行的情況，對div中出現(xiàn)的強(qiáng)制換行我們也作一個相應(yīng)的擴(kuò)充郵箱地址換行我們建站時經(jīng)常會遇到大側(cè)邊欄添加郵箱地址的情況，但經(jīng)常會遇到郵箱地址太長的情況，以前的解決方法就是大郵箱地址長度確定的情況下，改變字體大小，或者 添加強(qiáng)制換行符，但其實這些可擴(kuò)展性不強(qiáng)，遇到不同長度郵箱地址的時候不能隨機(jī)應(yīng)變。下面我們就來看一個例子
具體html代碼：
<ul class="aside_contact">
<li><span>Email:</span><a href="#">hair@rubbermachinesupplier.com</a></li>
<li><span>Address:</span>Menlo Park</li>
</ul>
具體css代碼：
.aside_contact{ width:180px; padding:10px; }
.aside_contact li{ padding:5px 0; overflow:hidden;}
.aside_contact li span{ float:left; width:50px;}
.aside_contact li a{ float:left; width:110px; word-wrap:break-word;}
強(qiáng)制換行都是在寬度定的情況結(jié)合table-layout及word-wrap才達(dá)到完美的強(qiáng)制換行的效果的。
