HTML コルスパン

HTML Colspan は、テーブル内で列をセルに分割するために使用される属性です。これにより、ユーザーは表の単一セルを 1 つ以上のセルまたは列の幅に分割できます。 HTML のこの属性は、Excel と同様に、スプレッドシートに含まれるセルの結合オプションとして機能します。この属性は、実際の列数を個々の列で割ったものを記述するために使用されます。

colspan テーブル属性は、

のような両方のテーブル要素で使用されます。そして 。 Colspan 属性内で定義する値は、常に正の整数である必要があります。フレームセット要素だけでなくテキストエリアなどの属性もサポートする予定でした。

HTML のcolspan 属性は次のように使用できます:

構文:

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

• 上記の構文ステータスは スパンする列の番号を定義するために使用されるタグ。構文の value 属性は、セルを埋めるために使用される列の数を評価するために使用されます。
• 値は正の整数である必要があります。

構文:

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

• 上記の構文は、ユーザーが タグでcolspan属性を使用したい場合に使用されます。スパンされるヘッダー セルの数を定義します。
• この属性は、HTML コードのインライン属性として機能します。
• HTML の Cols 属性は、textarea 要素や Frameset 要素などのさまざまな属性をサポートする予定です。

構文:

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

• 上記の構文では、ElementName は HTML 要素によってサポートされる要素の一種です。値はフレームセット属性の複数長値を定義する属性であり、数値はテキストエリア用です。

HTML で Colspan を実装するには?

HTML での Colspan のコード実装については、以下で説明します。

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. <th> を使用した HTML での Colspanタグ
<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 は、テキスト領域やフレームセットの属性と同様にテーブル内で使用される属性であることがわかりました。
ユーザーの要件に応じて、テーブルの列を 1 つ以上のセルに分割します。この属性は、と の両方をサポートする予定です。タグ。それに含まれる値は常に正の整数です。

以上がHTML コルスパンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。