HTML Colspan-html tutorial-php.cn

Jadual Kandungan

Bagaimana untuk Melaksanakan Colspan dalam HTML?

1. Colspan dalam HTML menggunakan <td> Tag

2. Colspan dalam HTML menggunakan <th> Tag

Contoh HTML Colspan

Contoh #3

Kesimpulan

Rumah

hujung hadapan web

html tutorial

HTML Colspan

PHPz

Sep 04, 2024 pm 04:47 PM

html html5 HTML Tutorial HTML Properties HTML tags

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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:

<!DOCTYPE html>
<html>
<head>
<title>HTML colspan Attribute with <td> tag</title>
<style>
table, th, td {
border: 2 px solid blue;
border-collapse: collapse;
padding: 5px;
text-align:left;
}
</style>
</head>
<body>
<center>
<h1 style="color: blue;">State With it’s capital </h1>
<h2>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>
</body>
</html>

Salin selepas log masuk

Output:

HTML Colspan

2. Colspan dalam HTML menggunakan Tag

Kod:

<!DOCTYPE html>
<html>
<head>
<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 3px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<center>
<h1 style="color: grey;">Population</h1>
<h2>HTML colspan Attribute with <th> tag</h2>
<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>
</center>
</body>
</html>

Salin selepas log masuk

Output:

HTML Colspan

Contoh HTML Colspan

Berikut ialah contoh yang berbeza.

Contoh #1

Status contoh ini yang akan digunakan oleh atribut colspan dengan pengepala jadual bersama-sama dengan tag. Ia membahagikan lajur kepada 2 bahagian, seperti yang ditunjukkan dalam contoh di bawah:

Kod HTML:

<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 2px solid blue;
border-collapse: collapse;
padding:5px;
}
</style>
</head>
<body>
<table>
<h1 style="text-align: center;">Employee Details</h1>
<tr>
<th colspan="1"></th>
<th colspan="2">Software</th>
<th colspan="2">Hardware</th>
<th colspan="2">Marketing</th>
<th colspan="2">HR</th>
<th colspan="3">Others</th>
</tr>
<tr>
<th >Department</th>
<th>.NET</th>
<th>JAVA</th>
<th>Embedded</th>
<th>Mechanical</th>
<th>Indoor</th>
<th>Outdoor</th>
<th>Onside</th>
<th>Offside</th>
<th>Accounts</th>
<th>Assets</th>
<th>Canteen</th>
</tr>
<tr>
<td>Head Person</td>
<td>John</td>
<td>Disuja</td>
<td>Kartik</td>
<td>Gary</td>
<td>Sreja</td>
<td>Divya</td>
<td>Sandesh</td>
<td>Krutika</td>
<td>P. Roy</td>
<td>Mohan</td>
<td>Joggy</td>
</tr>
<tr>
<td>Experience(in years)</td>
<td>17</td>
<td>12</td>
<td>8</td>
<td>7</td>
<td>12</td>
<td>11</td>
<td>5</td>
<td>9</td>
<td>7</td>
<td>12</td>
<td>5</td>
</tr>
<tr>
<td>No of Teams</td>
<td>5</td>
<td>5</td>
<td>7</td>
<td>7</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>Assigned Projects/Task</td>
<td>18</td>
<td>15</td>
<td>7</td>
<td>11</td>
<td>5</td>
<td>5</td>
<td>2</td>
<td>2</td>
<td>4</td>
<td>10</td>
<td>6</td>
</tr>
<tr>
<td>No of employees</td>
<td>182</td>
<td>150</td>
<td>75</td>
<td>82</td>
<td>34</td>
<td>25</td>
<td>2</td>
<td>5</td>
<td>4</td>
<td>10</td>
<td>6</td>
</tr>
<tr>
<td>Weekly standup</td>
<td>Monday</td>
<td>Monday</td>
<td>Friday</td>
<td>Friday</td>
<td>Tuseday</td>
<td>Tuseday</td>
<td>Everyday</td>
<td>Everyday</td>
<td>Friday</td>
<td>Friday</td>
<td>Friday</td>
</tr>
<tr>
<td>Appriasal Month</td>
<td>March</td>
<td>March</td>
<td>March</td>
<td>March</td>
<td>June</td>
<td>June</td>
<td>March</td>
<td>March</td>
<td>June</td>
<td>June</td>
<td>June</td>
</tr>
</table>
</body>
</html>

Salin selepas log masuk

Output:

HTML Colspan

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:

<!DOCTYPE html>
<html>
<head>
<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding:8px;
}
</style>
</head>
<body>
<center>
<h1 style="color: greenyellow;">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>
</body>
</html>

Salin selepas log masuk

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:

<!DOCTYPE html>
<html>
<head>
<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
padding:8px;
}
</style>
</head>
<body>
<center>
<h1 style="color:deepskyblue;">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>
</body>
</html>

Salin selepas log masuk

Output:

HTML Colspan

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?

3 minggu yang lalu By DDD

Bagaimana untuk memperbaiki KB5055518 gagal dipasang di Windows 10?

3 minggu yang lalu By DDD

Tahap kekuatan untuk setiap musuh & raksasa di R.E.P.O.

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Rails Dead - Cara menjinakkan serigala

3 minggu yang lalu By DDD

Putera Biru: Cara sampai ke ruangan bawah tanah

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Java

1655

Tutorial CakePHP

1413

Tutorial Laravel

1306

Tutorial PHP

1252

Tutorial C#

1226

Tunjukkan Lagi

Related knowledge

Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

See all articles