目录

1如何将表格同一单元格中的图片和文本框对齐？    3

2如何将已设置了的单行表格中图片与其底部对齐？    3

3如何将表格的边框看起来只有1px宽？    3

4如何将插入的图片和边框有一段距离？    3


 

 
1如何将表格同一单元格中的图片和文本框对齐？

Key:

分别在图片和文本框的input属性中加入如下代码：

style="vertical-align:middle"

编写完成后的代码示例:

<input name="btnChoose" type="image" id="btnChoose" src="http://www.cnblogs.com/Skin/Default/Images/btnChoice.jpg" style="vertical-align:middle"/>

<input name="txtPrincipaler" type="text" id="txtPrincipaler" style="vertical-align:middle" />


 
2如何将已设置了的单行表格中图片与其底部对齐？

单击表格，查看表格属性，确认填充为0px后

在图片所在的单元格加上如下代码：

valign="bottom"

在图片的属性中加入如下代码：

align="absbottom"

编写完成后的代码示例：

  <td valign="bottom" class="table_title">&nbsp;<img src="http://www.cnblogs.com/Skin/Default/Images/lblCategoryAdd.gif" width="94" height="27" align="absbottom" /></td>


 
3如何将表格的边框看起来只有1px宽？

首先设置两个样式：.table和.td

在.table中设置背景色为边框的颜色，同时确认表格属性中的边框间距为1；为表格选择.table样式

在.td中设置背景色为白色（或者其他你想要的颜色），选择表格中所有单元格为其选择样式.td

即可得到表格的边框为1px


 
4如何将插入的图片和边框有一段距离？

方法一：

在图片的属性中加入如下代码：

margin-left:14px;（left可换成right/top/bottom）

编写后的代码示例：

<img src="http://www.cnblogs.com/Skin/Default/Images/imgSuccess.gif" width="110" height="110" style="background-repeat:no-repeat; vertical-align:middle; margin-left:14px;" />

方法二：

在photoshop中编辑该图像，使图像距离画布的边框有任意距离（任意：你想要的距离），编辑完成之后存储该图像并替换原图，即可得到你想要的效果