Colspan HTML

HTML Colspan est l'attribut utilisé dans le tableau pour plonger les colonnes dans la cellule. Il permet aux utilisateurs de diviser les cellules d'un tableau unique dans la largeur d'une ou plusieurs cellules ou colonnes. Cet attribut HTML fonctionne comme une option de fusion de cellules incluse dans la feuille de calcul, comme Excel. Cet attribut est utilisé pour décrire un nombre réel de colonnes divisé par des colonnes individuelles.

attribut de table colspan utilisé dans les deux éléments de table comme

et . La valeur que nous allons définir dans l'attribut colspan doit toujours être un nombre entier positif. Il allait prendre en charge des attributs tels que textarea ainsi que des éléments frameset.

L'attribut colspan en HTML peut être utilisé comme suit :

Syntaxe :

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

• Au-dessus du statut de syntaxe balise utilisée pour définir le nombre de colonnes qui s'étendront. L'attribut value dans la syntaxe est utilisé pour évaluer le nombre de colonnes utilisées pour remplir les cellules.
• La valeur doit être un entier positif.

Syntaxe :

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

• La syntaxe ci-dessus est utilisée lorsque les utilisateurs souhaitent utiliser l'attribut colspan avec la balise . Il définit le nombre de cellules d'en-tête qui seront étendues.
• Cet attribut fonctionne comme un attribut en ligne dans le code HTML.
• L'attribut HTML cols va prendre en charge différents attributs tels que les éléments textarea et frameset.

Syntaxe :

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

• Dans la syntaxe ci-dessus, ElementName est une sorte d'élément pris en charge par l'élément HTML. La valeur est l'attribut qui définit la valeur multi-longueur pour l'attribut frameset, alors que le nombre est pour la zone de texte.

Comment implémenter Colspan en HTML ?

L'implémentation du code de colspan en HTML est expliquée ci-dessous.

1. Colspan en HTML en utilisant Étiquette

Code :

<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>Sortie :</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="Colspan HTML" ></p>
<h4>2. Colspan en HTML en utilisant <th> Étiquette
<p><strong>Code :</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>Sortie :</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="Colspan HTML" ></p>
<h3 id="Exemples-de-HTML-Colspan">Exemples de HTML Colspan</h3>
<p>Voici les différents exemples.</p>
<h4 id="Exemple-n">Exemple n°1</h4>
<p>Cet exemple de statut que l'attribut colspan va utiliser avec l'en-tête du tableau avec </p>
</th>
<th> étiqueter. Il divise la colonne en 2 parties, comme le montre l'exemple ci-dessous :
<p><strong>Code 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

Sortie :



Exemple n°2

Dans cet exemple, nous allons expliquer comment la colonne peut être divisée à l'aide de la balise colspan et quelle sera la sortie réelle en utilisant la balise colspan qui sera générée comme suit :

Code 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>

Sortie :



Exemple #3

Dans cet exemple, nous allons utiliser la balise HTML colspan à la fois dans

et étiqueter. Cet attribut permet également d'utiliser les deux balises ensemble. Voici le code de l'exemple, et la sortie sera générée pour le même.

Code 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>

Sortie :



Conclusion

• D'après toutes les informations ci-dessus, nous avons appris que HTML colspan est l'attribut qui sera utilisé dans un tableau ainsi que les attributs de zone de texte et de jeu de cadres.
• Il divise la colonne du tableau en une ou plusieurs cellules selon les besoins de l'utilisateur. Cet attribut va prendre en charge à la fois et étiqueter. La valeur qu'il contient est toujours un entier positif.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!