상세 컨텐츠

본문 제목

[html 테이블] 행 또는 열 합치기, colspan, rowspan

HTML & WEB

by 어뮤징 라이프 2017. 4. 4. 14:00

본문

반응형
HTML에서 표를 만들때 사용하는 태그를 TABLE(테이블)태그라고 부르는데요, Table 태그는 행과 열을 구성하는 여러 태그들을 포함하여 표를 만들 수 있는 태그입니다. 지난 번, table 태그를 이용하여 표 만드는 법을 알아봤는데요, 오늘은 표에서 행과 열을 합칠수 있는 colspan 태그와 rowspan 태그에 대해서 알아보겠습니다. <table> 태그를 이용하여 표 만들기가 아직 익숙하지 않으신 분들은 지난번 포스팅을 참조해주세요.






표에서 각 셀을 만드는 태그는 <td> 태그와 <th> 태그입니다. <td> 태그는 행을 추가하며 <th> 태그는 셀을 추가하는 태그를 뜻합니다. 표에서 행이나 열을 합칠때는 행 방향 또는 열 방향으로 합치게 되므로 <td> 태그와 <th> 태그를 사용하게 됩니다.


표에서 행 또는 열 합치기

colspan : 표에서 열을 합치는 태그

colspan 태그는 <th> 태그 또는 <td> 태그 안에서 사용되며 1개 또는 그 이상의 행을 합치는데 사용합니다.

예시 : <td colspan=""합칠 열의 개수"> ~ </td>


rowspan : 표에서 행을 합치는 태그

rowspan 태그 또한 <th> 태그 또는 <td> 태그 안에서 사용되며 1개 또는 그 이상의 열을 합치는데 사용합니다.

만약 열 3개를 합친다고 가정하면 <td colspan="3"> 내용 </td> 로 표기합니다.
마찬가지로 행 4개를 합친다고 가정하면 <td rowspan="4"> 내용 </td> 로 표기할 수 있습니다.

이상, html 표 작성에서 행 또는 열 합치는 태그에 대해서 알아보았습니다. 도움이 되셨길 바래요 ^ ^


반응형

관련글 더보기