首页 » 编程语言 » html » 正文

html元素caption标签的使用方法及作用

html元素caption标签是用来定义table表格的标题,其使用方法及作用详解如下:

<caption>标签的定义

<caption>标签定义表格的标题,该标题会默认居中在表格顶部;

<caption>标签必须直接放置到<table>标签之后;

<caption>标签的align属性已被html4废弃,而HTML5已不再支持;

每个表格只能用一个<caption>标签定义一个标题。

<caption>标签语法格式

语法格式如下:

<caption>表格标题</caption>

<caption>标签是成对出现的,以<caption>为开始标签,以</caption>为结束标签。

浏览器支持情况

<caption>标签已被所有主流浏览器支持 。

<caption>标签的用法

<caption>的用法也很简单,主要是定义表格的标题,标题默认会居中在表格之上,可以使用align属性来更改它的对齐方式,但是不建议使用,因为html5已经不支持该属性。如果要改变样式,可以使用css来改变。

1、设置表格的标题

<caption>的用法也很简单,主要就是定义表格的标题,演示代码如下:

<table border="1">
<caption>蔬菜价格</caption>
<tr><th>蔬菜品种</th><th>蔬菜价格</th></tr>
<tr><td>番茄</td><td>5元/斤</td></tr>
<tr><td>茄子</td><td>2元/斤</td></tr>
<tr><td>土豆</td><td>4元/斤</td></tr>
</table>

以上代码在浏览器中显示效果如下:

2020-04-16_190738.png

2、设置表格标题的边框和对齐方式

我们应该通过CSS属性 "text-align" 和 "caption-side" 来改变表格标题的对齐方式。同样,我们也应该通过CSS样式来添加各种样式效果,比如,添加表格标题的边框、背景颜色,字体颜色、大小等效果。

<table border="1">
<caption style="border:1px solid #000;background:yellow;text-align:center;">蔬菜价格</caption>
<tr><th>蔬菜品种</th><th>蔬菜价格</th></tr>
<tr><td>番茄</td><td>5元/斤</td></tr>
<tr><td>茄子</td><td>2元/斤</td></tr>
<tr><td>土豆</td><td>4元/斤</td></tr>
</table>

其中,border:1px solid #000表示添加一个粗细为1px的实线边框,solid表示实线,#000表示黑色;background:yellow表示背景颜色为黄色,text-align:center表示居中显示表格标题,如下图所示:

2020-04-16_195837.png

<caption>标签属性

属性描述
alignleft
right
top
bottom

 定义标题的对齐方式。

HTML5不支持该属性,在HTML 4.01中已被已废弃。

<caption>标签的align属性已被html4废弃,而HTML5已不再支持;



欢迎您发表评论或留言