css caption-side属性将表格标题设置在表格的下方笔记

原创 国哥笔记  2018-11-08 18:44  阅读 652 views 次

caption-side属性定义及用法

在css中,caption-side属性是用来设置表格标题在表格的位置,默认情况下,表格标题是在表格的上方。如果我们要将表格标题放在表格的下方,就可以使用caption-side属性来实现。

caption-side属性语法格式

  1. css语法:caption-side: top / bottom / inherit;
  2. JavaScript语法:object.style.captionSide="bottom";

caption-side属性值说明

  • top:设置表格标题在表格的上方;
  • bottom:把表格标题定位在表格之下。
  • inherit:规定应该从父元素继承 caption-side 属性的值。

实例1(将表格标题设置在表格的下方):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css caption-side属性将表格标题设置在表格的下方笔记</title>
<style type="text/css">
body{background: #ddd;}
caption {caption-side:bottom;}
</style>
</head>
<body>
<table border="1">
<caption>这是表格标题</caption>
<tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>...</td></tr>
<tr><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td></tr>
<tr><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td></tr>
</table>
</body>
</html>

运行结果:

css caption-side属性将表格标题设置在表格的下方笔记

实例2:(将表格标题设置在表格的上方)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css caption-side属性将表格标题设置在表格的下方笔记</title>
<style type="text/css">
body{background: #ddd;}
caption {caption-side:top;}/*可以省略,caption-side属性值默认为top*/
</style>
</head>
<body>
<table border="1">
<caption>这是表格标题</caption>
<tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>...</td></tr>
<tr><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td></tr>
<tr><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td></tr>
</table>
</body>
</html>

运行结果:

css caption-side属性将表格标题设置在表格的下方笔记

 

更多css属性请移步到——>css属性大全

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

发表评论


表情