HTML기초 테이블 태그로 표 만들기 방법

웹상에서 표를 만드려면 테이블 태그를 이용하여 만들 수 있습니다. 이미지를 넣거나 문장을 구성하는 것보다 조금 더 복잡하고 어려운데요. 표는 행과 열이 있어서 각각의 행과 열 공간을 만들기 위해서는 꽤 많은 태그가 필요합니다. 티스토리 글쓰기에도 표만들기가 있어서 표의 HTML을 수정할 때 유용하게 사용할 수 있습니다. HTML/CSS 에도 보면 테이블 태그에 대해 있으므로 알아두시면 블로그 운영하는데에 큰 도움이 될 것입니다. 얼핏 보기에는 복잡하고 어려워 보이지만 쉽게 표를 만드는 방법에 대해서 알려드리겠습니다.

 

표를 만들고 꾸미는데에는 여러가지 태그가 필요하지만 이번에는 간단하게 표를 만드는 방법에 대해서만 알아보겠습니다. 추가로 포스팅을 할 때 <table> 태그에 들어가는 부가적인 속성에 대해서도 알아보고 셀합병까지도 공부하도록 하겠습니다.

 

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

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

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

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

 

 

※ 필요한 태그 - <table>, <tr>, <td>, <th>, border="x" 속성

 

▼ <table> 태그를 이용하여 표의 자리를 만듭니다.

 

 

▼ <table> 태그 안에 <tr> 태그를 이용하여 행의 공간을 만들어 줍니다. 저는 3행을 만들게습니다. <td> 태그를 이용해서 열의 공간을 먼저 만들어 주어도 상관 없지만 통상적으로 행을 먼저 만들어 주는 것이 편합니다.

 

 

▼ <tr> 태그 안에 <td> 태그를 이용하여 열을 만들어 줍니다. 예를 들어 1행에 2열을 넣고 싶다면 행마다 2개의 <td> 태그를 입력시키면 됩니다. 아래의 이미지를 보고 알아 보겠습니다.

 

 

▼ 위의 HTML로 만든 표입니다. 표는 만들었지만 테두리 선이 보이지 않지요?

 

 

 

▼ 테두리 선을 보이게 하기 위해서는 <table> 태그에 border="x" 속성을 사용해야 합니다.

 

▼ 추가로 1행에 <th> 태그를 이용해서 제목 셀을 만들고 싶다면 1행에 <td>대신 <th>를 입력합니다. 제목셀을 만들고 싶은 곳에 <th> 태그를 이용하면 됩니다.

 

 

▼ 마지막으로 border="x" 속성을 이용한 테두리를 입힌 것과, <th> 태그를 이용한 제목셀을 만든 결과를 보겠습니다.

 

1행 1열과 1행 2열의 진해진 글씨가 보이시나요? 제목셀이 지정되었고 테두리가 입혀졌습니다.

아무래도 표는 행과 열이 있다보니 계속 보고 또 봐도 헷갈리고 복잡합니다. 위의 방법처럼 하나하나 차근차근 풀어나간다면 쉽게 만들 수 있을 것입니다.