HTML 콜스팬-HTML 튜토리얼-php.cn

HTML 콜스팬

PHPz

풀어 주다： 2024-09-04 16:47:53

원래의

1037명이 탐색했습니다.

HTML Colspan은 열을 셀로 나누기 위해 테이블에서 사용되는 속성입니다. 이를 통해 사용자는 단일 테이블 셀을 하나 이상의 셀 또는 열 너비로 나눌 수 있습니다. HTML의 이 속성은 Excel과 마찬가지로 스프레드시트에 포함된 셀 병합 옵션으로 작동합니다. 개별 열로 나눈 실제 열 수를 설명하는 데 사용되는 속성입니다.

와 같은 두 테이블 요소 모두에 사용되는 colspan 테이블 속성 및 <>. colspan 속성 내에서 정의할 값은 항상 양의 정수여야 합니다. 텍스트 영역은 물론 프레임셋 요소와 같은 속성도 지원할 예정이었습니다.

HTML의 colspan 속성은 다음과 같이 사용할 수 있습니다:

구문:

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

로그인 후 복사

확장할 열을 정의하는 데 사용되는 태그입니다. 구문의 값 속성은 셀을 채우는 데 사용되는 열 수를 평가하는 데 사용됩니다.
값은 양의 정수여야 합니다.

구문:

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

로그인 후 복사

위 구문은 사용자가 태그와 함께 colspan 속성을 사용하려는 경우에 사용됩니다. 스팬될 헤더 셀의 수를 정의합니다.
이 속성은 HTML 코드에서 인라인 속성으로 작동합니다.
HTML 열 속성은 텍스트 영역 및 프레임세트 요소와 같은 다양한 속성을 지원할 예정입니다.

구문:

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

로그인 후 복사

위 구문에서 ElementName은 HTML 요소가 지원하는 일종의 요소입니다. Value는 프레임셋 속성에 대해 다중 길이 값을 정의하는 속성이고, 숫자는 텍스트 영역에 대한 것입니다.

HTML에서 Colspan을 구현하는 방법은 무엇입니까?

HTML에서 colspan의 코드 구현은 다음과 같습니다.

1. 를 사용하여 HTML의 Colspan; 태그

코드:

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

로그인 후 복사

출력:

HTML 콜스팬

2. 를 사용하여 HTML의 Colspan; 태그

코드:

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

로그인 후 복사

출력:

HTML 콜스팬

HTML Colspan의 예

다음은 다양한 예시입니다.

예시 #1

colspan 속성이 와 함께 테이블 헤더와 함께 사용할 상태 예시입니다. 꼬리표. 아래 예와 같이 열을 두 부분으로 나눕니다.

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>

로그인 후 복사

출력:

HTML 콜스팬

예시 #2

이 예에서는 colspan 태그를 사용하여 열을 나누는 방법과 colspan 태그를 사용하여 실제 출력이 다음과 같이 생성되는 방법을 설명합니다.

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>

로그인 후 복사

출력:

예시 #3

이 예에서는 및 꼬리표. 이 속성을 사용하면 두 태그를 함께 사용할 수도 있습니다. 다음은 예제에 대한 코드이며 동일한 결과가 생성됩니다.

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>

로그인 후 복사

출력:

HTML 콜스팬

결론

위의 모든 정보를 통해 HTML colspan이 테이블 내에서 사용되는 속성이자 텍스트 영역 및 프레임셋 속성이라는 것을 알게 되었습니다.
사용자 요구 사항에 따라 테이블 열을 하나 이상의 셀로 나눕니다. 이 속성은 와 를 모두 지원합니다. 꼬리표. 여기에 포함된 값은 항상 양의 정수입니다.

위 내용은 HTML 콜스팬의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!