数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究在 HTML 中设置跨越的列数
我们在本文中要执行的任务是在 HTML 中设置要跨越的列数。
当使用 <td> 元素时，这是通过使用 colspan 属性来实现的。因此，一个单元格现在可以跨越多个列或单元格的宽度。让我们深入本文，了解更多关于 colspan 属性的信息。
Colspan 属性
colspan 属性用于指定 HTML 中单元格应跨越的列数。它允许单个单元格扩展到多个列或单元格。它提供了与 Excel 等电子表格程序的“合并单元格”功能相同的功能。
语法
以下是 colspan 属性的语法。
<td colspan="number">
让我们深入以下示例，以更深入地了解 colspan 属性。
示例 1
在以下示例中，我们对表格使用 colspan。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
table,
tbody,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>NAME</th>
<th>Amount</th>
</tr>
<tr>
<td>Surya</td>
<td>143</td>
</tr>
<tr>
<td>Karthik</td>
<td>420</td>
</tr>
<tr>
<td colspan="2">Total Amount : 563</td>
</tr>
</table>
</body>
</html>
当脚本执行时，它将生成一个输出，显示包含脚本中给定数据的表格，以及网页上总金额的 colspan。
示例 2
让我们看一下以下示例，其中我们在 <article> 标签中使用 colspan。
<!DOCTYPE html>
<html>
<head>
<style>
article {
columns: 3;
}
h1 {
column-span: all;
}
</style>
</head>
<body>
<article>
<h1>spanning all of the columns</h1>
<p>Mahendra Singh Dhoni is an Indian former professional cricketer who was captain of the Indian national cricket team in limited-overs formats</p>
<p>Virat Kohli is an Indian international cricketer and former captain of the India national cricket team.He plays for Delhi in domestic cricket</p>
<p>Hardik Himanshu Pandya is an Indian international cricketer who plays for the India national cricket team at the international level and the Baroda cricket team domestically.</p>
</article>
</body>
</html>
运行以上脚本后，它将生成一个输出，其中包含脚本中使用的文本以及网页上的 colspan。
更新于: 2022-12-16
392 次浏览
广告