javaweb基础之html表格

一、表格的基本结构

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属性：单元格间距，单位像素，通常设置为没有间距 

（2）td标签属性

align属性：设置单元格文本对齐（和word一样），center是居中

colspan属性（行方向 合并单元格）： 从此单元格起，行方向向右合并单元格，合并多少个单元格，值就取多少。

rowspan属性（列方向 合并单元格）： 从此单元格起，列方向向下合并单元格，合并多少个单元格，值就取多少。

二、合并表格

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

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

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

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

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

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

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