HTML 科爾斯潘

HTML Colspan 是表格中用來將列分割到儲存格中的屬性。它允許使用者將單一表格單元格劃分為一個或多個儲存格或列的寬度。 HTML 的此屬性用作電子表格中包含的合併儲存格選項，與 Excel 相同。此屬性用於描述實際列數除以各個列。

colspan 表屬性在兩個表元素中使用，如

;和 。我們要在 colspan 屬性中定義的值必須始終是正整數。它將支援文字區域和框架集元素等屬性。

HTML 中的 colspan 屬性可以如下使用:

文法：

<td colspan="value">table content…</td>

• 以上語法狀態 標籤用來定義要跨越的欄位的數量。語法中的 value 屬性用於評估用於填充單元格的列數。
• 該值必須是正整數。

文法：

<th colspan="value">table content…</th>

• 當使用者想要使用帶有 標籤的 colspan 屬性時，請使用上述語法。它定義了跨度的標題單元格的數量。
• 此屬性在 HTML 程式碼中用作內嵌屬性。
• HTML cols 屬性將支援不同的屬性，如文字區域和框架集元素。

文法：

<elementname cols="value">……………….</elementname>

• 在上面的語法中，ElementName是HTML元素支援的一種元素。 Value是為frameset屬性定義多長度值的屬性，而number是為textarea定義的。

如何在 HTML 中實作 Colspan？

下面解釋HTML中colspan的程式碼實作。

1. HTML 中的 Colspan 使用 標籤

代碼：

<title>HTML colspan Attribute with <td> tag
<style>
table, th, td {
border: 2 px solid blue;
border-collapse: collapse;
padding: 5px;
text-align:left;
}
</style>


<center>
<h1 id="State-With-it-s-capital">State With it’s capital </h1>
<h2 id="HTML-colspan-Attribute">HTML colspan Attribute</h2>
<table>
<tr>
<th>State </th>
<th>Capital </th>
</tr>
<tr>
<td>Andhra Pradesh</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>Bihar </td>
<td>Patna</td>
</tr>
<tr>
<td>Goa </td>
<td>Panaji</td>
</tr>
<tr>
<td>Maharashtra </td>
<td>Mumbai </td>
</tr>
<tr>
<td>Nagaland</td>
<td>Kohima </td>
</tr>
<tr>
<td>Punjab </td>
<td>Chandigarh </td>
</tr>
<tr>
<td> Gujarat</td>
<td> Gandhinagar</td>
</tr>
<tr>
<td>Haryana </td>
<td>Chandigarh </td>
</tr>
<tr>
<td colspan="2">India</td>
</tr>
</table>
</center>


<p><strong>輸出：</strong></p>
<p><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543967689731.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 科爾斯潘" ></p>
<h4>2. HTML 中的 Colspan 使用 <th>標籤
<p><strong>代碼：</strong></p>
<pre class="brush:php;toolbar:false">


<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 3px solid red;
border-collapse: collapse;
}
</style>


<center>
<h1 id="Population">Population</h1>
<h2>HTML colspan Attribute with <th> tag
<table>
<tr>
<th colspan="2">Gender</th>
</tr>
<tr>
<td>Male</td>
<td>18</td>
</tr>
<tr>
<td>Female</td>
<td>24</td>
</tr>
</table>



<p><strong>輸出：</strong></p>
<p><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543967913067.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 科爾斯潘" ></p>
<h3 id="HTML-Colspan-範例">HTML Colspan 範例</h3>
<p>以下是不同的範例。 </p>
<h4 id="範例">範例#1</h4>
<p>這個範例狀態 colspan 屬性將與表頭以及 </p>
</th>
<th> 一起使用標籤。它將列分為 2 部分，如下例所示：
<p><strong>HTML 程式碼：</strong></p>
<pre class="brush:php;toolbar:false">


<style>
table,
th,
td {
border: 2px solid blue;
border-collapse: collapse;
padding:5px;
}
</style>

Employee Details

	Software		Hardware		Marketing		HR		Others
Department	.NET	JAVA	Embedded	Mechanical	Indoor	Outdoor	Onside	Offside	Accounts	Assets	Canteen
Head Person	John	Disuja	Kartik	Gary	Sreja	Divya	Sandesh	Krutika	P. Roy	Mohan	Joggy
Experience(in years)	17	12	8	7	12	11	5	9	7	12	5
No of Teams	5	5	7	7	3	2	2	2	5	5	5
Assigned Projects/Task	18	15	7	11	5	5	2	2	4	10	6
No of employees	182	150	75	82	34	25	2	5	4	10	6
Weekly standup	Monday	Monday	Friday	Friday	Tuseday	Tuseday	Everyday	Everyday	Friday	Friday	Friday
Appriasal Month	March	March	March	March	June	June	March	March	June	June	June

輸出：



範例#2

在這個範例中，我們將解釋如何使用 colspan 標籤來分割列，以及使用 colspan 標籤將產生的實際輸出如下：

HTML 程式碼：

<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding:8px;
}
</style>


<center>
<h1 id="Weather-in-India">Weather in India</h1>
<table>
<tr>
<th> Temperature  (in degree Celsius)</th>
</tr>
<tr>
<td>Agartala</td>
<td>17</td>
</tr>
<tr>
<td>Amritsar</td>
<td>23</td>
</tr>
<tr>
<td>Aurangabad</td>
<td>26</td>
</tr>
<tr>
<td>Bangalore</td>
<td>23</td>
</tr>
<tr>
<td>Bhopal</td>
<td>13</td>
</tr>
<tr>
<td>Chennai</td>
<td>25</td>
</tr>
<tr>
<td>Delhi</td>
<td>11</td>
</tr>
<tr>
<td>Haridwar</td>
<td>8</td>
</tr>
<tr>
<td>Hubbali</td>
<td>25</td>
</tr>
<tr>
<td>Indore</td>
<td>15</td>
</tr>
<tr>
<td>Kanyakumari</td>
<td>28</td>
</tr>
<tr>
<td>Katra</td>
<td>8</td>
</tr>
<tr>
<td>Mumbai</td>
<td>26</td>
</tr>
<tr>
<td colspan="2"><b>Average Temperature = 19.07</b></td>
</tr>
</table>
</center>

輸出：



範例 #3

在此範例中，我們將在

和 中使用 colspan HTML 標籤。和 標籤。該屬性也允許同時使用兩個標籤。這是範例的程式碼，並且將產生相同的輸出。

HTML 程式碼：

<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
padding:8px;
}
</style>


<center>
<h1 id="Pune-Highlights">Pune Highlights</h1>
<table>
<tr>
<th colspan="2"> Famous Area in Pune</th>
</tr>
<tr>
<td colspan="1">Koregaon Park</td>
<td>Kalyani nagar</td>
</tr>
<tr>
<td colspan="1">PMC</td>
<td>PCMC</td>
</tr>
<tr>
<td colspan="2">Kothrud</td>
</tr>
<tr>
<td colspan="2">Chakan</td>
</tr>
<tr>
<td colspan="1">Vishrantwadi</td>
<td>Lohgaon</td>
</tr>
<tr>
<td colspan="1">Hadpsar</td>
<td>Swargate</td>
</tr>
<tr>
<td colspan="1">Decan</td>
<td>Baner</td>
</tr>
<tr>
<td colspan="1">Bavdhan</td>
<td>Wakad</td>
</tr>
<tr>
<td colspan="1">Pimpri Chinchwad</td>
<td>Akurdi</td>
</tr>
<tr>
<td colspan="2">Vimannagar </td>
</tr>
<tr>
<td colspan="1">Wagholi</td>
<td>Katraj</td>
</tr>
<tr>
<td colspan="1">Hinjewadi</td>
<td>Khadkwasla</td>
</tr>
<tr>
<td colspan="1">Camp</td>
<td>Laxmi Road</td>
</tr>
</table>
</center>

輸出：



結論

• 從上述資訊中，我們知道 HTML colspan 是表格中將使用的屬性，以及文字區域和框架集屬性。
• 它根據使用者要求將表格列分為一個或多個儲存格。該屬性將支援 和 。標籤。其中包含的值始終為正整數。

以上是HTML 科爾斯潘的詳細內容。更多資訊請關注PHP中文網其他相關文章！