捕鱼机有什么新款

書名： JSP通用范例開發金典
作者名：趙麗王樹森編著
本章字數： 2676字
更新時間： 2018-12-29 19:17:13

1.5 表格

范例1-14 建立一個表格

實例位置：光盤\ch01\1-14

范例說明 About the Example

本范例介紹在網頁中如何建立表格。程序運行效果如圖1-14所示。

圖1-14 建立表格的運行效果圖

語法說明 About the Expression

1.<table></table>標記——定義表格

<table>和</table>標記分別表示著一個表格的開始與結束。

2.<tr></tr>標記——定義表行

<tr></tr>表示著表格中一行的開始與結束，在表格中有幾對<tr></tr>標記就有幾行。

3.<td></td>標記——定義表元（表格的具體數據）

<td></td>表示著表格中一列的開始與結束，在表格中有幾對<td></td>標記就有幾列。

4.<th></th>標記——定義表頭，表頭的字是用粗體顯示的

表頭是一種特殊的單元格，一般位于第一行和第一列，用來定義內容的分類。

5.<caption></caption>——設置表格標題

表格標題是一種特殊的單元格，一般位于整個表格的第一行，為表格標示一個標題行。

關鍵步驟 Key Steps

1.打開Eclipse。

2.在ch01工程中的Webcontent目錄下新建一個EX014目錄，然后在此目錄下新建一個HTML頁面，命名其文件名為EX1-14.html，輸入代碼。

3.打開瀏覽器，輸入 http://127.0.0.1:8080/ch01/EX014/EX1-14.html，即可顯示如圖1-14所示的內容。

程序代碼 Codes

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<table>
<caption>通信錄</caption>
<tr>
    <th>&nbsp;</th>
    <th>姓名</th>
    <th>地址</th>
    <th>電話</th>
</tr>
<tr>
    <th>記錄一</th>
    <td>Bill</td>
    <td>北京</td>
    <td>123456</td>
</tr>
<tr>
    <th>記錄二</th>
    <td>Mike</td>
    <td>天津</td>
    <td>893451</td>
  </tr>
</table>
</body>
</html>

范例1-15 跨行、列的表元設計

實例位置：光盤\ch01\1-15

范例說明 About the Example

本范例介紹在網頁中如何建立跨行、列的表元設計表格。程序運行效果如圖1-15所示。

圖1-15 跨行、列表元的表格運行效果圖

語法說明 About the Expression

<th></th>標記——定義表頭，表頭的字是用粗體顯示的。

表頭是一種特殊的單元格，一般位于第一行和第一列，用來定義內容的分類。

● colspan屬性——跨多列的表元。

語法形式：<th colspan = #>

● rowspan——跨多行的表元。

語法形式：<th rowspan = #>

# = 數字（單位為像素）。

關鍵步驟 Key Steps

1.打開Eclipse。

2.在ch01工程中的Webcontent目錄下新建一個EX015目錄，然后在此目錄下新建一個HTML頁面，命名其文件名為EX1-15.html，輸入代碼。

3.打開瀏覽器，輸入 http://127.0.0.1:8080/ch01/EX015/EX1-15.html，即可顯示如圖1-15所示的內容。

程序代碼 Codes

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<table border>
  <tr>
  <th colspan=3>跨3列</th>
  </tr>
  <tr>
  <th>JSP</th>
  <th>JAVA</th>
  <th>HTML</th>
  </tr>
  <tr>
  <td>A</td>
  <td>B</td>
  <td>C</td>
  </tr>
</table>
<br>
<table border>
  <tr>
  <th rowspan=3>跨3行</th>
    <th>JSP</th>
    <td>A</td>
  </tr>
  <tr>
  <th>JAVA</th>
  <td>B</td>
  </tr>
  <tr>
  <th>HTML</th>
  <td>C</td>
  </tr>
</table>
</body>
</html>

范例1-16 表格尺寸設置

實例位置：光盤\ch01\1-16

范例說明 About the Example

本范例介紹在網頁中對表格屬性的設置來調整尺寸。程序運行效果如圖1-16所示。

圖1-16 表格尺寸的運行效果圖

(a) 邊框尺寸設置

(b) 表格尺寸設置

(d) 表元內部空白設置。

語法說明 About the Expression

<table></table>標記——定義表格。

● border屬性——設置邊框尺寸。

語法形式：<table border = #>

在默認情況下，如果不設置表格的邊界，表格是不會顯示邊界的。

● # = 數字（單位為像素）。

● width和height屬性——設置表格尺寸。

語法形式：<table border width = 1# height = 1#>

● cellspacing屬性——設置表元間隙。

● #1 = 可用數字（絕對像素值）或百分比表示（為上一標記瀏覽器總寬度的百分比）；默認值為100%。

語法形式：<table border cellspacing = 2#>

● cellpadding屬性——設置表元內部為空白。

語法形式：<table border cellpadding = 2#>

● #2 = 數字（單位為像素）。

關鍵步驟 Key Steps

1.打開Eclipse。

2.在ch01工程中的Webcontent目錄下新建一個EX016目錄，然后在此目錄下新建一個HTML頁面，命名其文件名為EX1-16.html，輸入代碼。

3.打開瀏覽器，輸入 http://127.0.0.1:8080/ch01/EX016/EX1-16.html，即可顯示如圖1-16所示的內容。

程序代碼 Codes

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<table border=10>
<caption>邊框尺寸設置</caption>
<tr>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
</tr>
<tr>
    <td>JSP</td>
    <td>ASP</td>
    <td>PHP</td>
</tr>
</table>
<br>
<table border width=180 height=100>
<caption>表格尺寸設置</caption>
<tr>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
</tr>
<tr>
    <td>JSP</td>
    <td>ASP</td>
    <td>PHP</td>
</tr>
</table>
<br>
<table border cellspacing=10>
<caption>表元間隙設置</caption>
<tr>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
</tr>
<tr>
    <td>JSP</td>
    <td>ASP</td>
    <td>PHP</td>
</tr>
</table>
<br>
<table border cellpadding=10>
<caption>表元內部空白設置</caption>
<tr>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
</tr>
<tr>
    <td>JSP</td>
    <td>ASP</td>
    <td>PHP</td>
</tr>
</table>
</body>
</html>

范例1-17 表格及其文字的對齊與布局

實例位置：光盤\ch01\1-17

范例說明 About the Example

本范例介紹在網頁中表格內文字的對齊與布局。程序運行效果如圖1-17所示。

圖1-17 表格及其表內文字的對齊與布局運行效果圖

(a) 表格對齊方式

(b) 表格內文字的對齊與布局

語法說明 About the Expression

1.<table></table>標記對齊/布局屬性

● align屬性——表格的對齊方式。

語法形式：<table align = # >

2.<tr></tr>標記文字對齊/布局屬性

● align屬性——行文字的水平對齊方式。

語法形式：<tr align = #1>

● valign屬性——行文字的垂直對齊方式。

語法形式：<tr valign = #2>

3.<td></td>標記文字對齊/布局屬性

● align屬性——單元格文字的水平對齊方式。

語法形式：<td align = #1>

● valign屬性——單元格文字的垂直對齊方式。

語法形式：<td valign = #2>

4.<th></th>標記文字對齊/布局屬性

● align屬性——表頭文字的水平對齊方式。

語法形式：<th align = #1>

● valign屬性——表頭文字的垂直對齊方式。

語法形式：<th valign = #2>

#1 = left（左對齊）、center（居中）、right（右對齊）。

#2 = top（靠頂端對齊）、middle（居中間對齊）或bottom（靠底部對齊）。

關鍵步驟 Key Steps

1.打開Eclipse。

2.在ch01工程中的Webcontent目錄下新建一個EX017目錄，然后在此目錄下新建兩個HTML頁面，命名其文件名為EX1-17.html和EX1-17-1.html，輸入代碼。

3.打開瀏覽器，輸入 http://127.0.0.1:8080/ch01/EX017/EX1-17.html，即可顯示如圖1-17所示的內容。

程序代碼 Codes

EX1-17.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<table align="left" border>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
</tr>
<tr>
<td align=left>JSP</td>
    <td align=center>ASP</td>
    <td align=right>PHP</td>
</tr>
</table>
Hello!<br>
表格左對齊方式
<br>
<br>
<table align="right" border>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
</tr>
<tr>
<td align=left>JSP</td>
    <td align=center>ASP</td>
    <td align=right>PHP</td>
</tr>
</table>
Hello!<br>
表格右對齊方式
</body>
</html>
EX1-17-1.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<table border width=160>
<caption>表格內文字的對齊</caption>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
</tr>
<tr>
<td align=left>JSP</td>
    <td align=center>ASP</td>
    <td align=right>PHP</td>
</tr>
</table>
<br>
<table border height=100>
<caption>表格內文字的布局</caption>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
</tr>
<tr>
    <td valign=top>JSP</td>
    <td valign=middle>ASP</td>
    <td valign=bottom>PHP</td>
</tr>
</table>
</body>
</html>

范例1-18 表格色彩

實例位置：光盤\ch01\1-18

范例說明 About the Example

本范例介紹如何在網頁中設置表格色彩。程序運行效果如圖1-18所示。

圖1-18 表格色彩的運行效果圖

語法說明 About the Expression

1.表元的背景色彩和背景圖像

● bordercolor屬性——設置表格邊框顏色。

語法形式：<th bordercolor = #>

● bgcolor屬性——設置表格背景色。

語法形式：<th bgcolor = #>

● background屬性——設置表格背景圖案。

語法形式：<th background = "URL">

2.表格邊框的色彩，背景色彩與背景圖案

● bordercolor屬性——設置表格邊框顏色。

語法形式：<table bordercolor = #>

● bgcolor屬性——設置表格背景色。

語法形式：<table bgcolor = #>

● background屬性——設置表格背景圖案。

語法形式：<table background = "URL">

3.行邊框的色彩，背景色彩與背景圖案

● bordercolor屬性——設置行邊框顏色。

語法形式：<tr bordercolor = #>

● bgcolor屬性——設置行背景色。

語法形式：<tr bgcolor = #>

● background屬性——設置行背景圖案。

語法形式：<tr background = "URL">

4.單元格邊框的色彩，背景色彩與背景圖案

● bordercolor屬性——設置單元格邊框顏色。

語法形式：<td bordercolor = #>

● bgcolor屬性——設置單元格背景色。

語法形式：<td bgcolor = #>

● background屬性——設置單元格背景圖案

語法形式：<td background = "URL">

# = 顏色。

關鍵步驟 Key Steps

1.打開Eclipse。

2.在ch01工程中的Webcontent目錄下新建一個EX018目錄，然后在此目錄下新建一個HTML頁面，命名其文件名為EX1-18.html，輸入代碼。

3.打開瀏覽器，輸入 http://127.0.0.1:8080/ch01/EX018/EX1-18.html，即可顯示如圖1-18所示的內容。

程序代碼 Codes

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<table border>
<tr>
<th bgcolor=ffaa00>MON</th>
    <th bgcolor=Red>TUE</th>
</tr>
<tr bgcolor=00ffaa>
<td>JSP</td>
<td>ASP</td>
</tr>
</table>
<br>
<table border background=image/pig1.jpg width=290 height=50>
<tr>
<th>MON</th>
    <th>TUE</th>
</tr>
<tr>
<td>JSP</td>
<td>ASP</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
<br>
<table border=1 align="center" height="150" width="80%" bordercolor=yellow>
<tr>
<th width=70 bgcolor="#FFCC00">姓 名</th>
<th bgcolor="#FFCCFF">性 別</th>
<th background="image/pig1.jpg">年 齡</th>
<th background="image/pig.jpg">職 業</th>
</tr>
<tr>
<td bordercolor=red>Alis</td>
<td>女</td>
<td bgcolor="#FFFFCC">26</td>
<td bgcolor="#CCFFFF">高級程序員</td>
</tr>
<tr bgcolor="#FFFFAA" bordercolor=blue>
<td>Mike</td>
<td>男</td>
<td>27</td>
<td>系統架構師</td>
</tr>
</table>
</body>
</html>

范例1-19 表格結構

實例位置：光盤\ch01\1-19

范例說明 About the Example

本范例介紹在網頁中對表格的表頭、主體及表尾的樣式進行設置，在表格里用于整體規劃表格的屬性。程序運行效果如圖1-19所示。

圖1-19 表格結構的運行效果圖

語法說明 About the Expression

1.<thead></thead>標記——表格的題頭

● bgcolor屬性——設置表頭背景顏色。

● align屬性——設置表頭水平對齊方式。

● valign屬性——設置表頭垂直對齊。

語法形式：<thead bgcolor = #1 align = #2 valign = #3>

2.<tbody></tbody>標記——表格的正文

● bgcolor屬性——設置表頭背景顏色。

● align屬性——設置表頭水平對齊方式。

● valign屬性——設置表頭垂直對齊。

語法形式：<tbody bgcolor = #1 align = #2 valign = #3>

3.<tfoot></tfoot>標記——表格的腳注

● bgcolor屬性——設置表頭背景顏色。

● align屬性——設置表頭水平對齊方式。

● valign屬性——設置表頭垂直對齊。

語法形式：<tfoot bgcolor = #1 align = #2 valign = #3>

#1 = 顏色。

#2 = left（左對齊）、center（居中）、right（右對齊）。

#3 = top（靠頂端對齊）、middle（居中間對齊）或bottom（靠底部對齊）。

關鍵步驟 Key Steps

1.打開Eclipse。

2.在ch01工程中的Webcontent目錄下新建一個EX019目錄，然后在此目錄下新建一個HTML頁面，命名其文件名為EX1-19.html，輸入代碼。

3.打開瀏覽器，輸入 http://127.0.0.1:8080/ch01/EX019/EX1-19.html，即可顯示如圖1-19所示的內容。

程序代碼 Codes

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<table border>
<thead bgcolor=#ffffaa align=center>
    <tr>
      <th width=100>學號</th>
      <th width=100>姓名</th>
      <th width=100>性別</th>
      <th width=100>年齡</th>
      <th width=100>院系</th>
    </tr>
</thead>
<tbody bgcolor=#ccffff align=center>
    <tr>
  <td>06301</td>
  <td>李俊</td>
  <td>男</td>
  <td>24</td>
  <td>計算機系</td>
</tr>
    <tr>
  <td>06502</td>
  <td>劉晨</td>
  <td>女</td>
  <td>23</td>
  <td>外語系</td>
</tr>
</tbody>
<tfoot bgcolor=#faafaa align=right valign="middle">
<tr>
<td colspan=5>表格日期 2008年9月</td>
</tr>
</tfoot>
</table>
</body>
</html>

官术网_书友最值得收藏!

JSP通用范例開發金典

1.5 表格

范例1-14 建立一個表格

范例1-15 跨行、列的表元設計

范例1-16 表格尺寸設置

范例1-17 表格及其文字的對齊與布局

范例1-18 表格色彩

范例1-19 表格結構