<th></th><caption></caption>标签

最新推荐文章于 2023-08-30 22:33:37 发布
最新推荐文章于 2023-08-30 22:33:37 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： CSS 文章标签： th caption 标签 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/achenb/article/details/47041187
版权

<th></th>和<td></td>用法几乎一样的，只是它显示的效果是黑体居中文字。

大多数表格式的数据包含一行或一列表头，用来说明某一列或者某一行数据的属性类别，这种情况就可以用<th></th>来实现，根据这个标签的特点，来设置表头。

对于一些表格，还希望能够有一个标题来对表格进行一个概括性的说明。这时就可以通过<caption></caption>标签来实现。根据HTML规定，如果有标题元素，就必须跟在<table>标签之后。下面是个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>th和caption标签的使用</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


 </head>


 <body text-align="center">
<table border=1>
<caption><strong><h2>国家与球代表</h2><strong></caption>
<tr>
<th  width="33%" colspan="2">意大利</th>
<th  width="33%" colspan="2">英格兰</th>
<th  width="33%" colspan="2">西班牙</th>
</tr>
<tr>
<td align="center">AC米兰</td>
<td align="center">佛罗伦萨</td>
<td align="center">曼联</td>
<td align="center">纽卡斯尔</td>
<td align="center">巴塞罗那</td>
<td align="center">皇家社会</td>
</tr>
</table>
 </body>
</html>


效果如下图：



achenb
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
「HTML和CSS入门指南」caption 标签详解
a451319296的博客
06-04 3284
caption 标签是一个重要的标签，在 HTML 中用于为表格添加标题。使用 caption 标签可以帮助您提高数据可读性和理解性。在使用 caption 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能，并避免兼容性问题。
html5之<caption>标签
Focus-Fe
12-05 648
HTML 5 &lt;caption&gt; 标签   -------&lt;caption&gt;标签定义表格的标题。 必须直接放置在&lt;table&gt;标签之后。 每个表格只能规定一个标题。 通常标题会居中显示在表格上方。 所有主流浏览器多支持。 ...
＜caption＞表格标题标签
doreawa的博客
04-29 2093
<caption> 元素定义了一个表格标题。<caption> 标签必须紧跟在 <table> 标签之后，每个表格仅能规定一个 caption。通常，caption 会位于表格之上居中的位置。 align 属性规定 caption 元素的对齐方式（默认居中）。 该属性将 caption 作为块元素向表格的左边（left）、右边（right）、顶部（top）、底部（bottom）进行对齐。 兼容性：除了 Firefox，其他主流浏览器都无法正确地支持 align 属性
<table>标签里的caption标签和H标签的区别
weixin_30321709的博客
06-12 385
实例 带有标题的表格： <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td...
LaTex论文排版 | (21) 图表caption居中显示
热门推荐
sdu_hao的博客
12-11 3万+
图表caption无法居中问题 解决方案 在导言区添加一行代码(使用宏包)： \usepackage[justification=centering]{caption}
html <caption><strong> </strong></caption>是什么意思
最新发布
05-09
`<caption>` 标签应该在 `<table>` 标签的直接子元素列表中出现，且在任何 `<thead>`、`<tbody>`、`<tfoot>`、`<tr>`、`<th>` 元素之前。`<caption>` 元素的内容将被渲染为表格上方的居中标题。`<caption>` 元素在一...
用< table>、< tr>、< td>表格标签编写课程表
weixin_45943199的博客
04-10 1772
表格编写课程表 接上篇文章，利用表格标签，设置属性，调节部分代码内容，粗略编写课程表。 下面展示一些 内联代码片。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>课程表</title> <style> table{table-layou...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书首页</title> </head> <body> <table border="1"> <caption>图书信息表</caption> <tr> <th>title</th> <th>auth</th> <th>pushdate</th> </tr> <tr> <!--########## Begin ##########--> <th></th> <th></th> <th></th> <!--########## End ##########--> </tr> </table> </body> </html>、
05-29
<caption>图书信息表</caption> <tr> <th>title</th> <th>auth</th> <th>pushdate</th> </tr> <tr> <!--########## Begin ##########--> <th>JavaScript高级程序设计</th> <th>Nicholas C.Zakas</th> <th...
<thead>在<caption>上面怎么解决
05-19
在 HTML 表格中，<caption> 标签应该在表格标签的开始标签 <table> 后面使用，并且在表格标签的结束标签 </table> 前面使用。这样，<caption> 元素就会被放置在表格的上方，同时与表格相关联。 示例代码如下： ```...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="text" placeholder="员工姓名" v-model="emp.name"> <input type="text" placeholder="员工工资" v-model="emp.salary"> <input type="text" placeholder="员工工作" v-model="emp.job"> <input type="button" value="添加" @click="f()"> <table border="1"> <caption>员工列表</caption> <tr> <th>编号</th> <th>姓名</th> <th>工资</th> <th>工作</th> <th>操作</th> </tr> <tr v-for="(emp,i) in arr"> <td>{{i + 1}}</td> <td>{{emp.name}}</td> <td>{{emp.salary}}</td> <td>{{emp.job}}</td> <td><input type="button" value="删除" @click="del(i)" )></td> </tr> </table> </div> <script src="js/vue.min.js"></script> <script> let v = new Vue({ el: "body>div", data: { arr: [{name: "张三", salary: 3000, job: "销售"}, {name: "张三", salary: 3000, job: "销售"}, {name: "张三", salary: 3000, job: "销售"}], emp: [{name: "", salary: "", job: ""}] }, methods: { f() { v.arr.push({name: v.emp.name, salary: v.emp.salary, job: v.emp.job}) }, del(i) { v.arr.splice(i, 1) } } }) </script> </body> </html>帮我改错
05-25
<caption>员工列表</caption> <tr> <th>编号</th> <th>姓名</th> <th>工资</th> <th>工作</th> <th>操作</th> </tr> <tr v-for="(emp,i) in arr"> <td>{{i + 1}}</td> <td>{{emp.name}}</td> ...
前端学习之html（一）
weixin_42437364的博客
03-09 155
前端学习之htmlhtml的基本结构html的基本标签1.h标签2.p段落标签和span行内联标签3.div表签4.a链接标签5.img图片标签6. 表格table标签 和 列表ul标签 学习前端，首先要学习html。会用常用的标签，知道所有的标签。然后学习css，之后在学习JavaScript。 这些学完之后，就可以学习框架了。（jquery、vue等） 首先：我们从html标签学起 html的...
HTML基础-HTML标签（下）
Java追求者的博客
05-19 169
1. 表格标签 1.1 表格作用 用来显示和展示数据，这样会可读性好； 1.2 表格的基本语法 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> < table> < /table> 是用于定义表格的标签。 < tr> < /tr> 标签用于定义表格中的行，必须嵌套在 < table> &l
HTML系列之表格标签
老__L的博客
10-25 7429
本文主要介绍caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr标签。 table 开始标签和结束标签不能省略；表格中由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；caption 开始标签和结束标签都不能省略；当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，
HTML ＜th＞ 标签
玄链教育
08-30 2140
定义表格内的表头单元格。表头单元格 - 包含表头信息（由 th 元素创建）标准单元格 - 包含数据（由 td 元素创建）th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
html caption属性的值,HTML中的caption属性是什么意思？caption标签在HTML中
weixin_42512474的博客
06-04 4708
首页 > web前端 > html教程 > 正文 HTML中的caption属性是什么意思？caption标签在HTML中的用法(附实例) 2018-08-16 14:08:59 1309HTML中的caption属性是什么意思？caption标签作用有哪些？本篇文章内容就是关于HTML中caption标签和caption属性做一些详细的介绍。什么是caption属性：cap...
html中 table的结构 彻底搞清 caption th thead等
weixin_34195364的博客
09-28 647
正因为有太多 随意 称呼的 教法, 所以 感到很困惑, 如, 很多人把th叫标题. 那人家 caption怎么想, th只是一个跟td一样的角色, 只是对他进行加粗 加黑了而已, 用于某些单元格的内容 具有 "总起, 总领, 总结, 总计 "之类的语义时... 在html中写table的时候,要注意它的结构, 和所包含的 标签层次. 要得到 一个 空的 单元格, 直接写 &lt;td&gt;&lt...
带有标题的表格<caption>标题</caption>刚写是垂直的别急，写出下面第一行就会被表格挤成水平显示
Boa_lucky_queen的博客
12-26 996
打样小稿 数据统计表 单价 数量 总价 $120 1件 $120 $120 2件 $240
CSS基础知识-四（边框样式、caption、表格居中、边框宽度和高度、id和class的区别、Div+CSS布局）
张新丁
05-31 4861
表格： 1、 边框样式： Border-collapse:collapse（合并）  / separate（默认，两个边框）;-----设置边框是否重叠 Border-spacing:20px;-----表格列之间的距离 如： table{          width:600px;          height:200px;          border:1pxsolid #
th tr td区别
qq_32067151的博客
04-20 2万+
tr定义行th表示头部td表示单元格tr不能单独存在，相当于table的属性标签，而th,td也应当放在tr中。&lt;th&gt;不光是粗体，还是居中的。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;Insert title here&lt;/title&am
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值