一、表格的基本结构

img标签是图片标签,用来显示图片
src属性可以设置图片的路径
width属性设置图片宽度
height属性设置图片高度
border属性设置图片边框大小
alt属性设置当指定路径找不到图片时,用来代替显示的文本内容

在web中路径分为相对路径和绝对路径两种:
   相对路径:
    .      表示当前文件所在的目录
    ..     表示当前文件所在的上一级目录
    文件名        表示当前文件所在目录的文件,相当于 ./文件名   可以省略

  绝对路径:
    http://ip:port/工程名/资源路径

例:

<img src="../img/gun.jpg" width="200" height="200" border="1" />
 <img src="../img/robot.jpg" width="200" height="200" border="1"/>
 <img src="../img/ak.jpg" width="200" height="200" border="1"/>=

表格语法:

table 表格;tr 行标签;th 表头标签(就多一个加粗,一般第一行使用);td 单元格标签。

<table 【border="1" width="500" height="200" align="center" cellspacing="0"】>  <!--生成了一个3*3表格-->
    <tr>
        <th 【colspan="2"】 > 表头内容 </th> <!--colspan 从此单元格起,行方向向右合并单元格,共占2个单元格宽度-->
    删除<th 【align="center"】>内容</th><!--前面设置colspan属性后,此单元格会被吞并,需要删除此行,否则表格会溢出-->
        <th>内容</th>
       
    </tr>
    <tr>
        <td 【rowspan="2"】>内容</td><!--rowspan 从此单元格起,列方向向下合并单元格,共占2个单元格宽度-->
        <td 【colspan="2" rowspan="2"】>内容</td><!--从此单元格起,行方向向右合并2个单元格,列方向向下合并2个单元格,共占4个单元格宽度-->
    删除 <td>内容</td><!--第二行第二列设置同时设置colspan和rowspan属性后,此单元格会被吞并,需要删除此行,否则表格会溢出-->
    </tr>
    <tr> 
   删除 <td rowspan="2">好啊</td> <!--第二行设置rowspan属性后,此单元格会被吞并,需要删除此行,否则表格会溢出-->
   删除 <td>1.1</td> <!--第二行第二列设置同时设置colspan和rowspan属性后,此单元格会被吞并,需要删除此行,否则表格会溢出-->
   删除 <td>1.1</td> <td>哈哈哈</td> 
</table>

属性说明:

(1)table标签属性

border属性:设置表格边框,单位像素     表格默认无边框

width、height属性:设置表格的长和宽 单位像素

align属性:设置表格文本对齐(和word一样),center是居中

cellspacing属性:单元格间距,单位像素,通常设置为没有间距 

java 网页编辑excel javaweb表格制作_html

(2)td标签属性

align属性:设置单元格文本对齐(和word一样),center是居中

colspan属性(行方向 合并单元格): 从此单元格起,行方向向右合并单元格,合并多少个单元格,值就取多少。

rowspan属性(列方向 合并单元格): 从此单元格起,列方向向下合并单元格,合并多少个单元格,值就取多少。

java 网页编辑excel javaweb表格制作_html_02

二、合并表格

    2.1、用 colspan 属性左右合并单元格

java 网页编辑excel javaweb表格制作_html_03


    2.2、用 rowspan 属性上下合并单元格

java 网页编辑excel javaweb表格制作_属性设置_04

三、用 align 属性设置对齐方式

java 网页编辑excel javaweb表格制作_ci_05

四、用 bgcolor 属性设置表格背景色和边框颜色

java 网页编辑excel javaweb表格制作_ci_06

五、用 cellpadding 属性和 cellspacing 属性设定边距

    5.1、cellspadding 属性设定表格单元格中的内容距离格线的距离

    5.2、cellspacing 属性设定表格相邻单元格边线之间的距离。

java 网页编辑excel javaweb表格制作_属性设置_07