一、表格的基本结构
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 属性设定表格相邻单元格边线之间的距离。