<s id="z8ggw"><dfn id="z8ggw"></dfn></s> <s id="z8ggw"></s> <dfn id="z8ggw"></dfn> 在網頁設計中使用CSS可以實現對表格的樣式控制，其中表格樣式包括邊框寬度、邊框顏色、邊框樣式以及表格背景等效果，以及如何在網頁設計時使用CSS控制表格特性等。
設置表格顏色
CSS使用color屬性設置表格中文字的顏色，通過background-color屬性來設置表格的背景顏色。
【示例】啟動Dreamweaver，新建一個網頁，保存為test.html，在<body>標簽內輸入如下代碼：
<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>標簽內添加<style type="text/css">標簽，定義一個內部樣式表，然后輸入下面樣式，用來定義網頁字體的類型。
table{ /*設置表格的CSS樣式*/
background-color:#00CCFF; /*表格的背景顏色*/
color:#FF0000; /*表格的字體顏色*/}
上面代碼中，用<table>標簽創建了一個表格，設置表格的寬度為300，表格的邊框寬度為1，這里沒有給出單位，默認為px。使用<tr>和<td>標簽創建了4行5列的表格?？梢钥吹?，表格的背景顏色和字體顏色通過CSS進行了設置。
在網站建設中，設置表格邊框同樣是通過border屬性，設置方法與設置圖片邊框完全一樣，只不過要特別注意單元格邊框的設置。
【示例】啟動Dreamweaver，新建一個網頁，保存為test.html，在<body>標簽內輸入如下內容：
<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">招生總數</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>標簽定義了表格的標題，該標簽可以出現在<table>與</table>之間的任意位置，不過通常習慣放在表格的第1行，緊接著<table>標簽。<th>標簽在表格中主要用于定義行或列的名稱，在本例中，行的名稱為“2012”“2013”等，列的名稱為“招生總數”“男生”“女生”，在<th>標簽中的scope屬性就是用來區分行名稱和列名稱的，分別設置scope的值為row或col，分別代表行名稱或列名稱。
在<head>標簽內添加<style type="text/css">標簽，定義一個內部樣式表，然后輸入下面樣式：
body { /*網頁基本樣式*/
margin: 0px;
padding: 4px;}table {
color: #0046a6; /*表格文字顏色*/
font-family: Arial; /*表格字體*/
border: #006666 solid 1px; /*表格邊框*/}table caption {
font-size: 18px; /*標題文字大小*/
font-weight: bold; /*標題文字粗體*/}
在以上代碼中，設置了表格邊框，顯示效果如圖6.48所示。從圖6.48中可以看到，雖給表格設置了邊框，但是單元格并沒有任何邊線，所以，在設置表格邊框時，還要注意給單元格也單獨地設置相應的邊框，在以上CSS樣式表中，添加下列樣式代碼：
table th, table td { color: #003e7e; /*行、列名稱顏色*/
border: #006666 solid 1px; /*單元格邊框*/}
讀者會發現，如上所述設置完成后，單元格的邊框之間會有空隙，這時需要設置CSS中整個表格的border-collapse屬性，使得邊框重合到一起，具體代碼如下：
table { color: #0046a6; /*表格文字顏色*/
font-family: Arial; /*表格字體*/
border: #006666 solid 1px; /*表格邊框*/
border-collapse: collapse; /*邊框重疊*/}
由于表格邊框默認是立體效果，在瀏覽時會顯得很粗，即使設置邊框為1像素也是這樣。利用HTML屬性也可以設計細線表格，具體方法如下。
【操作步驟】
第1步，新建文檔，保存為test1.html，復制test.html文檔中的表格結構。設置表格【間距】為1，【邊框】為0，同時設置表格的背景顏色。上面3個屬性是關鍵點，其他屬性可以任意設置。HTML標簽設置屬性如下：
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF00FF">
第2步，用鼠標拖選全部單元格，并在【屬性】面板中設置背景色為白色。
第3步，保存文檔，并在瀏覽器中瀏覽。
細線表格技巧原理就是利用表格背景顏色包含表格間距區域，并利用“遮罩”技法間接實現的一種效果。
當前文章標題：在網頁設計中定義表格樣式
當前URL：http://www.bibiworld.net/news/wzzz/3116.html
上一篇：藝術化處理圖像
下一篇：案例實戰：美化表格
