HTML 테이블 표 가로 및 세로 합치기 (td tr 병합 방법)

지난시간에는 테이블 (TABLE) 태그의 개념 정리와 간단한 표 만드는 방법에 대해서 확인해 봤습니다. 이번 시간에는 합치기를 알아보겠습니다.

 

보통 엑셀에서도 셀을 합치고 나누는 기능이 있는데, HTML 테이블 태그로도 합치기가 가능합니다. 나누기는 미리 표를 최대로 나눠진 상태에서 시작을 해야하는 부분이므로 별도로 나누는 기능은 필요하지 않습니다. 참고하시기 바랍니다.

 

합치기는 가로로 합치는 방법, 세로로 합치는 방법이 있습니다. 근데 사실 개념을 잘 살펴 보시면 합친다는게 아니라, 미리 합쳐질 칸을 계산해서 출력한다고 보시는게 더 정확할 것 같습니다. 말로는 햇갈리므로 다시 실제 예시를 살펴보면서 알아보겠습니다. 혹시 이전 강좌를 아직 못 보셨다면 한번 보시고 이 내용을 살펴보시면 많은 도움이 될 것입니다.

 

HTML 표 만들기 : 테이블 table tr td 태그 개념 정리 및 사용 방법

 

 

 

가로 3칸, 세로 7칸짜리 표를 만들어 보겠습니다. 현재 위에는 tr 요소가 총 6개로 나와있는데, 잘 못 스크린샷을 해서 그렇습니다. 총 7줄짜리 테이블 표 입니다.

 

 

 

정상적으로 구성된 태그라면 이렇게 잘 나올 것입니다. 현재 번호는 말씀드린대로 21번까지 나와야 정상입니다. 앞으로 제대로 스크린샷을 찍을게요 ㅠㅠ.

 

 

 

저는 1,2,3번을 모두 하나로 합친 칸을 만들어 보려고 합니다. 그렇다면 여기에서는 1번 셀을 오른쪽으로 두 칸을 더 합쳐진, 즉 3개의 가로 셀이 합쳐진 것 처럼 출력되게 하면 될 것입니다. 그래서 td 태그 안쪽에 colspan 이라는 태그를 사용합니다. 여기에 3을 입력함으로써 3개의 칸이 가로로 합쳐진 것 처럼 출력되게 만들 수 있습니다. 태그 사용 방법은 위처럼 만들어주시면 됩니다. 그리고 2,3번 td 태그는 삭제를 해도 되고, 주석처리를 하셔도 상관 없습니다.

 

 

 

코딩에 이상이 없다면 이렇게 정상적으로 출력이 될 것입니다.

 

 

 

이제 16번 셀을 세로로 2칸 합쳐지도록 해보겠습니다. 세로로 칸을 합치는 태그는 rowspan 입니다. 위처럼 구성하시면 됩니다.

 

 

 

그러면 보시는 것 처럼 16, 19번 셀이 합쳐진 것 처럼 출력이 됩니다. 이제 지금까지 알아본 방법을 총동원해서 한번 살짝 복잡한 표를 만들어 보겠습니다.

 

 

 

가로 x 세로 모두 25칸짜리 표 테이블을 위와같이 코딩해서 표현해 봤습니다. 1번은 가로로 5칸 모두 합쳐지도록, 6번은 세로로 4칸 합쳐지도록, 7번은 가로로 4칸, 13번은 세로로 2칸, 15번은 세로로 3칸, 22번은 가로로 2칸 합쳐지도록 만듭니다. 나머지 셀은 그대로 둡니다.

 

표 테이블을 합치고 나누고 하실 때에는 우선 각 칸이 모두 정상적으로 합쳐지기 전 상태라고 생각하시고 보시는게 편합니다. 그리고 나서 하나하나 셀 상태를 살피세요. 가령 6번의 경우라고 한다면 원래의 6번 셀 상태에서 현재 세로로 4칸 합쳐진 것이구나 하고 알 수 있습니다. 그러면 그대로 표현해주시면 됩니다. 처음이 좀 익숙하지 않아서 그렇지, 작성하다보시면 감이 오실 것입니다.

 

 

 

위의 테이블 태그를 구성한 최종 모습입니다. 이렇게 출력되면 정상적으로 코딩을 하신 것입니다.

 

 

 

숫자 대신 글씨를 넣어봅니다.

 

 

 

그렇습니다. 이렇게 정상적으로 테이블 표가 잘 표현되는것을 알 수 있습니다.

 

 

테이블 태그 합치기 응용편

 

 

이제 응용해 봅니다. 이렇게 구성하면 어떤 모양의 표가 완성이 될까요? colspan과 rowspan 태그를 잘 살펴보시고 어떻게 적용되는지 이해하도록 노력해 보세요.

 

 

 

이렇게 나오시면 정상적으로 코딩하신 것입니다.

 

 

 

테이블 태그도 스타일로 꾸밀 수 있습니다. 이건 그냥 참고만 하시면 될 것 같습니다. 지금까지 학원에서 배운 방법으로도 충분히 이 정도로 응용이 가능합니다.

 

 

 

한국의 차라고 하는 예제 표가 있어서 저도 따라해 봤습니다. 단 스타일만 추가해서 응용해봤는데, 꽤 재밌네요. 위처럼 태그를 구성하면 어떻게 출력되는지 알아보겠습니다.

 

 

 

그렇습니다. 이렇게 출력되면 테이블은 이제 기본 맥락을 어느정도 이해하신 것 입니다. 다시한번 말씀 드리지만, 테이블 셀이 복잡하게 합쳐진 표라 할지라도, 우선 첫번째 행부터 각 열이 합쳐져 있는지 유무를 먼저 따져보시면서 구성해 보세요. 그게 햇갈리지도 않고 쉽게 표를 만들 수 있는 방법입니다. 맨 위부터 차근차근 한칸한칸 분석하는 습관을 들이시면 도움이 많이 될 것입니다.

 

 

 

그러면 행과 열이 최소 2개 이상씩 합쳐진 셀 표현은 어떻게 할까요? 이론상이라면 td 안쪽에 colspan과 rowspan을 같이 사용하면 될 것 같은데 말입니다. 이게 가능할까요? 그렇습니다. 가능합니다. 위처럼 td 태그 안에 두 개를 같이 쓰면 입력한 숫자만큼의 셀이 합쳐지게 됩니다. 결과를 볼까요?

 

 

 

위의 코딩대로 구성한 결과입니다. 이렇게 1번 셀이 가로로 4칸, 세로로 4칸 합쳐진것을 알 수 있습니다. 이 방법을 토대로 한번 응용해서 멋진 표를 만들어 보시기 바랍니다. 끝.

 

 

[출처] https://rgy0409.tistory.com/2891