將HTML中的列數設定為跨度
- WBOY轉載
- 2023-09-04 22:13:021401瀏覽
我們在這篇文章中要執行的任務是在HTML中設定要跨越的列數。
當使用
Colspan屬性
在HTML中，單元格應該跨越的列數是由colspan屬性指定的。它使得單一表格單元格可以跨越多個列或儲存格。它提供了與電子表格程式（如Excel的「合併儲存格」功能）相同的功能。
文法
下面是colspan屬性的語法。
<td colspan="number">
讓我們深入以下範例，更好地理解colspan屬性。
Example 1
的中文翻譯為：範例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。
Example 2
的中文翻譯為：範例2
讓我們來看下面的例子，其中我們使用了
<!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以上是將HTML中的列數設定為跨度的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除