티스토리 뷰

HTML 태이블 태그로 표를 만들기는 이전 시간에 배워보았습니다. 가볍게 복습하고 셀 합병에 대해서 알아보겠습니다. HTML의 기초는 이미지 삽입, 순서 목록 만들기, 셀 합병하기 등 간단한 태그로만 되어 있어서 어렵지 않습니다. 그래도 그 중에서 표 만들기가 조금 까다롭습니다. 이것을 잘 공부하면 다음 공부도 쉽게 할 수 있습니다.

 

테이블 태그에서 가장 중요한 것은 테이블 태그 안에 행 태그를 만들고 행 태그 안에 열 태그를 만들어 주어야 한다는 것입니다. 말로 설명하니 상당히 복잡해 보이네요. 이전의 글을 보면 쉽게 알 수 있습니다. 합병도 마찬가지로 생각할게 많은데요. 익숙해 지도록 계속해서 반복 학습이 중요합니다. 표 만들기 보다 셀 합병이 더 복잡합니다.

 

눈썹있는 모나리사 : 무엇이든 알아가는 것을 좋아하고 습득한 지식은 사람들과 함께 공유합니다.

강에서 당신이 손을 담가 만지는 물은 흘러가는 마지막 물이자 다가오는 첫 물이다. 지금 이 시간이 바로 그렇다 - 레오나르도 다빈치

세상의 모든 지식을 함께 공유하고 알아가는 곳 @

진솔한 생각을 적어가는 곳 @

 

 

※ 프로그램 : 노트++  / 사용 태그 : <table> , <tr>, <td>, <th> / 사용 속성 : colspan="", rowspan=""

 

이전시간에 아래의 태그로 표를 만들어 보았습니다.

 

 

▼ 이렇게 기본적인 표가 만들어집니다. 1행1열 1행2열 ....

 

 

▼ 여기서 우리는 2행 1,2열을 합병하고 싶습니다. 열의 합병은 <td> 태그 뒤에 colspan="" 속성을 붙여서 합병합니다. colspan="합병할 개수" 입니다. 합병을 했으니 2행 2열은 합병되고 없는 열입니다. 그래서 2행 2열을 삭제해 줍니다.

 

 

▼ 위와 같이 합병하면 아래와 같은 표가 만들어 집니다.

 

 

▼ 만약 2행 2열 태그를 그대로 두면 어떻게 될까요?

 

 

▼ 아래와 같이 2행 1열의 합병된 뒤의 열에 표시됩니다. 어떻게 되는지 알겠죠?

 

 

▼ 이번에는 행의 합병을 해보겠습니다. <td> 태그 안에 rowspan="" 속성을 이용합니다. 행 합병이라고 해서 <tr>태그에 속성을 넣는 것이 아닙니다. 마찬가지로 합병되는 행은 삭제해 줍니다.

 

 

▼ 아래와 같이 합병이 잘 되었습니다. 행과 열 두개를 다 합병해 보았는데 어떻게 되는지 아시겠나요?

 

 

▼ 혹시라도 헷갈려서 <tr> 태그에 속성을 넣었다고 해봅시다. 어떻게 될까요? 합병이 될것 같나요?

 

 

아무런 이상이 없습니다. 아예 인식을 못하는 것이지요. 항상 합병할 때에는 <td> 태그나, <th> 태그에서 사용 가능합니다.

 

합병하는 방법이 약간 복잡하면서도 쉽습니다. 위의 내용을 잘 이해하고 따라 한번 해보면 쉽게 이용 할 수 있습니다.

 

댓글