HTML 기본태그 / 테이블 태그

HTML 기본태그 / 테이블 태그

안녕하세요 AimHo 입니다.

이번에는 HTML 기본태그 세 번째 테이블태그에 대해 알아보겠습니다.

테이블태그를 아주 잘 활용한 것이 바로 캘린더 입니다.

---

테이블태그

여기서 사용되는 태그이름은 조금 많지만 어렵지 않습니다. 차근차근 하나씩 살펴보도록 하겠습니다.

태이블태그는 다음과 같은 계층구조로 작성해야 합니다.

   

      

         
 thead 태그 내부 
         
 thead 태그 내부 
      
   
   

      

         
 tbody 태그 내부 
         
 tbody 태그 내부 
      
      

         
 tbody 태그 내부 
         
 tbody 태그 내부 
      
   
   

      

         
 thead 태그 내부 
         
 thead 태그 내부 
      
   

thead 태그 내부	thead 태그 내부
tbody 태그 내부	tbody 태그 내부
tbody 태그 내부	tbody 태그 내부
thead 태그 내부	thead 태그 내부

HTML5에서는 위 예제에서 살펴본 복잡한 방법으로 표를 작성합니다.

하지만, 대부분의 개발자가 아래와 같은 간단한 방법으로 표를 생성합니다.

   

      
 th 태그 내부 
      
 th 태그 내부 
   
   
   

      
 td 태그 내부 
      
 td 태그 내부 
   
  
   

th 태그 내부	th 태그 내부
td 태그 내부	td 태그 내부

여기서 기억할 점이 있습니다.

웹 브라우저는 HTML 페이지가 표준과 맞지 않을 경우 표준 형식으로 자동 변환을 합니다.

따라서 위 코드 <tr> 상위에 <tbody>가 추가됩니다. 

지금은 상관 없지만 CSS를 배우게 되면 꼭 알아야 할 개념입니다.

th와 td 태그에는 아래와 같은 속성을 입력할 수 있습니다. 일종의 셀 병합입니다. 

colspan 속성을 사용하면 가로 방향이 늘어나고, rowspan 속성을 사용하면 세로방향이 늘어납니다.

   

   

      
 지역별 홍차 
   
   
   

      
 중국 
      
정산소종
   
  
   
기문
 
   
운남
 
     
   

      
 인도 및 스리랑카 
      
아삼
   
  
   
실론
 
   
디질링
 
   
닐기리
 
   

지역별 홍차
중국	정산소종
	기문
	운남
인도 및 스리랑카	아삼
	실론
	디질링
	닐기리

HTML4 표준을 알고 있다면 더 많은 속성이 있다고 기억할 것입니다.

하지만 HTML5 표준에서는 모두 사라졌다고 합니다.