css caption-side表格标题属性笔记

原创 国哥笔记  2017-12-19 18:33  阅读 1,230 views 次

caption-side属性定义及用法

1、在css中,caption-side属性是用来规定表格标题的位置,表格标题可以设置在表格之上(默认),也可以设置在表格之下;

2、目前所有主流浏览器都支持caption-side属性,但是IE8必须要指定!DOCTYPE才支持;

caption-side属性值

  • top:表格标题在表格之上(默认);
  • bottom:表格标题在表格之下;
  • inherit:从父元素继承 caption-side 属性的属性值。

语法格式:

caption-side:top / bottom / inherit;

实例1(默认属性值top):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css caption-side表格标题属性笔记</title>
<style>
table{width:400px; height:150px;}
caption{caption-side:top;}
</style>
<head/>
<body>
<table border="1">
<caption>学生成绩表</caption>
<tr><th>学号</th><th>姓名</th><th>性别</th><th>成绩</th></tr>
<tr><td>1</td><td>张三</td><td>男</td><td>60</td></tr>
<tr><td>2</td><td>李四</td><td>男</td><td>80</td></tr>
</table>
</body>
</html>

运行结果:

css caption-side表格标题属性笔记

实例2(属性值bottom):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css caption-side表格标题属性笔记</title>
<style>
table{width:400px; height:150px;}
caption{caption-side:bottom;}
</style>
<head/>
<body>
<table border="1">
<caption>员工信息表</caption>
<tr><th>工号</th><th>姓名</th><th>性别</th><th>工资</th></tr>
<tr><td>1</td><td>肖华</td><td>男</td><td>6000</td></tr>
<tr><td>2</td><td>小花</td><td>女</td><td>5000</td></tr>
<tr><td>2</td><td>小华</td><td>男</td><td>8000</td></tr>
</table>
</body>
</html>

运行结果:

css caption-side表格标题属性笔记

说明:实例中主要涉及的html标签有:table标签caption标签tr标签th标签td标签

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/caption-side.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情