- HTML 教程
- HTML 教程
- HTML - 简介
- HTML - 编辑器
- HTML - 基本标签
- HTML - 元素
- HTML - 属性
- HTML - 标题
- HTML - 段落
- HTML - 字体
- HTML - 块和内联元素
- HTML - 样式表
- HTML - 文本格式化
- HTML - 引用
- HTML - 注释
- HTML - 颜色
- HTML - 图像
- HTML - 图像映射
- HTML - iframe
- HTML - 短语标签
- HTML - 类
- HTML - ID
- HTML - 背景
- HTML 表格
- HTML - 表格
- HTML - 表格标题
- HTML - 表格样式
- HTML - 表格 Colgroup
- HTML - 嵌套表格
- HTML 列表
- HTML - 列表
- HTML - 无序列表
- HTML - 有序列表
- HTML - 定义列表
- HTML 链接
- HTML - 文本链接
- HTML - 图片链接
- HTML - 电子邮件链接
- HTML 颜色名称和值
- HTML - 颜色名称
- HTML - RGB 和 RGBA 颜色
- HTML - 十六进制颜色
- HTML - HSL 和 HSLA 颜色
- HTML 表单
- HTML - 表单
- HTML - 表单属性
- HTML - 表单控件
- HTML - 输入属性
- HTML 媒体
- HTML - 视频元素
- HTML - 音频元素
- HTML - 嵌入多媒体
- HTML 标头
- HTML - 头部
- HTML - 网站图标
- HTML - JavaScript
- HTML 布局
- HTML - 布局
- HTML - 布局元素
- HTML - CSS布局
- HTML - 响应式网页设计
- HTML - 特殊符号
- HTML - 表情符号
- HTML - 样式指南
- HTML 图形
- HTML - SVG
- HTML - 画布
- HTML API 接口
- HTML - Geolocation API
- HTML - 拖放 API
- HTML - Web Workers API
- HTML - WebSockets
- HTML - Web 存储
- HTML - 服务器发送事件
- HTML 杂项
- HTML - 数学标记语言
- HTML - 微观数据
- HTML - 索引数据库
- HTML - Web 消息传递
- HTML - CORS
- HTML - Web RTC
- HTML 演示
- HTML - 音频播放器
- HTML - 视频播放器
- HTML - Web 幻灯片台
- HTML 工具
- HTML - 二维码
- HTML - Modernizr
- HTML - 验证器
- HTML 备忘单
- HTML - 标签参考
- HTML - 属性参考
- HTML - 事件参考
- HTML - 字体参考
- HTML - ASCII 代码参考
- HTML - 实体
- MIME 媒体类型
- HTML - URL 编码
- HTML - ISO 语言代码
- HTML - 字符编码
- HTML - 已弃用的标签和属性
HTML - colspan 属性
HTML colspan 属性用于定义与其他单元格相比,单元格应跨越或扩展多少个表列。
此属性的值必须是非负整数。它的默认值为 1,如果我们为此属性分配一个大于 1000 的值,则将其视为假值,并将设置为默认值 1。
如果为其赋值为负值,它将将其视为假值,并自动为其设置默认值 1。
语法
<tag colspan = "value"></tag>
其中,该值可以是范围 1 到 1000 之间的任何非负整数。
适用于
下面列出的元素允许使用 HTML colspan 属性
元素 | 描述 |
---|---|
<th> | 定义了 HTML 表格中的标题单元格。 |
<td> | 定义了 HTML 表格中的标准单元格 |
HTML colspan 属性的示例
以下代码演示了 colspan 属性的用法
带有第 Tag 的 Colspan 属性
在以下示例中,我们使用 colspan 属性来跨越表的标题单元格。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML 'colspan' attribute</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<!--HTML 'colspan' attribute-->
<p>Example of HTML 'colspan' attribute</p>
<h2>Students Table</h2>
<table>
<tr>
<th colspan="2">Name</th>
<th>Roll No</th>
<th>Gender</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Revathi</td>
<td>Satya</td>
<td>1</td>
<td>Female</td>
</tr>
<tr>
<td>Aman</td>
<td>Kumar</td>
<td>2</td>
<td>Male</td>
</tr>
</table>
</body>
</html>
带有 td 标签的 Colspan 属性
考虑到另一种情况,我们将使用带有 td 标签的 colspan 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML 'colspan' attribute</title>
<style>
table,
th,
td {
border: 1px solid black;
width: 30%;
}
</style>
</head>
<body>
<!--HTML 'colspan' attribute-->
<p>Example of the HTML 'colspan' attribute</p>
<h2>Grocery Bill</h2>
<table>
<tr>
<th>Name</th>
<th>Price</th>
<th>GST</th>
</tr>
<tr>
<td>Bread</td>
<td>50</td>
<td>5</td>
</tr>
<tr>
<td>Eggs</td>
<td>180</td>
<td>10</td>
</tr>
<tr>
<!--colspan with value 2-->
<td colspan="2">Total price(without GST): 230</td>
<td>Total GST: 15</td>
</tr>
<tr>
<!--colspan with value 3-->
<td colspan="3">Total paid price(including GST): 245</td>
</tr>
</table>
</body>
</html>
支持的浏览器
浏览器 | |||||
---|---|---|---|---|---|
是否支持 | Yes | Yes | Yes | Yes | Yes |