css表格标题怎么设置位置_第1页
css表格标题怎么设置位置_第2页
css表格标题怎么设置位置_第3页
css表格标题怎么设置位置_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第css表格标题怎么设置位置？我们可以通过设置CSScaption-side属性的相关属性值来指定表格标题（caption标签）的位置，即：可以使用caption-side属性来指定了标题位于表格的哪一侧。

在table表格中，caption标签是用于为表格提供简短的标题，如标题或简短描述。caption标签是插在开始table标记之后，应该始终是表的第一个子项。然后我们就可以使用caption-side属性更改其在表中的位置了。

我们可以使用caption-side属性，来在表的上方或下方定位表格标题，指定标题位于表格的上方或下方。

注：

1、在CSS2.1之前，提供了两个值：left和right来分别将标题定位在表的左边和右边。但这两个值在最终的2.1规范中被移除，并且现在已经不是标准了，不怎么被浏览器兼容。

2、如果想要在标题框中让标题内容水平对齐，需要使用text-align属性；通过text-align属性还可以设置别的对齐方式。

下面我们来看看caption-side属性是如何设置table表格的标题位置的。

caption-side属性的基本语法：

caption-side:top|bottom|inherit

默认属性：top

适用于：table-caption元素中

动画：没有

caption-side属性值说明：

top：可以将标题定位在表格上方。

bottom：可以将标题定位在表格下方。

inherit：从父级的标题位置继承标题位置。

caption-side属性的示例：

1、标题在表格上方

html代码：

table>

css代码：

caption{

caption-side:top;

padding:.5em;

color:#de64a4;

}

效果图：

2、标题在表格下方

HTML代码：

table

captionem表的标题，位置：底部/em/caption

thead

th标题内容1/th

th标题内容2/th

/tr

/thead

tfoot

td页脚内容1/td

td页脚内容2/td

/tr

/tfoot

tbody

td主体内容1/td

td主体内容2/td

/tr

/tbody

/table

css代码：

caption{

caption-side:bottom;

padding:.5em;

color:#de64a4;

}

效果图：

浏览器支持度：

所有主流浏览器都支持caption-side属性，例如：Chrome，Firefox，Safari，Opera，InternetExplorer8+以及Android和iOS

注意：

1、

人人文库> 全部分类> 办公材料 > 办公文档

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论