#HTML 강좌 - 테이블(TABLE) 테그

안녕하세요 낭만고양이 입니다. 오늘은 table 테그에 대해서 배워보도록 하겠습니다.

기본적으로 tr, th, td를 이용해서 테이블의 기본 구조는 어떻게 제작되는 지, 또한 테이블의 셀 병합은 어떻게 일어나는지에 대하여 공부하는 시간을 가지도록 하겠습니다. 제 블로그에 처음 접속하셨다면 아래 링크를 따라가서 공부하시고 오시면 더욱 많은 공부가 될것입니다.

#HTML 강좌 - 표제테크(h) 줄바꿈테그(br/p) 수평선테그(hr)

#HTML 강좌 - 글자의 서식 , 주석처리 방법

#HTML 강좌 - 이미지 삽입

#HTML 강좌 - 링크걸기

#HTML 강좌 - FONT 테그

■  테이블(TABLE) 테그

웹 표준이 잘 지켜지지 않았던 예전에는 table 테그를 홈페이지 만들때 레이아웃의 용도로 많이 사용했습니다. 하지만 요즘은 table 테그를 이용해서 레이아웃을 잡지는 않습니다. 접근성에 문제가 생길수있기 때문입니다. 요즘은 도표를 만들때 많이 사용합니다. 

기본적인 테이블 테그는 아래와 같습니다.

   

    

    
상품명
    
단가
    
수량
    
합계
  
  

    
감자
    
5,000 원
    
10
    
50,000 원
  
  

    
고구마
    
2,000 원
    
10
    
20,000 원
  
  

※ 위 소스가 제대로 안보이면 아래 텍스트 파일을 다운받으세요.

첨부파일 다운 →  

table.txt

위 소스를 다운받아서 test.htm 으로 저장한후 실행하보면 아래와 같이 뜰것입니다.

※ 위의 HTML 소스 관련 설명 

<table>~</table> : 테이블 테그의 시작과 끝을 나타냅니다

<tbody>~</tbody> : 여러 개의 행을 하나로 묶어줍니다. 소스에서 빠뜨려도 무방합니다. 

<tr>~</tr> : table row의 약자입니다.  "행"을 뜻하며 표의 각 행은 이 태그로 시작해서 닫혀야 합니다.

<td>~</td> : table data의 약자입니다. 셀이라고 생각하면됩니다. 실제 내용을 입력하는 부분입니다.

<th>~</th> : 해당 테이블의 제목 셀은 th 테그를 사용합니다. 제목이라서 글씨가 좀더 찐하게 나옵니다.

border="1" : 표의 굵기가 1 픽셀이라는 뜻입니다.

cellpadding="10" : 셀의 안 여백입니다. 여백을 줘야 글자와 선사이의 여백이 있어서 보기가 좋습니다.

cellspacing="0" : 셀의 바깥 여백입니다. "0"으로 하면 선이 하나로 보여서 보기가 좋습니다.

지금까지는 테이블의 기본 테그에 대해서 배웠습니다. 이제 조금 응용해서 셀병합하는 방법에 대해서 알려드리겠습니다. 엑셀이나 한글을 사용하시다보면 표를 만들때 셀을 병합하는 경우가 있는데요 그러면 웹상에서 테이블 테그로는 어떻게 셀을 병합하는지 알아보겠습니다.

 

  

   
목록
   
가격
  
  

   
상품명
   
수량
  
  

   
감자
   
100개
   
80,000원
  
 

※ 위 소스가 제대로 안보이면 아래 텍스트 파일을 다운받으세요.

첨부파일 다운 →  

table2.txt

위 소스를 다운받아서 test.htm 으로 저장한후 실행하보면 아래와 같이 뜰것입니다.

※ 위의 HTML 소스 관련 설명 

위 이미지를 보면, 두 번의 셀 병합이 있습니다. 하나는 '목록' 셀이 가로로 두 칸을 차지하고, 다른 하나는 '가격' 셀이 세로로 두 칸을 차지하고 있습니다. 이럴 때 사용하는 것이 colspan 속성과 rowspan 속성입니다. 'colspan'은 가로로 합치는 것입니다. 'rowspan'은 세로로 합치는 것입니다. 이 두가지 속성은 th(제목셀) 또는 td에 사용할 수 있으며, 속성 값으로 병합할 셀의 숫자를 적습니다. 

처음에는 헷갈리고 어렵지만 직접 표를 몇번 만들어보시면 금방 익숙해지고 쉬워질것입니다. 모두 화이팅 하시기 바랍니다. 다음 강좌에서 찾아뵙겠습니다. 

제 글이 도움이 되셨다면  "공감 (♡)" 한번씩 클릭해주시고 응원의 댓글들도 남겨주세요.