[HTML] th 란 무엇인가?

html5로 작성된 코드를 보다가 table 코드에서 "<th></th>"를 보았습니다.

 

 

1.테이블(table)에 추가된 th

th가 무엇인가 해서 찾아보니 테이블에서 헤더 역활을 하는 td의 경우 th로 작성하고 합니다.

(참고 : W3C HTML5 - th element)

 

일반적으로 테이블은 데이터를 나열하는 용도로 사용합니다.

그렇기 때문에 헤더는 거의 매번 필요하죠.

하지만 이전까지는 헤더를 구분하기위해서 따로 스타일을 적용해야 했습니다.

 

스타일 시트에서 th를 작성하면 따로 스타일을 적용할 필요가 없습니다.

 

 

2.이전 방식과 비교

이전에는 헤더로 사용할 td나 tr에 직접 스타일을 지정했습니다.

 

 

 

 

 

이렇게 하면 table와 tr에 스타일을 지정해주어야 한다는 단점이 잇습니다.

 

하지만 th를 이용하면

 

 

이렇게 테이블 테그만 적용해도 원하는 스타일을 적용시킬 수 있죠.

물론 td용 스타일을 적용되지 않습니다.

 

단, th용 기본 스타일이 적용되어 있습니다.

텍스트 정렬 : 중앙정렬

텍스트 가로 정렬  : 미들

텍스트 굵기 : bold

 

3. 활용

상황에 따라서 세로줄에도 적용이 가능합니다.

 

 

 

 

 

마무리

테이블을 작성할때 항상 가장문제 되는 것이 헤더 줄입니다.

일반적으로 헤더줄은 데이터와 다른 스타일을 적용해야 하기 때문이죠.

th가 html 4.01에서 적용되었다는데....왜 지금까지 몰랐던거지;;;

 

html5 레퍼런스를 보고서야 이런 테그가 있다는걸 알았습니다 ㅡ,.ㅡ;;;