오늘 태그 이야기는 저번에 예고한 대로 table 태그의 열 병합 속성인 colspan의 사용법에 대해 간략하게 알아보도록 하자.
colspan은 열을 병합하는 세부 속성으로 td 태그의 속성 값이다. 사용방법은 그리 어렵지 않으나.. 이게 rowspan과 좀 헷갈리는 면이 있다.
필자만 그랬는지 잘 모르겠는데..
colspan이라는 태그 자체가 열 병합인 것은 헷갈리지 않으나.. 언듯, colspan으로 나온 결과물이 행병합처럼 느껴지기도 한다. 10여년 전 처음 태그를 접했을 때에는 참 헷갈려서 고생을 했던 부분이기도 하다.
다만, 자주 사용하다 보면 익숙해지고.. 어느순간 구분이 쉬워졌던 기억이 있다. table은 단순한 표 이상으로 사이트의 레이아웃 등을 만들 때 자주 사용하는 만큼 좀더 많은 연습을 권한다. 복잡한 표를 만들어 딱 30번만 연습해 보면 그 이후에는 헷갈리지 않으리라.. +_+
3개의 열을 병합해 1분기 란을 만들었다.
세개의 열을 병합했음으로 첫번째 tr태그의 두번째 th태그에 colspan="3"을 적용.
첫번째 tr태그의 열을 병합했음으로 나머지 th 태그는 넣지 않는다. 그리고, 다른 tr태그 안의 td태그에는정상적으로 열을 구현하면 되겠다.
th태그가 좀 낯선 분들도 계실 텐데.. th태그는 기본적으로 td 태그와 동일하다. colspan 역시 th 및 td 태그 모두에서 사용 가능한 속성값이기도 하다.
다만, th 태그는 저번 시간에도 이야기 했듯이.. 머릿말에 들어가는 태그이기 때문에 웹 봇이 인식하기에 수월하며 스크린 리더를 사용할 경우에는 이를 다르게 인식한다. 따라서, 접근성을 높여주는 태그임으로 가급적 머릿말에는 th태그를 사용하도록 하자.
오늘 colspan 예시 이야기에 이어 다음에는 rowspan 이야기를 이어서 해 보도록 하겠다.
