简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

HTML 콜스팬

PHPz
풀어 주다： 2024-09-04 16:47:53
원래의
1207명이 탐색했습니다.

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 html5 HTML Tutorial HTML Properties HTML tags
원천：php
이전 기사：HTML 진행 표시줄 다음 기사：HTML 파비콘 
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！