在網(wǎng)頁設(shè)計(jì)中使用CSS可以實(shí)現(xiàn)對(duì)表格的樣式控制,其中表格樣式包括邊框?qū)挾?、邊框顏色、邊框樣式以及表格背景等效果,以及如何?a href="http://www.margaycoffee.com" target="_self" title="昆明網(wǎng)站制作">網(wǎng)頁設(shè)計(jì)時(shí)使用CSS控制表格特性等。
設(shè)置表格顏色
CSS使用color屬性設(shè)置表格中文字的顏色,通過background-color屬性來設(shè)置表格的背景顏色。
【示例】啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁,保存為test.html,在<body>標(biāo)簽內(nèi)輸入如下代碼:
<table width="300" border="1"> <tr>
<td>姓名</td>
<td>性別</td>
<td>地址</td>
<td>單位</td>
<td>郵編</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr> <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr></table>
在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式,用來定義網(wǎng)頁字體的類型。
table{ /*設(shè)置表格的CSS樣式*/
background-color:#00CCFF; /*表格的背景顏色*/
color:#FF0000; /*表格的字體顏色*/}
上面代碼中,用<table>標(biāo)簽創(chuàng)建了一個(gè)表格,設(shè)置表格的寬度為300,表格的邊框?qū)挾葹?,這里沒有給出單位,默認(rèn)為px。使用<tr>和<td>標(biāo)簽創(chuàng)建了4行5列的表格??梢钥吹?,表格的背景顏色和字體顏色通過CSS進(jìn)行了設(shè)置。
在網(wǎng)站建設(shè)中,設(shè)置表格邊框同樣是通過border屬性,設(shè)置方法與設(shè)置圖片邊框完全一樣,只不過要特別注意單元格邊框的設(shè)置。
【示例】啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁,保存為test.html,在<body>標(biāo)簽內(nèi)輸入如下內(nèi)容:
<table>
<caption> 2012-2015年招生情況 </caption>
<tr>
<th></th>
<th scope="col">2012</th>
<th scope="col">2013</th>
<th scope="col">2014</th>
<th scope="col">2015</th>
</tr>
<tr>
<th scope="row">招生總數(shù)</th>
<td>980</td>
<td>650</td>
<td>700</td>
<td>600</td> </tr> <tr>
<th scope="row">男生</th>
<td>480</td>
<td>300</td>
<td>400</td>
<td>290</td>
</tr>
<tr>
<th scope="row">女生</th>
<td>500</td>
<td>350</td>
<td>300</td>
<td>310</td>
</tr></table>
在以上代碼中,用<caption>標(biāo)簽定義了表格的標(biāo)題,該標(biāo)簽可以出現(xiàn)在<table>與</table>之間的任意位置,不過通常習(xí)慣放在表格的第1行,緊接著<table>標(biāo)簽。<th>標(biāo)簽在表格中主要用于定義行或列的名稱,在本例中,行的名稱為“2012”“2013”等,列的名稱為“招生總數(shù)”“男生”“女生”,在<th>標(biāo)簽中的scope屬性就是用來區(qū)分行名稱和列名稱的,分別設(shè)置scope的值為row或col,分別代表行名稱或列名稱。
在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式:
body { /*網(wǎng)頁基本樣式*/
margin: 0px;
padding: 4px;}table {
color: #0046a6; /*表格文字顏色*/
font-family: Arial; /*表格字體*/
border: #006666 solid 1px; /*表格邊框*/}table caption {
font-size: 18px; /*標(biāo)題文字大小*/
font-weight: bold; /*標(biāo)題文字粗體*/}
在以上代碼中,設(shè)置了表格邊框,顯示效果如圖6.48所示。從圖6.48中可以看到,雖給表格設(shè)置了邊框,但是單元格并沒有任何邊線,所以,在設(shè)置表格邊框時(shí),還要注意給單元格也單獨(dú)地設(shè)置相應(yīng)的邊框,在以上CSS樣式表中,添加下列樣式代碼:
table th, table td { color: #003e7e; /*行、列名稱顏色*/
border: #006666 solid 1px; /*單元格邊框*/}
讀者會(huì)發(fā)現(xiàn),如上所述設(shè)置完成后,單元格的邊框之間會(huì)有空隙,這時(shí)需要設(shè)置CSS中整個(gè)表格的border-collapse屬性,使得邊框重合到一起,具體代碼如下:
table { color: #0046a6; /*表格文字顏色*/
font-family: Arial; /*表格字體*/
border: #006666 solid 1px; /*表格邊框*/
border-collapse: collapse; /*邊框重疊*/}
由于表格邊框默認(rèn)是立體效果,在瀏覽時(shí)會(huì)顯得很粗,即使設(shè)置邊框?yàn)?像素也是這樣。利用HTML屬性也可以設(shè)計(jì)細(xì)線表格,具體方法如下。
【操作步驟】
第1步,新建文檔,保存為test1.html,復(fù)制test.html文檔中的表格結(jié)構(gòu)。設(shè)置表格【間距】為1,【邊框】為0,同時(shí)設(shè)置表格的背景顏色。上面3個(gè)屬性是關(guān)鍵點(diǎn),其他屬性可以任意設(shè)置。HTML標(biāo)簽設(shè)置屬性如下:
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF00FF">
第2步,用鼠標(biāo)拖選全部單元格,并在【屬性】面板中設(shè)置背景色為白色。
第3步,保存文檔,并在瀏覽器中瀏覽。
細(xì)線表格技巧原理就是利用表格背景顏色包含表格間距區(qū)域,并利用“遮罩”技法間接實(shí)現(xiàn)的一種效果。