html中th标签添加方法,HTML <th> 标签

HTML

标签 标签表示HTML表格的表头部分,该标签中的内容会以粗体显示,请参考下述示例:

实例

一个简单的 HTML 表格,带有两个表头单元格和两个数据单元格:

MonthSavings
January$100

尝试一下 »

(更多实例见页面底部)

浏览器支持

413051

413051

413051

413051

413051

所有主流浏览器都支持

标签。

标签定义及使用说明

标签定义 HTML 表格中的表头单元格。

HTML 表格有两种单元格类型:表头单元格 - 包含头部信息(由

元素创建)

标准单元格 - 包含数据(由

元素创建) 元素中的文本通常呈现为粗体并且居中。 元素中的文本通常是普通的左对齐文本。

提示和注释

提示:如果需要将内容横跨多个行或列,请使用 colspan 和 rowspan 属性!

HTML 4.01 与 HTML5之间的差异

HTML 5 中不再支持 HTML 4.01 中的某些属性。

属性属性 值 描述

text HTML5 不支持。 规定表头单元格中内容的缩写版本。

left

right

center

justify

char HTML5 不支持。 规定表头单元格内容的水平对齐方式。

category_name HTML5 不支持。 对表头单元格进行分类。

rgb(x,x,x)

#xxxxxx

colorname HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的背景颜色。

character HTML5 不支持。 规定根据哪个字符来进行内容的对齐。

number HTML5 不支持。 规定对齐字符的偏移量。

number 规定表头单元格可横跨的列数。

header_id 规定与表头单元格相关联的一个或多个表头单元格。

pixels

% HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的高度。

nowrap HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格中的内容是否折行。

number 规定表头单元格可横跨的行数。

col

colgroup

row

rowgroup 规定表头单元格是否是行、列、行组或列组的头部。

top

middle

bottom

baseline HTML5 不支持。 规定表头单元格内容的垂直排列方式。

pixels

% HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的宽度。

全局属性

标签支持 HTML 的全局属性。

事件属性

标签支持所有 HTML 的事件属性。

413051

尝试一下 - 实例

表格中的标题

本例演示如何显示表格标题。

空单元格

本例演示如何使用 " " 处理没有内容的单元格。

带有标题的表格

本例演示一个带标题(caption)的表格。

表格内的标签

本例演示如何在其他的元素内显示元素。

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

相关文章

HTML 教程:HTML 表格

HTML DOM 参考手册:Th 对象

<!DOCTYPE html> <!-- 声明文档类型 --> <html> <head> <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 --> <title>酒店管理系统</title> <!-- 设置网页标题 --> <link rel="stylesheet" href="style.css"> <!-- 引入外部样式表 --> </head> <body> <header> <!-- 设置网页头部 --> <h1>酒店管理系统</h1> <!-- 设置网页标题 --> </header> <main> <!-- 设置网页主体内容 --> <h2>酒店客房管理</h2> <!-- 设置主体内容标题 --> <table> <!-- 创建表格 --> <thead> <!-- 设置表格头部 --> <tr> <!-- 创建表格行 --> <th>ID</th> <!-- 创建表格头部单元格 --> <th>类型</th> <th>价格</th> <th>编辑</th> </tr> </thead> <tbody> <!-- 设置表格内容 --> <tr> <td>1</td> <!-- 创建表格单元格,并填写内容 --> <td>单人房</td> <td>¥200</td> <td><button class="edit-btn">编辑</button></td> <!-- 创建带有“编辑”按钮的单元格 --> </tr> <tr> <td>2</td> <td>双人房</td> <td>¥300</td> <td><button class="edit-btn">编辑</button></td> </tr> <tr> <td>3</td> <td>豪华房</td> <td>¥500</td> <td><button class="edit-btn">编辑</button></td> </tr> </tbody> </table> <div class="add-form"> <!-- 创建添加客房的表单 --> <h3>添加客房</h3> <!-- 设置表单标题 --> <form> <!-- 创建表单 --> <div> <label for="room-id">ID:</label> <!-- 创建表单标签和输入框 --> <input type="number" id="room-id" required> <!-- 设置输入框类型为数字,且必填 --> </div> <div> <label for="room-type">类型:</label> <input type="text" id="room-type" required> <!-- 设置输入框类型为文本,且必填 --> </div> <div> <label for="room-price">价格:</label> <input type="number" id="room-price" required> </div> <button type="submit">添加</button> <!-- 创建提交按钮 --> </form> </div> </main> <script src="script.js"></script> <!-- 引入外部JavaScript文件 --> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值