HTML Colspan

HTML Colspan ist das Attribut, das in der Tabelle zum Eintauchen von Spalten in die Zelle verwendet wird. Es ermöglicht Benutzern, einzelne Tabellenzellen in die Breite einer oder mehrerer Zellen oder Spalten zu unterteilen. Dieses Attribut von HTML fungiert wie Excel als Option zum Zusammenführen von Zellen in der Tabelle. Dieses Attribut wird verwendet, um eine tatsächliche Anzahl von Spalten dividiert durch einzelne Spalten zu beschreiben.

colspan-Tabellenattribut, das in beiden Tabellenelementen verwendet wird, z. B.

und . Der Wert, den wir im Attribut colspan definieren, muss immer eine positive Ganzzahl sein. Es sollte Attribute wie Textbereich sowie Frameset-Elemente unterstützen.

Das Colspan-Attribut in HTML kann wie folgt verwendet werden:

Syntax:

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

• Über dem Syntaxstatus, der Tag, der verwendet wird, um die Anzahl der Spalten zu definieren, die sich erstrecken. Das Wertattribut in der Syntax wird verwendet, um die Anzahl der Spalten auszuwerten, die zum Füllen von Zellen verwendet werden.
• Der Wert muss eine positive ganze Zahl sein.

Syntax:

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

• Die obige Syntax wird verwendet, wenn Benutzer das colspan-Attribut mit dem -Tag verwenden möchten. Es definiert die Anzahl der Header-Zellen, die überspannt werden.
• Dieses Attribut funktioniert als Inline-Attribut im HTML-Code.
• HTML-Spaltenattribut unterstützt verschiedene Attribute wie Textbereichs- und Frameset-Elemente.

Syntax:

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

• In der obigen Syntax ist ElementName eine Art Element, das vom HTML-Element unterstützt wird. Wert ist das Attribut, das den Wert mit mehreren Längen für das Frameset-Attribut definiert, während die Zahl für den Textbereich gilt.

Wie implementiert man Colspan in HTML?

Die Code-Implementierung von colspan in HTML wird unten erläutert.

1. Colspan in HTML mit Markieren

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>Ausgabe:</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 Colspan" ></p>
<h4>2. Colspan in HTML mit <th> Markieren
<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>Ausgabe:</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 Colspan" ></p>
<h3 id="Beispiele-für-HTML-Colspan">Beispiele für HTML Colspan</h3>
<p>Im Folgenden finden Sie die verschiedenen Beispiele.</p>
<h4 id="Beispiel">Beispiel #1</h4>
<p>Dieser Beispielstatus, den das Colspan-Attribut zusammen mit dem Tabellenkopf und </p>
</th>
<th> verwenden wird. Etikett. Es unterteilt die Spalte in zwei Teile, wie im folgenden Beispiel gezeigt:
<p><strong>HTML-Code:</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

Ausgabe:



Beispiel #2

In diesem Beispiel erklären wir wie folgt, wie eine Spalte mithilfe des Colspan-Tags unterteilt werden kann und wie die tatsächliche Ausgabe mithilfe des Colspan-Tags generiert wird:

HTML-Code:

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

Ausgabe:



Beispiel #3

In diesem Beispiel verwenden wir das HTML-Tag colspan sowohl in

und Etikett. Dieses Attribut ermöglicht auch die gemeinsame Verwendung beider Tags. Hier ist der Code für das Beispiel, und die Ausgabe wird dafür generiert.

HTML-Code:

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

Ausgabe:



Fazit

• Aus all den oben genannten Informationen haben wir erfahren, dass HTML-Colspan das Attribut ist, das in einer Tabelle sowie in Textbereichs- und Frameset-Attributen verwendet wird.
• Es unterteilt die Tabellenspalte je nach Benutzeranforderung in eine oder mehrere Zellen. Dieses Attribut unterstützt sowohl als auch Etikett. Der darin enthaltene Wert ist immer eine positive Ganzzahl.

Das obige ist der detaillierte Inhalt vonHTML Colspan. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!