[attribute] HTML - span 속성 ★ - 테이블 (열/열그룹) 병합 개수 지정 (= span속성 = 스팬속성) ※ (콜태그/콜그룹태그) 병합/합치기

1. span 예제 - <col> 경우
2. span 정의
3. span 구문
4. span 예제 - <colgroup> 경우

span 예제 - <col> 경우

 

<style>

table, th, td {border: 1px solid gray; border-collapse:collapse;}

th,td {padding:5px 10px;}

col:nth-child(1) {background-color:pink}

col:nth-child(2) {background-color:yellow}

</style>

<table>

  <colgroup>

    <col span="2">

    <col>

  </colgroup>

  <tr>

    <th>기능</th>

    <th>언어</th>

    <th>게시판</th>

  </tr>

  <tr>

    <td>구조</td>

    <td>HTML</td>

    <td>https://homzzang.com/b/html</td>

  </tr>

  <tr>

    <td>디자인</td>

    <td>CSS</td>

    <td>https://homzzang.com/b/css</td>

  </tr>

</table>

 

결과보기

span 정의

 

테이블의 (열:<col> / 열그룹: <colgroup>) 요소의 병합 개수 지정.

 

---

 

1. span 속성 사용 가능 태그 종류

<col>, <colgroup>

 

2.

<colgroup> 내의 열에 다른 속성을 정의하려면, <colgroup> 태그 내에서 <col> 태그를 사용.

 

3.

모든 브라우저 지원.

 

span 구문

 

• <col span="number">
• <colgroup span="number">...</colgroup>

 

---

[속성값]

 

number

병합합 개수 지정.

 

span 예제 - <colgroup> 경우

 

<style>

table, th, td {border: 1px solid gray; border-collapse:collapse;}

th,td {padding:5px 10px;}

colgroup:nth-child(1) {background-color:pink}

colgroup:nth-child(2) {background-color:yellow}

</style>

<table>

  <colgroup span="2"></colgroup>

  <colgroup></colgroup>

  <tr>

    <th>기능</th>

    <th>언어</th>

    <th>게시판</th>

  </tr>

  <tr>

    <td>구조</td>

    <td>HTML</td>

    <td>https://homzzang.com/b/html</td>

  </tr>

  <tr>

    <td>디자인</td>

    <td>CSS</td>

    <td>https://homzzang.com/b/css</td>

  </tr>

</table>

 

결과보기