- Java Web開發實例大全（基礎卷） (軟件工程師開發大系)
- 軟件開發技術聯盟
- 3743字
- 2021-03-26 13:01:20
3.2 表格樣式
在設計網站時，對表格的應用非常頻繁。可以使用表格布局整個網頁，也可以在網頁中顯示列表信息等。在使用表格時，可以使用CSS樣式對表格的樣式進行設置。下面將介紹幾個典型的通過CSS樣式來設置表格的例子。
實例060 只有外邊框的表格
光盤位置：光盤\MR\03\060
初級
實用指數：
實例說明
在瀏覽網頁時，經常會看到網頁中的表格只有外邊框，而表格內容沒有邊框。本實例將通過CSS樣式來實現表格只有外邊框的樣式，實例運行效果如圖3.9所示，整個網頁是用表格制作的，而且只顯示表格的外邊框。
圖3.9 只有外邊框的表格
關鍵技術
實現本實例主要是應用CSS樣式的邊框復合屬性border,border表示表格的邊框屬性。該屬性在實例052中已經介紹，此處不再具體講解。
設計過程
（1）新建index.htm網頁，在頁面的<style>標簽中編寫CSS樣式，具體代碼如下：
<style type="text/css">
.tableBorder{
border:1px solid #407D2A ;
}
</style>
（2）在頁面的表格<table>標簽中，應用以上定義的CSS樣式，具體代碼如下：
<body>
<table class="tableBorder"align="center">
<tr>
<td>用戶名：</td>
<td><input type="text"name="name"/></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password"name="pwd"/></td>
</tr>
<tr>
<td>確認密碼：</td><td><input type="password"name="pwd1"/></td>
</tr>
<tr>
<td>年齡：</td><td><input type="text"name="age"/></td>
</tr>
<tr>
<td>性別：</td>
<td><input type="radio"name="sex"value="m"/>男<input type="radio"name="sex"value="f"/>女</td>
</tr>
<tr><td><input type="submit" value="注冊"/></td><td><input type="reset" value="重置"/></td></tr>
</table>
</body>
秘笈心法
除了應用邊框復合屬性border以外，還可以應用border-width屬性、border-color屬性以及border-style屬性來設置表格的邊框樣式。
實例061 彩色外邊框的表格
光盤位置：光盤\MR\03\061
初級
實用指數：
實例說明
在制作網站時，為了使網站中顯示數據的表格更加醒目，可以將表格四周的邊框設置成不同顏色。本實例通過使用CSS樣式來設置表格的外邊框顏色，實例運行效果如圖3.10所示。
圖3.10 彩色外邊框的表格
關鍵技術
本實例主要是通過CSS的邊框顏色屬性設置表格四周的邊框為不同顏色而實現的，可以在CSS樣式中使用以下邊框的顏色屬性。
? border-left-color：左邊框顏色。
? border-right-color：右邊框顏色。
? border-top-color：上邊框顏色。
? border-bottom-color：下邊框顏色。
設計過程
（1）新建index.htm網頁，在頁面的<style>標簽中編寫表格邊框的CSS樣式，具體代碼如下：
<style type="text/css"> .table1{ border-bottom-color:#00FFFF; border-left-color:#FFFF00; border-top-color:#FF0000; border-right-color:#00FF00; border-style:double; } </style>
（2）在頁面的表格<table>標簽中，應用以上定義的CSS樣式，關鍵代碼如下：
<table width="643" border="0"align="center"cellpadding="0"cellspacing="0"class="table1">
秘笈心法
在設置表格邊框顏色時，除了使用具體的RGB顏色值以外，還可以使用英文來表示某個顏色值。如紅色為red，黃色為yellow，綠色為green，橘紅為orangered等。
實例062 單元格的邊框變色
光盤位置：光盤\MR\03\062
初級
實用指數：
實例說明
在設計制作網站時，為了達到預期效果，有時會在表格中加入一些特效。運行本實例，如圖3.11所示，當鼠標經過某個單元格時，此單元格邊框變色；鼠標移出單元格時，邊框顏色恢復初始狀態。
圖3.11 單元格的邊框變色
關鍵技術
實現本實例，需要編寫兩個鼠標事件的方法，分別是onMouseOver（鼠標經過事件）的方法和onMouseOut（鼠標移出事件）的方法。在方法中，通過鼠標事件獲得某個單元格對象，然后通過改變其style屬性來實現改變邊框顏色。如某個單元格的id屬性值為td1，修改它的左邊框顏色的代碼如下：
document.getElementById("td1").style.borderLeftColor="0000FF";
設計過程
（1）新建index.htm網頁，在頁面的<script>標簽中編寫鼠標經過事件的方法，關鍵代碼如下：
function over(id){
document.getElementById(id).style.borderLeftColor="green";
document.getElementById(id).style.borderRightColor="green";
document.getElementById(id).style.borderTopColor="green";
document.getElementById(id).style.borderBottomColor="green";
}
（2）編寫鼠標移出事件的方法，關鍵代碼如下：
function out(id){
document.getElementById(id).style.borderLeftColor="pink";
document.getElementById(id).style.borderRightColor="pink";
document.getElementById(id).style.borderTopColor="pink";
document.getElementById(id).style.borderBottomColor="pink";
}
（3）在頁面的<td>元素中調用以上兩個方法，關鍵代碼如下：
<td width="60"id="Ttd0"onmouseover="over('Ttd0')"onmouseout="out('Ttd0')"> </td>
秘笈心法
根據本實例，可以實現表格的行變色。主要是在表格的<tr>標簽中使用onMouseOver事件以及onMouseOut事件來調用JavaScript方法，然后在該方法中通過表格的id屬性獲得表格的行對象，最后控制行對象的屬性即可。
實例063 表格外邊框具有霓虹燈效果
光盤位置：光盤\MR\03\063
初級
實用指數：
實例說明
有些網站為了更多地吸引瀏覽者注意，會在網站中加入具有霓虹燈特效的表格。本實例將通過調用JavaScript方法來實現表格外邊框的霓虹燈效果。本實例的運行效果如圖3.12所示，表格的外邊框會定時變色，從而達到霓虹燈的效果。
圖3.12 表格的外邊框具有霓虹燈效果
關鍵技術
要實現不斷地改變表格邊框顏色，可以通過JavaScript中提供的setTimeout()方法，該方法會按照指定的參數時間來調用自定義的JavaScript方法，該方法的語法格式如下：
setTimeout(funtion, milliseconds)
參數說明
? function：要調用的自定義函數名稱。
? milliseconds：設置超時時間，以毫秒為單位。
設計過程
（1）新建index.htm網頁，在頁面中添加一個表格，關鍵代碼如下：
<table id="table1"border=5> <tr> <td align=center><strong>明日科技</strong></td> </tr> <tr> <td align=center><pre>霓虹燈效果</pre></td> </tr> </table>
（2）編寫JavaScript方法，實現表格邊框變色，關鍵代碼如下：
<script language="javascript"> var i=0; var Color= new Array("#0000FF", "#99FF00", "#660033", "#CC66CC", "#FFFF33"); //定義顏色值的數組 function change(){ if(i>Color.length-1)i=0; //如果i的值大于數組的元素數，則將i的值改為0 table1.style.borderColor=Color[i]; //改變表格邊框顏色 i+=1; setTimeout("change()",500); //每隔500毫秒調用一次該方法 } </script>
（3）在頁面加載時，調用該方法實現變色，主要設置頁面的onload事件，關鍵代碼如下：
<body onload="change()">
秘笈心法
由于在頁面初始化時會自動執行<body>標簽中的內容，因此可以將<script>標簽的內容直接寫到<body>標簽體內，這樣也可以實現本實例的效果。
實例064 控制表格指定外邊框不顯示
光盤位置：光盤\MR\03\064
初級
實用指數：
實例說明
本實例將介紹如何應用CSS樣式實現表格外邊框不顯示。運行本實例，在頁面中將看到兩個表格，其中一個表格顯示外邊框，而另一個表格不顯示外邊框，實例運行效果如圖3.13所示。
圖3.13 控制表格指定外邊框不顯示
關鍵技術
本實例主要應用CSS樣式的邊框屬性中的border-width來實現，border-width表示邊框的粗細，單位為像素，當此屬性值為0時，表示不顯示邊框。
設計過程
（1）新建index.htm網頁，在該網頁的<style>標簽中編寫帶有外邊框表格的CSS樣式，關鍵代碼如下：
.table1{
border-left-style:solid;
border-bottom-style:solid;
border-right-style:solid;
border-top-style:solid;
border-width:2px;
border-color:green;
}
（2）編寫不帶邊框的表格樣式，并設置表格的背景顏色，關鍵代碼如下：
.table2{
border-width:0px;
background-color:pink;
}
（3）在頁面中添加兩個表格，分別使用不同的CSS樣式，關鍵代碼如下：
<body>
<table id="tb1"class="table1">
<tr height="30">
<td>員工編號</td><td>員工姓名</td><td>員工性別</td><td>員工年齡</td>
</tr>
<tr>
<td >001</td><td >張三</td><td >男</td><td >35</td>
</tr>
<tr>
<td>002</td><td>李四</td><td>男</td><td>28</td>
</tr>
<tr>
<td>003</td><td>王二</td><td>男</td><td>27</td>
</tr>
</table>
<table id="tb2"class="table2">
<tr height="30">
<td>員工編號</td><td>員工姓名</td><td>員工性別</td><td>員工年齡</td>
</tr>
<tr>
<td >001</td><td >張三</td><td >男</td><td >35</td>
</tr>
<tr>
<td>002</td><td>李四</td><td>男</td><td>28</td>
</tr>
<tr>
<td>003</td><td>王二</td><td>男</td><td>27</td>
</tr>
</table>
</body>
秘笈心法
CSS樣式中的邊框屬性不是表格所特有的，在HTML元素中有些元素也具有邊框屬性，如圖片<img>、文本框<input>、文本域<textarea>等。因此在設計網頁時，可以通過邊框屬性來靈活應用在不同的HTML元素中。
實例065 背景顏色漸變的表格
光盤位置：光盤\MR\03\065
初級
實用指數：
實例說明
在制作網站時，網站中加入的表格可以制作成漸變的效果。本實例將通過CSS樣式來設置表格的漸變效果，運行效果如圖3.14所示。
圖3.14 背景顏色漸變的表格
關鍵技術
本實例主要應用CSS樣式的progid濾鏡實現，其語法如下：
filter:progid:dximageTramsform.Microsoft.Gradient(enabled=bEnabled, startColorStr=colorStr, endColorStr=colorStr, )
參數說明
? enabled：設置或檢索濾鏡是否激活。默認值為true，為false時表示禁止濾鏡。
? startColorStr：設置或檢索色彩漸變的開始顏色和透明度，默認值為#000000FF（不透明的藍色）。
? endColorStr：設置或檢索色彩漸變的結束顏色和透明度，默認值為#000000FF（不透明的黑色）。
設計過程
（1）新建index.htm網頁，在該網頁中添加一個表格，關鍵代碼如下：
<table border="1"> <tr height="30"> <td>商品編號</td><td>商品名稱</td><td>商品類別</td><td>商品價格</td> </tr> <tr> <td >001</td><td >純牛奶</td><td >乳制品</td><td >2.50元</td> </tr> <tr> <td>002</td><td>甜橙</td><td>水果</td><td>2.80元</td> </tr> <tr> <td>003</td><td>冰紅茶</td><td>飲料</td><td>2.50元</td> </tr> </table>
（2）在頁面的<style>標簽中編寫CSS樣式，使表格背景漸變，關鍵代碼如下：
<style type="text/css"> table{ font-size:12px; border-width:2px; filter:progid:dximageTransform.Microsoft.Gradient(fradientType=1, startColorStr=#46BEFF, endColorStr=#FFFFFF); } td{ border-width:0px; } </style>
秘笈心法
為了提高開發效率，可以將progid濾鏡的樣式代碼保存到．css樣式文件中，在不同網頁中應用此樣式時直接通過<link>標簽引用CSS文件即可，并不需要死記硬背這些濾鏡屬性。
實例066 表格隔行變色
光盤位置：光盤\MR\03\066
初級
實用指數：
實例說明
在很多網站中，表格的隔行變色的效果應用得非常多。本實例將通過CSS樣式來控制表格的隔行變色，運行效果如圖3.15所示。
圖3.15 隔行變色的表格
關鍵技術
本實例主要通過在CSS樣式中使用JavaScript中的split()方法來改變表格的背景顏色backgound-color屬性值。split()方法的語法如下：
stringObj.split(str)[Index]
參數說明
? stringObj：要被分解的String對象或文字。
? str：用來定義以什么字符分解。
? Index：表示下一個匹配從該索引處開始。
功能：split()方法通過字符str將strObj字符串分隔成一個字符串數組。
在實現隔行變色的樣式時，還需要使用expression將CSS屬性和JavaScript關聯起來，而且需要在split()方法的index索引中使用表格的行索引對象rowIndex。
設計過程
（1）新建index.htm網頁，在該網頁中的<style>標簽中編寫隔行變色的CSS樣式，關鍵代碼如下：
<style type="text/css"> .changeTr tr{ font-size:12px; border-width:0px; background-color: expression("#DEF1FE, #FFFFFF".split(", ")[rowIndex%2]); } td{ border-width:0px; } </style>
（2）在頁面中添加表格，并將表格的class屬性值設置為CSS樣式名changeColor，關鍵代碼如下：
<table border="0"class="changeTr">
秘笈心法
JavaScript中的split()方法在實際開發中經常使用，如從一個日期格式的字符串（yyyy-mm-dd）中獲取年、月、日的值時，就需要使用到該方法來實現。
實例067 表格隔列變色
光盤位置：光盤\MR\03\067
初級
實用指數：
實例說明
在訪問網站時，有些顯示數據的表格樣式會有隔列變色的效果。本實例將通過CSS樣式來設置此變色效果，運行效果如圖3.16所示。
圖3.16 隔列變色的表格
關鍵技術
通過CSS設置表格的隔列變色與隔行變色類似，同樣需要使用JavaScript的split()函數。與表格隔行變色的實現不同的是，隔列變色需要在CSS樣式中使用表格的單元格索引對象cellIndex，然后通過split()方法，實現每隔一個單元格，就將單元格背景顏色改變。
設計過程
（1）新建index.htm網頁，在該網頁中的<style>標簽中編寫隔列變色的CSS樣式，關鍵代碼如下：
<style type="text/css"> .changeTd td{ font-size:12px; border-width:0px; background-color: expression("#DEF1FE, orange".split(", ")[cellIndex%2]); } td{ border-width:0px; } </style>
（2）在網頁中添加表格，并設置表格的class屬性值為CSS樣式名changeTd，關鍵代碼如下：
<table border="0"class="changeTd">
秘笈心法
在實際應用中，經常需要在JavaScript中應用表格對象的屬性來動態制作表格，如表格行索引rowIndex和單元格索引cellIndex。JavaScript中的表格對象具有很多屬性和方法，這些屬性和方法會在后面的章節中進行詳細講解。
實例068 鼠標經過表格時，顯示提示信息
光盤位置：光盤\MR\03\068
初級
實用指數：
實例說明
在瀏覽網站信息時，當鼠標經過表格的某個單元格時，會顯示出相關的提示信息。運行本實例，當鼠標經過表格中的某個“圖書名稱”時，將顯示提示信息，運行效果如圖3.17所示。
圖3.17 顯示提示信息的表格
關鍵技術
實現本實例非常簡單，主要通過設置表格<td>中的title屬性來實現，title屬性不是表格特有的屬性，HTML中的絕大多數標簽都具有該屬性。
設計過程
新建index.htm網頁，在該網頁中添加一個表格，并在“圖書名稱”的單元格中設置title屬性，關鍵代碼如下：
<table border="0"class="changeTd"> <tr height="30"> <td align="center">圖書編號</td><td align="center">圖書名稱</td> <td align="center">作者</td><td align="center">圖書價格</td> </tr> <tr> <td >001</td> <td title="單擊了解本書的詳細信息"> <a href="#">《JavaWeb范例大全》</a> </td> <td >明日科技</td><td >98.00元</td> </tr> <tr> <td>002</td> <td title="單擊了解本書的詳細信息"> <a href="#">《Struts2深入詳解》</a> </td> <td>孫鑫</td><td>79.00元</td> </tr> <tr> <td>003</td><td>《Tomcat與JavaWeb技術詳解》</td><td>孫衛琴</td><td>79.50元</td> </tr> <tr> <td>004</td><td>《Java編程思想》第4版</td><td>Bruce Eckel</td><td>108.00元</td> </tr> </table>
秘笈心法
根據本實例的實現，讀者可以設置當鼠標經過圖片時，顯示圖片的詳細信息。在網頁中添加圖片使用的是<img>標簽，只要設置相應<img>標簽的title屬性即可。
- 玩轉Scratch少兒趣味編程
- Getting Started with React
- Java異步編程實戰
- C語言程序設計學習指導與習題解答
- Getting Started with NativeScript
- 多模態數據分析：AGI時代的數據分析方法與實踐
- Moodle 3 Administration（Third Edition）
- Tableau Desktop可視化高級應用
- Application Development with Parse using iOS SDK
- Data Manipulation with R（Second Edition）
- Mastering ArcGIS Server Development with JavaScript
- Blender 3D Cookbook
- JSP應用與開發技術（第3版）
- Java程序設計（項目教學版）
- 情境微課開發（第2版）