資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
廣告