在網(wǎng)頁(yè)設(shè)計(jì)中定義表格樣式

  • 2019-10-25 10:59:44
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

網(wǎng)頁(yè)設(shè)計(jì)中使用CSS可以實(shí)現(xiàn)對(duì)表格的樣式控制,其中表格樣式包括邊框?qū)挾?、邊框顏色、邊框樣式以及表格背景等效果,以及如何?a href="http://m.supportcoffeeroasters.com" target="_self" title="昆明網(wǎng)站制作">網(wǎng)頁(yè)設(shè)計(jì)時(shí)使用CSS控制表格特性等。

設(shè)置表格顏色

CSS使用color屬性設(shè)置表格中文字的顏色,通過background-color屬性來設(shè)置表格的背景顏色。

【示例】啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁(yè),保存為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>&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>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式,用來定義網(wǎng)頁(yè)字體的類型。

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è)置。

設(shè)置表格邊框

網(wǎng)站建設(shè)中,設(shè)置表格邊框同樣是通過border屬性,設(shè)置方法與設(shè)置圖片邊框完全一樣,只不過要特別注意單元格邊框的設(shè)置。

【示例】啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁(yè),保存為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)頁(yè)基本樣式*/    

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)的一種效果。

當(dāng)前文章標(biāo)題:在網(wǎng)頁(yè)設(shè)計(jì)中定義表格樣式

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3116.html

上一篇:藝術(shù)化處理圖像

下一篇:案例實(shí)戰(zhàn):美化表格

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))