HTML Colspan

HTML Colspan ialah atribut yang digunakan dalam jadual untuk menyelam lajur ke dalam sel. Ia membolehkan pengguna membahagikan sel jadual tunggal ke dalam lebar satu atau lebih sama ada sel atau lajur. Atribut HTML ini berfungsi sebagai pilihan sel gabungan yang disertakan dalam hamparan, sama seperti excel. Atribut ini digunakan untuk menerangkan bilangan sebenar lajur dibahagikan dengan lajur individu.

atribut jadual colspan digunakan dalam kedua-dua elemen jadual seperti

dan . Nilai yang akan kita takrifkan dalam atribut colspan mestilah nombor integer positif sentiasa. Ia akan menyokong atribut seperti textarea serta elemen set bingkai.

atribut colspan dalam HTML boleh digunakan seperti berikut:

Sintaks:

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

• Status sintaks di atas yang teg digunakan untuk menentukan tiada lajur yang akan menjangkau. Atribut nilai dalam sintaks digunakan untuk menilai kiraan lajur yang digunakan untuk mengisi sel.
• Nilai mestilah integer positif.

Sintaks:

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

• Sintaks di atas digunakan apabila pengguna ingin menggunakan atribut colspan dengan tag Ia mentakrifkan bilangan sel pengepala yang akan menjadi rentang.
• Kerja yang dikaitkan ini sebagai atribut sebaris dalam kod HTML.
• Atribut kol HTML akan menyokong atribut yang berbeza seperti textarea dan elemen set bingkai.

Sintaks:

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

• Dalam sintaks di atas, ElementName ialah sejenis elemen yang disokong oleh elemen HTML. Nilai ialah atribut yang mentakrifkan nilai berbilang panjang untuk atribut set bingkai, manakala nombor adalah untuk kawasan teks.

Bagaimana untuk Melaksanakan Colspan dalam HTML?

Pelaksanaan kod colspan dalam HTML diterangkan di bawah.

1. Colspan dalam HTML menggunakan Tag

Kod:

<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>Output:</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 dalam HTML menggunakan <th> Tag
<p><strong>Kod:</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>Output:</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="Contoh-HTML-Colspan">Contoh HTML Colspan</h3>
<p>Berikut ialah contoh yang berbeza.</p>
<h4 id="Contoh">Contoh #1</h4>
<p>Status contoh ini yang akan digunakan oleh atribut colspan dengan pengepala jadual bersama-sama dengan </p>
</th>
<th> tag. Ia membahagikan lajur kepada 2 bahagian, seperti yang ditunjukkan dalam contoh di bawah:
<p><strong>Kod 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

Output:



Contoh #2

Dalam contoh ini, kami akan menerangkan cara lajur boleh dibahagikan menggunakan tag colspan dan apakah output sebenar dengan menggunakan tag colspan akan dijana seperti berikut:

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

Output:



Contoh #3

Dalam contoh ini kita akan menggunakan tag HTML colspan dalam kedua-dua

dan tag. Atribut ini membenarkan penggunaan kedua-dua teg bersama-sama juga. Berikut ialah kod untuk contoh, dan output akan menjana untuk yang sama.

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

Output:



Kesimpulan

• Daripada semua maklumat di atas, kami mendapat tahu bahawa HTML colspan ialah atribut yang akan digunakan dalam jadual serta kawasan teks dan atribut set bingkai.
• Ia membahagikan lajur jadual kepada satu atau lebih sel mengikut keperluan pengguna. Atribut ini akan menyokong kedua-dua dan tag. Nilai yang disertakan di dalamnya sentiasa menjadi integer positif.

Atas ialah kandungan terperinci HTML Colspan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!