[attribute] HTML - rowspan 속성 ★ - 테이블셀 가로행 병항 (= 가로줄 병합 = rowspan속성 = 로우스팬속성)

1. rowspan 예제 - <td> 경우
2. rowspan 정의
3. rowspan 구문
4. rowspan 예제 - <th> 경우
5. rowspan 예제 - 속성값이 0인 경우

rowspan 예제 - <td> 경우

 

<style>

table, th, td {border: 1px solid black;}

</style>

<table>

  <tr>

    <th>언어</th>

    <th>기능</th>

    <th>파트</th>

  </tr>

  <tr>

    <td>HTML</td>

    <td>구조</td>

    <td rowspan="2">브라우저</td>

  </tr>

  <tr>

    <td>CSS</td>

    <td>디자인</td>

  </tr>

</table>

 

결과보기

rowspan 정의

 

테이블 셀의 가로행을 병합.

 

---

 

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

<td>, <th>

 

2. cf.

colspan 속성 - 세로열 병합 (= 세로줄수 병합)

 

3.

모든 브라우저 모두 지원.

 

rowspan 구문

 

• <td rowspan="number">...</td>
• <th rowspan="number">...</th>

 

---

[속성값]

 

number

병합할 셀의 행(=가로줄) 개수 지정.

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

  

rowspan 예제 - <th> 경우

 

<style>

table, th, td {border: 1px solid black;}

</style>

<table>

  <tr>

    <th>언어</th>

    <th>기능</th>

    <th rowspan="3">브라우저측 언어</th>

  </tr>

  <tr>

    <td>HTML</td>

    <td>구조</td>

  </tr>

  <tr>

    <td>CSS</td>

    <td>디자인</td>

  </tr>

</table>

 

결과보기

rowspan 예제 - 속성값이 0인 경우

※ 속성값이 0인 경우, 해당 셀 지점부터 마지막 가로행의 셀까지 병합.

 

<style>

table, th, td {border: 1px solid black;}

</style>

<table>

  <tr>

    <th>언어</th>

    <th>기능</th>

    <th rowspan=0>브라우저측 언어</th>

  </tr>

  <tr>

    <td>HTML</td>

    <td>구조</td>

  </tr>

  <tr>

    <td>CSS</td>

    <td>디자인</td>

  </tr>

</table>

 

결과보기