table을 만들어 보자~!(table태그)

안녕하세요~ 오늘은 table을 만드는 방법에 대해서 알아보겠습니다. 

테이블은 아주 유용하게 사용 할 수 있습니다. 게시판에도 가능하고 다른 여러방면에서도 사용 할 수도 있습니다. 

예제

  






    
구분
    
이름
 
    
나이
  
  

    
남자
    
빌게이츠
 
    
100
  
  

    
여자
    
스티브잡스
 
    
94

사용방법

 
 


    
구분
    
이름
 
    
나이
  
  

    
남자
    
빌게이츠
 
    
100
  
  

    
여자
    
스티브잡스
 
    
94

테이블의 구조를 보셨으면 이제 설명을 해드리겠습니다. 

간단한 옵션들 부터 먼저 보시면 아래와 같습니다. 

td : 글씨의 굵기를 굵게합니다. 

boder : 테이블의 테두리 굵기 

bodercolor : 테이블의 테두리 색상

width, height : 넓이, 높이

align : 정렬 (left/center/right)

bgcolor : 컬러

cellpadding: 문자와 셀 사이의 간격

cellspacing : 셀과 셀 사이의 간격

colspan : 열을 n개만큼의 셀을 하나로 합친다(열은 오른쪽으로)

rowspan : 행을 n개만큼의 셀을 하나로 합친다(행은 아래쪽으로)

colgroup : colgroup은 테이블의 한 행을 기준으로 일괄적인 작업을 적용할 때 사용하는 태그로 width값이나 height값을 일률적으로 적용할때 아주 유용하게 사용할 수 있씁니다.   

사용법은 기존 css에 적용하는것과 달리 width=""를 사용합니다. 하지만! table에 class 및 id값을 주어서 스타일을 직접 수정하셔도 별반 차이가 없습니다. 현재 사용방법에는 cellpadding 및 cellspacing을 적용했는데 만약 두개가 적용 되지않으면 아래와 같이 나타납니다. 

cellpadding 및 cellspacing을 제외했을 경우

  


    
구분
    
이름
 
    
나이
  
  

    
남자
    
빌게이츠
 
    
100
  
  

    
여자
    
스티브잡스
 
    
94

테이블 작업을 하면서 필요한 요소들에 대해서 알아봤습니다. 더 검색해보시고 필요하신내용은 찾아보셔서 작업하고 연습하시길 바랍니다 ^^