在網頁設計中定義表格樣式

  • 2019-10-25 10:59:44
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來源:http://www.258852.net

網頁設計中使用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>&nbsp;</td>        

<td>&nbsp;</td>        

<td>&nbsp;</td>        

<td>&nbsp;</td>        

<td>&nbsp;</td>    

</tr>    

<tr>        

<td>&nbsp;</td>        

<td>&nbsp;</td>        

<td>&nbsp;</td>        

<td>&nbsp;</td>        

<td>&nbsp;</td>    

</tr> <tr>        

<td>&nbsp;</td>        

<td>&nbsp;</td>        

<td>&nbsp;</td>        

<td>&nbsp;</td>        

<td>&nbsp;</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.258852.net/news/wzzz/3116.html

上一篇:藝術化處理圖像

下一篇:案例實戰:美化表格

網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
a级国产乱理论片在线观看_久久久久久黃色網站免費_日韩 欧美 一区 不卡_国产成人av综合网