[html - table] 테이블과 조금 복잡한 테이블 표현하기 (colspan, rowspan)

해당 포스트는 한빛소프트 책의 예제를 일부 사용하고 있습니다.

html에서 표를 그리는 방법을 간단히 알아보겠습니다.

일반적으로 사용되는 다음의 시간표를 그려볼께요. 

테이블 태그의 종류

태그이름	설명
table	표를 그리는 것을 선언
thead	표의 머리로 표의 첫행을 나타냄
tbody	표의 본문
tfoot	표의 꼬리로 위 테이블에서는 사용되지 않았다.
tr	표의 행으로 하나의 행을 감싸는 태그
th	제목요소로 보통 head 내부에 (월, 화, 수, 목, 금)은 th로 작성하였다.
td	일반적인 데이터로 1교시, 영어, 체육등은 td로 작성하였다.

조금 복잡한 테이블을 그려보겠습니다.

좀 복잡한 형태인데요, 지역별 홍차는 2칸을 차지고 중국은 총 3칸을 차지 하네요. 일단 코드를 보겠습니다.

이전 코드와 차이점이 있습니다. colspan과 rowspan 속성이 사용되었습니다.

colspan="2"라는 것은 열을 두칸 차지 한다는 의미로 지역별 홍차는 현재 두개의 열을 차지하고 있습니다.

lowspan="3"라는 것은 행을 두칸 차지 한다는 의미가 되겠죠? 

그런데 코드를 보니 조금 헷갈리는 면이 있죠? <tr>기준으로 입력하여 행을 하나씩 추가하면서 따라해보시면 좋을 것 같습니다.

테이블에서는 행 기준으로 생각하시면 편합니다. 제가 아래에 행 별로 색상을 칠했습니다.

지역별 홍차는 데이터 하나지만 하나의 행을 모두 차지 합니다.

그리고 다음 행에는 중국과 정산소종이 하나의 행을 이룹니다. 그런데 이때 중국은 3개의 행을 차지 하도록 lowspan을 주었습니다.

그러면 그 다음 행에 영향을 미치게되는데요, 하나의 행에 두개에 열을 작성한 위와 달리

기문 하나를 넣었습니다. 하나를 넣었지만 중국이 기문 옆까지 차지하여 하나의 행이 만족됩니다.

그리고 운남도 기문과 같습니다.

그 이하는 위에서 설명한 내용을 토대로 이해할 수 있습니다.

계속 설명한 내용과 별개로 위 코드에서 <table>밑에 <tbody>없이 바로 <tr>이 오는 것을 발견할 수 있습니다. <table> <tr> .... 이러한 형태는 정식적인 방법은 아니지만, 허용하고 실제로 브라우저에서는 내부적으로 아래와 같이 변형합니다. <table> <tbody> <tr> .... 이건 만의하나의 실수로 발생할 수 있는데요, css에서 table > tr로 접근할 시 문제가 발생할 수 있습니다.

챌린지로 다음의 표를 만들어 보세요.

재밌을 것 같지요??