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？

下面解释colspan在HTML中的代码实现。

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中文网其他相关文章！