[attribute] HTML - colspan 속성 ★ - 병합할 가로셀 개수 지정 (= colspan속성 = 콜스팬속성)

1. colspan 예제 - <td> 경우
2. colspan 정의
3. colspan 구문
4. colspan 예제 - <th> 경우

colspan 예제 - <td> 경우

 

<style>

 

table, th, td {

    border: 1px solid black; 

    border-collapse:collapse;

    padding:20px 30px;

}

</style>

 

<table>

  <tr>

    <th>상품</th>

    <th>가격</th>

  </tr>

  <tr>

    <td>옷</td>

    <td>200원</td>

  </tr>

  <tr>

    <td>신발</td>

    <td>300운</td>

  </tr>

  <tr>

    <td colspan="2">합계: 500원</td>

  </tr>

</table>

 

결과보기

colspan 정의

 

병합할 가로 셀 개수 지정.

 

---

 

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

<td>, <th>

 

2. cf.

rowspan 속성 = 가로행 병합 (= 가로줄수 병합)

 

3.

모든 브라우저 지원.

 

colspan 구문

 

• <td colspan="number">
• <th colspan="number">

 

---

[속성값]

 

number

병합할 가로 셀 개수 지정.

• 숫자를 따옴표로 안 감싸도 작동.
• colspan="0"은 셀을 테이블 섹션(thead, tbody, tfoot)의 마지막 열까지 병합. (※ Chrome, Firefox, Opera 12(및 이전 버전)는 rowspan="0" 지원.)

 

colspan 예제 - <th> 경우

 

<style>

table, th, td {

    border: 1px solid black; 

    border-collapse:collapse;

    padding:20px 30px;

}

</style>

<table>

  <tr>

    <th colspan="2">상품 가격</th>

  </tr>

  <tr>

    <td>옷</td>

    <td>200원</td>

  </tr>

  <tr>

    <td>신발</td>

    <td>300운</td>

  </tr>

</table>

 

결과보기