오늘은 table태그, 그리고 table태그와 항상 함께 다니는 tr, td태그에 대해 알아보고 마지막으로 간과하기 쉬운 th태그에 대해 대해 추가로 알아보도록 하자.
table태그는 상대적으로 많이 사용되는 태그이고 단순히 표를 만들기 위한 목적 외에도 레이아웃이나 소제목 등에 자주 활용 및 응용되는 중요한 태그인 만큼 몇회에 걸쳐 좀더 자세하게 다뤄보도록 하겠다.
오늘은 기본적인 table태그의 사용법에 대한 이야기이고 다음 포스트에서는 셀병합 그리고 이후의 포스트에서는 긴 표를 사용할 때의 table 태그 사용법에 대한 이야기를 이어서 해 보자.
아무튼, table, tr, td, th 태그에 대해 요점을 정리해 보자면 아래와 같다.
1. <table> : 모든 표와 관련된 속성과 하위태그를 담는 태그로 하위태그는 이 table 태그 안에 존재해야 한다.
2. <tr> : 행을 추가하는 태그로 tr은 table row의 약자이다.
3. <td> : 셀을 추가하는 태그로 td는 talbe data의 약자이다.
4. <th> : 기본적으로 그 사용법은 td태그와 동일하지만 행이나 열의 머릿말을 나타내는데 사용한다.(table heading의 약자)
그 구체적인 활용 예시를 살펴보면 아래와 같다.
1. th태그이든 td 태그이든 빈공간이라 하더라도 해당 요소를 사용해 표현해 줘야 표가 어긋나지 않는다.
2. th태그와 td 태그는 그 사용방법이 동일하지만 th는 머릿말에 사용한다.
3. th 태그의 속성값으로 scope를 사용해 '열'에 관한 머릿말인지 '행'에 관한 머릿말인지를 표현해 준다.
결과물은 아래와 같다.
머릿말을 나타내주는 th 태그를 사용해 주면 가운데 정렬이 되면서 진하게 표시되는 것을 확인할 수 있다. 뭐.. 이런 부분은 CSS로 콘트롤이 가능한 부분이기 때문에 큰 의미는 없지만.. 아무튼, 기본 속성값이 적용되는 태그가 바로 th태그이다.
th태그는 사용하지 않아도 표를 표현하는데 무리는 없다. 다만, 가급적 웹 접근성의 측면에서 그 사용을 권한다.
th태그를 사용하게 되면 실질적으로 스크린 리더를 사용하는 사용자들에게 좋고 검색엔진의 색인기능 향상에 도움이 된다. 검색엔진 친화적으로 웹 페이지를 구성하는게 갈수록 중요해지는 만큼 표 하나를 만들더라도 이러한 th 태그 등을 활용하는게 바람직한 면이 있다.
또한, 외부 표현의 측면에서 보자면 CSS를 사용할 때 td 태그와는 다르게 별도로 콘트롤 하는데 편리함으로 여러모로 th태그는 유용한 태그이다. 지나치지 말고 적극~!! th 태그를 사용해 보자. 이와 더불어 scope 속성값도 함께!!
