JSP通用范例开发金典
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

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) 表格尺寸设置

(c) 表元间隙设置

(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>
上一章目录下一章