在網(wǎng)頁設(shè)計中使用CSS可以實現(xiàn)對表格的樣式控制，其中表格樣式包括邊框?qū)挾?、邊框顏色、邊框樣式以及表格背景等效果，以及如何?a href="http://m.supportcoffeeroasters.com" target="_self" title="昆明網(wǎng)站制作">網(wǎng)頁設(shè)計時使用CSS控制表格特性等。
設(shè)置表格顏色
CSS使用color屬性設(shè)置表格中文字的顏色，通過background-color屬性來設(shè)置表格的背景顏色。
【示例】啟動Dreamweaver，新建一個網(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)簽，定義一個內(nèi)部樣式表，然后輸入下面樣式，用來定義網(wǎng)頁字體的類型。
table{ /*設(shè)置表格的CSS樣式*/
background-color:#00CCFF; /*表格的背景顏色*/
color:#FF0000; /*表格的字體顏色*/}
上面代碼中，用<table>標(biāo)簽創(chuàng)建了一個表格，設(shè)置表格的寬度為300，表格的邊框?qū)挾葹?，這里沒有給出單位，默認(rèn)為px。使用<tr>和<td>標(biāo)簽創(chuàng)建了4行5列的表格?？梢钥吹?，表格的背景顏色和字體顏色通過CSS進行了設(shè)置。
在網(wǎng)站建設(shè)中，設(shè)置表格邊框同樣是通過border屬性，設(shè)置方法與設(shè)置圖片邊框完全一樣，只不過要特別注意單元格邊框的設(shè)置。
【示例】啟動Dreamweaver，新建一個網(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)簽，定義一個內(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è)置相應(yīng)的邊框，在以上CSS樣式表中，添加下列樣式代碼：
table th, table td { color: #003e7e; /*行、列名稱顏色*/
border: #006666 solid 1px; /*單元格邊框*/}
讀者會發(fā)現(xiàn)，如上所述設(shè)置完成后，單元格的邊框之間會有空隙，這時需要設(shè)置CSS中整個表格的border-collapse屬性，使得邊框重合到一起，具體代碼如下：
table { color: #0046a6; /*表格文字顏色*/
font-family: Arial; /*表格字體*/
border: #006666 solid 1px; /*表格邊框*/
border-collapse: collapse; /*邊框重疊*/}
由于表格邊框默認(rèn)是立體效果，在瀏覽時會顯得很粗，即使設(shè)置邊框為1像素也是這樣。利用HTML屬性也可以設(shè)計細(xì)線表格，具體方法如下。
【操作步驟】
第1步，新建文檔，保存為test1.html，復(fù)制test.html文檔中的表格結(jié)構(gòu)。設(shè)置表格【間距】為1，【邊框】為0，同時設(shè)置表格的背景顏色。上面3個屬性是關(guān)鍵點，其他屬性可以任意設(shè)置。HTML標(biāo)簽設(shè)置屬性如下：
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF00FF">
第2步，用鼠標(biāo)拖選全部單元格，并在【屬性】面板中設(shè)置背景色為白色。
第3步，保存文檔，并在瀏覽器中瀏覽。
細(xì)線表格技巧原理就是利用表格背景顏色包含表格間距區(qū)域，并利用“遮罩”技法間接實現(xiàn)的一種效果。
當(dāng)前文章標(biāo)題：在網(wǎng)頁設(shè)計中定義表格樣式
當(dāng)前URL：http://m.supportcoffeeroasters.com/news/wzzz/3116.html
上一篇：藝術(shù)化處理圖像
下一篇：案例實戰(zhàn)：美化表格
