【建設(shè)網(wǎng)站】
表格應(yīng)用綜合實(shí)例
【案例4-5l制作職工工資一覽表的頁(yè)面。
【案例展示】本例文件4-5.html在瀏覽器中顯示的效果如圖4-9所示。
圖4-9職工工資一覽表
【學(xué)習(xí)目標(biāo)】掌握使用表格顯示數(shù)據(jù)的基本操作。
【知識(shí)要點(diǎn)】通過設(shè)置表格和單元格的屬性，將文本和圖像按行、列排列。
代碼如下：
<! doctype html>
<html>
<head><title>職工工資一覽表</title></head>
<body>
<table border="3" width="640" height="120" bgcolor="ivory" bordercolor="red" align="center">
<caption align="left">設(shè)置表格邊框、尺寸以及背景和邊框色彩的工資一覽表</caption>
<tr><th>I號(hào)</th><th>姓名</th><th>應(yīng)發(fā)工資</td><th>扣款</th><th>實(shí)發(fā)工資</th>
<tr><td>1001</td><td>張三豐</td><td>1992 </td><td>92</td><td>1900</td>
<tr><td>1002</td><td>王天寶</td><td>2088 </td><td>8 8</td><td>2000</td>
</table><br/>
<table border="l" cellspacing="8" cellpadding="10">
<caption align="center">設(shè)置表格表項(xiàng)間隙和表項(xiàng)內(nèi)部空白的工資一覽表</caption>
·56·
<tr><th>工號(hào)</th><th>姓名</th><th>應(yīng)發(fā)工資</td><th>扣款</th><th>實(shí)發(fā)工資</th>
<tr><td>1001</td><td>張三豐</td><td>1 992 </td><td>92</td><td>1 900</td>
<tr><td>1002</td><td>王天寶</td><td>2088 </td><td>88 </td><td>2000 </td>
</table><br/>
<table border'''3" width="60%" height="200">
<caption align="right">設(shè)置表格內(nèi)文字水平對(duì)齊和垂直對(duì)齊的工資一覽表</caption>
<tr><th>工號(hào)</th><th>姓名</th><th>應(yīng)發(fā)工資</td><th>扣款</th><th>實(shí)發(fā)工資</th>
<tr><td align=”left'’>1001<／td><td align=”center”>張三豐<／td><td align=”right”>1992<／td> <td
align="justify”>92</td><td>1900<／td>
<tr><td valign=”top”>1002<／td><td valign=”middle”>王天寶<／td><td valign=”bottom”>2088
</td><td valign=”baseline”>88<／td><td>2000<／td>
<／table>
<／body>
</html>
【案例說明】在設(shè)計(jì)頁(yè)面時(shí)，常需要利用表格來定位頁(yè)面元素。使用表格可以導(dǎo)入表格化數(shù)據(jù)，設(shè)計(jì)頁(yè)面分欄，定位頁(yè)面上的文本和圖像等。最初創(chuàng)建表格是為了顯示表格數(shù)據(jù)，而不是用于對(duì)Web頁(yè)進(jìn)行布局。為了簡(jiǎn)化使用表格進(jìn)行頁(yè)面布局的過程，Dreamweaver中提供了“布局”模式，在后面的章節(jié)中將詳細(xì)講解。
