|
<table border="1" width="80" height="30" align="left">
<tr>
<td>居左显示</td>
</tr>
</table>
<table border="1" width="80" height="30" align="center">
<tr>
<td>居中显示</td>
</tr>
</table>
<table border="1" width="80" height="30" align="right">
<tr>
<td>居右显示</td>
</tr>
</table>
实例解析:
水平排列表格只要在 <table> 标签中加入 align 属性即可,其参数分别为 left(居左)、center(居中)、right(居右)。
在这里我们要特别注意的是表格的宽度值的设置一定要考虑到屏幕分辨率问题，多个表格的宽度一定不要超过大多数显示器的分辨率的宽度值，否则网页内容将无法正确显示，关于分辨率问题前面我们已有介绍，在这里不再详述。
3、 单元格里内容的水平位置与垂直位置的属性
（1） 单元格中内容的水平位置属性：在单元格中的内容水平排列同样也是使用 align 这一属性,其参数也是left、center和right，只是该属性是在 <div> 标签中使用的请看下面的实例：
<table width="450" border="1">
<tr>
<td width="150">
<div align="left">内容左对齐</div>
</td>
<td width="150"
<div align="center"> 内容居中 </div>
</td>
<td>
<div align="right">内容右对齐</div>
</td>
</tr>
</table>
（2） 单元格中内容的垂直位置属性： 其排列方式包括上对齐、居中和下对齐三种情况，其实现过程主要是在 <td> 标签中插入 valign 属性，其参数分别是 top(上对齐)、 middle(居中)和 bottom(下对齐）。请看下面的实例：
<table width="150" border="1">
<tr>
<td height="40" width="146" valign="top">内容上对齐</td>
</tr>
<tr>
<td height="40" width="146" valign="middle">内容居中</td>
</tr>
<tr>
<td height="40" width="146" valign="bottom">内容下对齐</td>
</tr>
</table>
实例解析：
上例中实现了单元格中内容垂直对齐的三种情况，这是为了讲解其功能的实现过程而做，如果我们在制作网页的过程中也这样做的话必然使网页中的内容参差不齐，如果没有特别的要求一个表格中的内容尽量采用一种对齐方式即可。
4、 控制单元格之间的距离、单元格中内容与单元格边界的距离
这两个效果的实现只要在 <table> 标签中加入 cellspacing(单元格之间的距离)、 cellpadding（单元格中的内容与单元格边界的距离），这两个属性即可，其参数均为大于零的整数其意义为相素的点数。请看下面的实例：
<table width="200" cellspacing="8" cellpadding="3" border="1">
<tr>
<td> 第一个单元格中的内容 </td>
<td> 第二个单元格中的内容 </td>
</tr>
</table>
实例解析：
上例中设置两个单元格之间的距离为八个相素点，单元格中的内容与单元格边界的距离为三个相素点。
四、 表格与单元格的背景色、背景图片
表格与单元格的背景颜色与背景图片所使用的标签属性是一样的，其中背景色属性是：bgcolor="颜色代码" ，背景图片属性是：background="图片路径和名称"。请看下面的实例：
<table width="450" border="1" bgcolor="#FFFFFF" height="90">
<tr>
<td> </td>
<td background="01.gif"> </td>
</tr>
<tr>
<td bgcolor="#FF0000"> </td>
<td> </td>
</tr>
</table>
实例解析：
在上例中，整个表格的背景色是 bgcolor="#FFFFFF" ，第一行第二列的单元格背景图片是 background="01.gif" ，第二行第一列的单元格背景色是 bgcolor="#FF0000" ,在这里一定需要注意的是，当设置了表格的背景色后再设置单元格的背景色或背景图片，将优先显示单元格的属性。
责任编辑：
读者评论：
发表评论：
相关文章：
|
