미래학자
[html - table] 테이블과 조금 복잡한 테이블 표현하기 (colspan, rowspan) 본문
해당 포스트는 한빛소프트 책의 예제를 일부 사용하고 있습니다.
html에서 표를 그리는 방법을 간단히 알아보겠습니다.
일반적으로 사용되는 다음의 시간표를 그려볼께요.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>HTML Table Basic Page</title> | |
| </head> | |
| <body> | |
| <table border="1"> | |
| <thead> | |
| <tr> | |
| <th></th> | |
| <th>월</th> | |
| <th>화</th> | |
| <th>수</th> | |
| <th>목</th> | |
| <th>금</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>1교시</td> | |
| <td>영어</td> | |
| <td>국어</td> | |
| <td>과학</td> | |
| <td>미술</td> | |
| <td>기술</td> | |
| </tr> | |
| <tr> | |
| <td>2교시</td> | |
| <td>도덕</td> | |
| <td>체육</td> | |
| <td>영어</td> | |
| <td>수학</td> | |
| <td>사회</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> |
테이블 태그의 종류
태그이름 |
설명 |
table |
표를 그리는 것을 선언 |
thead |
표의 머리로 표의 첫행을 나타냄 |
tbody |
표의 본문 |
tfoot |
표의 꼬리로 위 테이블에서는 사용되지 않았다. |
tr |
표의 행으로 하나의 행을 감싸는 태그 |
th |
제목요소로 보통 head 내부에 (월, 화, 수, 목, 금)은 th로 작성하였다. |
td |
일반적인 데이터로 1교시, 영어, 체육등은 td로 작성하였다. |
조금 복잡한 테이블을 그려보겠습니다.
좀 복잡한 형태인데요, 지역별 홍차는 2칸을 차지고 중국은 총 3칸을 차지 하네요. 일단 코드를 보겠습니다.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>HTML Table Basic Page</title> | |
| </head> | |
| <body> | |
| <table border="1"> | |
| <tr> | |
| <th colspan="2">지역별 홍차</th> | |
| </tr> | |
| <tr> | |
| <th rowspan="3">중국</th> | |
| <td>정산소종</td> | |
| </tr> | |
| <tr><td>기문</td></tr> | |
| <tr><td>운남</td></tr> | |
| <tr> | |
| <th rowspan="4">인도 및 스리랑카</th> | |
| <td>아삼</td> | |
| </tr> | |
| <tr><td>실론</td></tr> | |
| <tr><td>다질링</td></tr> | |
| <tr><td>닐기리</td></tr> | |
| </table> | |
| </body> | |
| </html> |
이전 코드와 차이점이 있습니다. colspan과 rowspan 속성이 사용되었습니다.
colspan="2"라는 것은 열을 두칸 차지 한다는 의미로 지역별 홍차는 현재 두개의 열을 차지하고 있습니다.
lowspan="3"라는 것은 행을 두칸 차지 한다는 의미가 되겠죠?
그런데 코드를 보니 조금 헷갈리는 면이 있죠? <tr>기준으로 입력하여 행을 하나씩 추가하면서 따라해보시면 좋을 것 같습니다.
테이블에서는 행 기준으로 생각하시면 편합니다. 제가 아래에 행 별로 색상을 칠했습니다.
지역별 홍차는 데이터 하나지만 하나의 행을 모두 차지 합니다.
그리고 다음 행에는 중국과 정산소종이 하나의 행을 이룹니다. 그런데 이때 중국은 3개의 행을 차지 하도록 lowspan을 주었습니다.
그러면 그 다음 행에 영향을 미치게되는데요, 하나의 행에 두개에 열을 작성한 위와 달리
기문 하나를 넣었습니다. 하나를 넣었지만 중국이 기문 옆까지 차지하여 하나의 행이 만족됩니다.
그리고 운남도 기문과 같습니다.
그 이하는 위에서 설명한 내용을 토대로 이해할 수 있습니다.
<table> <tr> .... 이러한 형태는 정식적인 방법은 아니지만, 허용하고 실제로 브라우저에서는 내부적으로 아래와 같이 변형합니다. <table> <tbody> <tr> .... 이건 만의하나의 실수로 발생할 수 있는데요, css에서 table > tr로 접근할 시 문제가 발생할 수 있습니다. |
챌린지로 다음의 표를 만들어 보세요.
재밌을 것 같지요??
'HTML, CSS' 카테고리의 다른 글
| [HTTP Ajax요청] XMLHttpRequest(XHR), fetch API 사용하기 (0) | 2018.03.25 |
|---|---|
| HTML5 APIs (0) | 2018.03.17 |
| [HTML] 내 마음대로 HTML (0) | 2018.03.11 |
| [HTML, CSS] 블로그 기본 레이아웃 (0) | 2018.01.05 |
