css caption-side的功能详解说明


摘要:
下文讲述css属性caption-side的功能说明,如下所示:


css caption-side的功能说明

css caption-side的功能: 
    设置html表格对象中caption对象在表格的位置
css caption-side注意事项:
   1.IE7及以下版本的浏览器实现top和bottom参数值,可直接在caption标签中使用valign="top|bottom"
   2.Firefox中还额外支持right和left两个属性值
   3.使用js脚本设置caption-side属性可使用captionSide属性 

css caption-side语法:
   caption-side:top|bottom
 ------------参数说明-----------
    top:
     设置caption在表格上边
    bottom:
     设置caption在表格下边


css caption-side的功能示例说明

 
<meta charset="utf-8" /> 
<style>
h1{font-size:16px;font-family:Arial;}
.test1{caption-side:top;}
.test2{caption-side:right;}
.test3{caption-side:bottom;}
.test4{caption-side:left;}
</style>
<p>
 maomao365.com <br />
table之caption-side属性示例说明
</p>
<hr />

<h1>caption在上边</h1>
<table border="1" class="test1">
<caption>caption在上边</caption>
<tbody>
	<tr>
		<td>keyId</td>
		<td>备注</td>
	</tr>
	<tr>
		<td>1</td>
		<td>猫猫教程</td>
	</tr>
</tbody>
</table>

<h1>caption在右边</h1>
<table border="1" class="test2">
<caption>caption在右边</caption>
<tbody>
	<tr>
		<td>keyId</td>
		<td>备注</td>
	</tr>
	<tr>
		<td>1</td>
		<td>猫猫教程</td>
	</tr>
</tbody>
</table>

<h1>caption在下边</h1>
<table border="1" class="test3">
<caption>caption在下边</caption>
<tbody>
	<tr>
		<td>keyId</td>
		<td>备注</td>
	</tr>
	<tr>
		<td>1</td>
		<td>猫猫教程</td>
	</tr>
</tbody>
</table>

<h1>caption在左边</h1>
<table border="1" class="test4">
<caption>caption在左边</caption>
<tbody>
	<tr>
		<td>keyId</td>
		<td>备注</td>
	</tr>
	<tr>
		<td>1</td>
		<td>猫猫教程</td>
	</tr>
</tbody>
</table> 
css 表格table之caption-side示例说明

css 表格table之caption-side示例说明