前端07班 王

對(duì)于table的使用我們會(huì)有種先入為主的厭惡。覺得頁面中不應(yīng)該出現(xiàn)表格！其實(shí)這只是針對(duì)使用HTML表格 來定義網(wǎng)頁的布局，表格在方便的排列數(shù)據(jù)信息行和列方面還是非常完美。
下面我們就一起來學(xué)習(xí)一下table吧：
對(duì)于表格，我們現(xiàn)在已經(jīng)不推薦使用它的一些自帶屬性，因?yàn)楝F(xiàn)在我們都在強(qiáng)調(diào)要保證結(jié)構(gòu)與樣式的分離，所以將想要定義的樣式都放到css文件中吧。
table的10個(gè)相關(guān)標(biāo)簽<table> 定義表格<caption> 定義表格標(biāo)題<col> 為表格的列定義屬性<colgroup> 定義表格列的分組<thead> 定義表格的表頭<th>定義表格的表頭<tr> 定義表格的行<tfoot> 定義表格的表注(底部)<tbody> 定義表格主體<td> 定義一個(gè)單元格

基本的表格結(jié)構(gòu):標(biāo)題、頭部、主體和底部

對(duì)于表格我們最熟悉的就是table , tr , th , td , thead ,tbody ,tfoot 這幾個(gè)標(biāo)簽了，對(duì)于col , colground 這兩個(gè)標(biāo)簽很多人都忽視了，也許有的人根本就不知道，但其實(shí)這兩個(gè)標(biāo)簽作用很大。下面我們就一起來看看這兩個(gè)標(biāo)簽的用法吧。<colgroup>此標(biāo)簽用于對(duì)表格中的列進(jìn)行組合使用 span屬性可以指定 colgroup定義的表格列數(shù)，該屬性的缺省值為 1。所有主流瀏覽器都支持 colgroup 標(biāo)簽，colgroup 標(biāo)簽只能在 table 元素中使用，colgroup中定義的style顏色屬性是會(huì)被td中重新定義的顏色覆蓋。這時(shí)style樣式不再是高優(yōu)先級(jí)了。
通過測(cè)試發(fā)現(xiàn)colgroup中除的background-color,width這兩個(gè)常用的屬性設(shè)置值是起作用的，其他一些屬性如：color , font-size , font-weight ，給這些屬性設(shè)置值是不起作用的。所以我們要很好地把這兩個(gè)屬性利用起來。
下面我們來結(jié)合圖片、代碼及文字說明來看看 這個(gè)標(biāo)簽的使用：
（一）、如圖示，下面表格的每一列的背景色與寬度是不一樣的

下面看具體的html代碼：

<table class="colgroup_data">
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>營(yíng)收(百萬美元)</th>
<th>利潤(rùn)(億美元)</th>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
</tbody>
</table>

我們看到上面定義了4個(gè)colgroup標(biāo)簽，他們分別對(duì)應(yīng)下面的每一列，里面分別定義了一個(gè)類名，下面看一下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)先級(jí)，但實(shí)際上我們?cè)陧撁嬷锌吹降膮s不是設(shè)定的顏色，而是td單元格中定義的屬性。（二）、結(jié)合js進(jìn)行隔行變色，這樣不僅列的顏色可以不一樣，行的顏色也可以不一樣，這樣我們就可以制作出一個(gè)單元格背景色多變的多樣化表格

下面看具體的html代碼：
<table class="colgroup_span">
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>營(yíng)收(百萬美元)</th>
<th>利潤(rùn)(億美元)</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>

我們看到上面一段代碼只定義了兩個(gè)colgroup標(biāo)簽，第一個(gè)colgroup標(biāo)簽對(duì)應(yīng)第一列，第二個(gè)colgroup標(biāo)簽對(duì)應(yīng)第二、三二列，這是因?yàn)樵诘诙€(gè)colgroup標(biāo)簽里面定義了span屬性，值為2。當(dāng)span屬性不寫值時(shí)，它會(huì)被默認(rèn)為1。上面我們定義了兩個(gè)colgroup標(biāo)簽，總共對(duì)應(yīng)了下面的三列，但是表格有四列，則剩下的就是沒有定義的，它會(huì)繼承表格默認(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)在看到的表格的顏色不是純粹的上面定義的兩列的顏色，這是因?yàn)槲覀兲砑恿艘欢蝚s,給表格的偶數(shù)行添加了青色背景。這時(shí)我們會(huì)發(fā)現(xiàn)我們列定義的背景顏色被行定義的樣式覆蓋了，這不是因?yàn)閖s添加的行的樣式寫大下面，優(yōu)先級(jí)比較高的原因，而是因?yàn)閏olgroup中定義的屬性值會(huì)被td單元格中定義的屬性值覆蓋，除非td單元格不定義樣式，則會(huì)以colgroup標(biāo)簽中的樣式為準(zhǔn)。
我們上面寫到雖然給colgroup定義了顏色屬性，但卻沒有達(dá)到預(yù)期的效果。通過多次測(cè)試，發(fā)現(xiàn)colgroup標(biāo)簽只有background-color、width這兩個(gè)屬性是起作用的。其他的屬性，如：font-size、font-weight、color等屬性，給他們?cè)O(shè)值是不起作用的，td單元格依舊以他們自己的默認(rèn)屬性值為標(biāo)準(zhǔn)，如果td單元格沒有設(shè)置樣式，它們則會(huì)繼承td單元格父級(jí)的樣式，也不會(huì)用colgroup標(biāo)簽中設(shè)置的屬性值。（注：通過測(cè)試發(fā)現(xiàn)大IE6及IE7下面colgroup中設(shè)置的一系列屬性值是有作用的，但鑒于瀏覽器的兼容性，所以除了background-color、width這兩個(gè)屬性可以使用外，其他屬性不建議使用）如果哪位高手知道colgroup中在不同瀏覽器下均可使用的屬性歡迎補(bǔ)充。
此元素是塊元素,它不需要關(guān)閉標(biāo)簽。
col元素可嵌套于 colgroup元素內(nèi)。這時(shí)嵌套的 col 屬性將覆蓋 colgroup屬性。col和 colgroup元素可用于類似的目的。如果我們?cè)?colgroup中嵌套了col元素，則應(yīng)該避免在 colgroup中再使用 span標(biāo)簽屬性。因?yàn)榍短椎?col中的 span屬性將覆蓋 colgroup中的標(biāo)簽屬性。如果兩個(gè)都定義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>營(yíng)收(百萬美元)</th>
<th>利潤(rùn)(億美元)</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)簽時(shí)的代碼，只是這里將colgroup標(biāo)簽換成了col標(biāo)簽，然后根據(jù)里面定義的類名對(duì)這個(gè)表格的每個(gè)列的背景及寬度進(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)一個(gè)有趣的現(xiàn)象，正常我們寫了什么結(jié)構(gòu)，在頁面下查看源碼的時(shí)候，也應(yīng)該看到什么樣的結(jié)構(gòu)

通常情況下我們會(huì)認(rèn)為我們應(yīng)該看到如上圖一樣的表格結(jié)構(gòu)，但通過在不同瀏覽器下測(cè)試發(fā)現(xiàn)（目前只測(cè)試了火狐與chrome兩個(gè)瀏覽器），在相同內(nèi)核瀏覽器下隨著瀏覽器版本的升級(jí)，它們對(duì)col與colgroup標(biāo)簽有了不同的解析，我們看一下下面的截圖：

瀏覽器經(jīng)過解析給col標(biāo)簽自動(dòng)添加了父級(jí)標(biāo)簽colgroup，通過看上面兩張圖的比較，我們可以對(duì)colgroup和col有更好地理解了，col與colgroup都是定義列的標(biāo)簽元素，但colgroup標(biāo)簽還可以定義列的組，它可以單獨(dú)使用，也可以結(jié)合col標(biāo)簽一起使用。通過上面在高版本瀏覽器下的測(cè)試的例子，說明瀏覽器對(duì)col標(biāo)簽的解析更深入貼切了，所以個(gè)人建意以后使用col標(biāo)簽的時(shí)候，配合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>營(yíng)收(百萬美元)</th>
<th>利潤(rùn)(億美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃爾瑪</td>
<td>351,139.0</td>
<td>11,284.0</td>
</tr>
</tbody>
</table>

通過上面代碼我們知道，第一列為一組，剩下的三列為一組，第二組又分為三列，而第二組中的第一個(gè)col標(biāo)簽又定義了二、三兩列的樣式，第二個(gè)標(biāo)簽則定義了第三列的樣式。

具體html代碼：

<table class="col_span">
<col span="2" />
<col />
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>營(yíng)收(百萬美元)</th>
<th>利潤(rùn)(億美元)</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)常會(huì)遇到表格的數(shù)據(jù)太多而，將頁面撐破的情況，這時(shí)就需要對(duì)表格進(jìn)行控制了。下面我們一起來看如何解決表格強(qiáng)制換行的問題。
表格強(qiáng)制換行，有一個(gè)必須的條件就是經(jīng)要表格定義寬度。一定是表格本身的寬度，而不是td單元格的寬度。
我們依舊圖片、代碼及文字說明相結(jié)合來學(xué)習(xí)這個(gè)問題的解決方法：

我們將單詞之間的空格去掉了，變成一個(gè)單詞，我們可以看到一個(gè)單詞之間斷開換行了。下面我們 來研究一下代碼。
具體html代碼：

<table class="wordWrap_table">
<tbody>
<tr>
<td class="wrap_td">Innovationhasnolimits.Theonlylimitisyourimagination!!!!!!!!!!!!!!!!!!!</td>
</tr>
</tbody>
</table>

我們?yōu)楸砀裉砑恿艘粋€(gè)類名，為td也添加了一個(gè)類名
具體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;它指示表格不要試圖自己計(jì)算表格寬度，而是按照HTML中定義的寬度來顯示。當(dāng)table- layout:fixed和word-wrap:break-word同時(shí)指定時(shí)，針對(duì)連續(xù)符號(hào)的斷字才會(huì)正確發(fā)生。缺少table-layout:fixed，斷字不會(huì)發(fā)生，表格仍被撐大。缺少word-wrap:break-word，則表格不會(huì)被撐大，但斷字不會(huì)發(fā)生,超過顯示區(qū)域的內(nèi)容將被hide。固定表格布局與自動(dòng)表格布局相比，允許瀏覽器更快地對(duì)表格進(jìn)行布局。在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾?、單元格間距，而與單元格的內(nèi)容無關(guān)。看到一些例子，里面添加了word-break:break-all;這個(gè)控制屬性，雖然這樣也能強(qiáng)制換行，但在不同瀏覽器下會(huì)有一些小小的差別。

這種情況是大火狐，Opera瀏覽器下出現(xiàn)的情況

IE6 、IE7、IE8、Chrome等瀏覽器下出現(xiàn)的情況，通過比較我們發(fā)現(xiàn)一個(gè)細(xì)微的差別。就是第一行一個(gè)是單詞換行了，另一個(gè)是單詞斷了換行word-break:break-all; 的解釋：如table寬200px，它的內(nèi)容就會(huì)到200px自動(dòng)換行，如果該行末端有個(gè)英文單詞很長(zhǎng)（congratulation），它會(huì)把單詞截?cái)?，變成該行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了長(zhǎng)，但這個(gè)理論通過上面兩張圖片的比較，知道火狐與Opera是不適用的，如果是對(duì)各個(gè)主流瀏覽器要求比較高的情況下，建議不要加word-break:break-all;。通過上面的表格強(qiáng)制換行的情況，對(duì)div中出現(xiàn)的強(qiáng)制換行我們也作一個(gè)相應(yīng)的擴(kuò)充郵箱地址換行我們建站時(shí)經(jīng)常會(huì)遇到大側(cè)邊欄添加郵箱地址的情況，但經(jīng)常會(huì)遇到郵箱地址太長(zhǎng)的情況，以前的解決方法就是大郵箱地址長(zhǎng)度確定的情況下，改變字體大小，或者 添加強(qiáng)制換行符，但其實(shí)這些可擴(kuò)展性不強(qiáng)，遇到不同長(zhǎng)度郵箱地址的時(shí)候不能隨機(jī)應(yīng)變。下面我們就來看一個(gè)例子

具體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)制換行的效果的。