Web服务应用开发（基于J2EE）表格学习

综合实例

代码：



代码：

表格概述

表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上，让我们可以设计出漂亮的页面。

标记	说明	标记	说明
< table></ table>	表格标记	< caption></ caption>	表格标题标记
< th></ th>	表格表头标记	< tr></ tr>	表格的行标记
< td></ td>	表格的列标记	< thead></ thead>	定义表格的表头
< tbody></ tbody>	定义表格的主体	< tfoot></ tfoot>	定义表格的页脚

表格标记

语法

在HTML中，使用< table></ table>标记可以创建表格。

< table> 
   < caption>插入表格标题</ caption>
   < tr>
       < th></ th> >< th></ th> >< th></ th> …
   </ tr>
   < tr> 
       < td ></ td> < td ></ td> < td ></ td> …
   </ tr> 
</ table>

语法说明:< table></ table>标记表示插入表格；< tr></ tr>表示插入一行；< td></ td>表示插入一列；< th></ th>插入表头。
例：

表格属性设置

表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。
1.表格的边框属性–border
2.边框的颜色–bordercolor
3.亮边框的颜色–bordercolorlight
4.暗边框的颜色– bordercolordark
5.背景颜色—bgcolor
6.背景图像—background
7.表格宽度与高度—width/height
8.表格对齐属性-align
利用表格属性实现表格边框线的设置以及美化表格的目的。
基本语法：
< table border""  bordercolor=""  bordercolorlight""  align=“center”  bordercolordark="" > </ table >

表格边框属性

例：

表格边框样式属性

语法：

   <table  frame=” ” rules=” ”> </ table >    //(frame: 设置表格边框样式； rules: 设置表格内部边框样式)

例：

表格单元格间距、单元格边距属性

例：

表格水平对齐

例：

设置表格行属性

表格行tr标记的属性用于设置表格某一行的样式，其属性设置如下表所示。

属性值	说明	属性值	说明
align	行内容水平对齐	valign	行内容垂直对齐
bgcolor	行的背景颜色	bordercolor	行的边框颜色
bordercolorlight	行的亮边框颜色	bordercolordark	行的暗边框颜色

表格行内容水平对齐属性

< tr align="left | center | right"> </ tr>

表格行内容垂直对齐属性

< tr valign="top | middle | bottom"></ tr>

例：

设置单元格属性

表格列标记td的属性可以设置表格单元格的显示风格。常用的属性如下表所示。单元格的颜色、边框和对齐属性与行tr标记一样。

属性值	说明	属性值	说明
align	单元格内容水平对齐	valign	单元格内容垂直对齐
bgcolor	单元格的背景颜色	bordercolor	单元格的边框颜色
bordercolorlight	单元格的亮边框颜色	bordercolordark	单元格的暗边框颜色
rowspan	单元格跨行	colspan	单元格跨列
width	单元格宽度	height	单元格高度
bgcolor	单元格的背景颜色

单元格跨行、列

< td>的属性用于设定表格中某一单元格的属性。
单元格跨行rowspan(跨行合并-纵向合并)
单元格跨列colspan(跨列合并-横向合并)
基本语法：

< td rowspan=“3”>…</ td>      < td colspan=“3”>…</ td>

例：

表格嵌套

表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。
表格嵌套语法：

例：