찾다

집  >  기사  >  웹 프론트엔드  >  HTML 콜스팬

HTML 콜스팬

PHPz
PHPz원래의
2024-09-04 16:47:531227검색

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>

출력:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html Integer define count for using Length Attribute number this column table td th kind excel
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML 진행 표시줄다음 기사：HTML 진행 표시줄

관련 기사

더보기