HTML 테이블 표 col 그리고 colgroup 태그로 가로 사이즈 조정하기
html CSS를 사용해서 테이블의 사이즈를 조정할 수도 있지만, 간단한 방법도 존재합니다. 바로 col 태그 입니다. col은 Column 의 약자로 "행" 이라고 하며, 가로를 의미합니다. 엑셀에서 위로 쭈욱 선택한게 바로 행 입니다. row는 "열" 이라는 뜻으로 가로를 뜻 합니다. 처음에 이게 좀 햇갈려서 테이블 태그 구성하는게 어려웠습니다. 아주 사소한 것이지만, 기본 개념을 잘 숙지하신다면 차후에 나오는 여러가지 응용 방법에 대해 능숙하게 해결하실 수 있을 것 입니다.
지난 시간에 배웠던 테이블 태그 구성과는 조금 다른게 눈에 보이실 것입니다. 우선 헤드 안쪽의 스타일은 신경 쓰시지 마세요. 단지 표의 스타일을 바꾼 정도일 뿐 입니다. 중요한건 본문의 table 요소들 입니다.
참고로 table 의 border 값을 1을 준것은 테두리를 준 것이며, 그 뒤에 나오는 가로 사이즈는 말 그대로 가로 사이즈 크기를 정의하기 위함입니다. summary 태그는 아마 처음 등장할텐데, 이것은 실제 웹 상에서는 노출되지 않는 기능입니다. 주석과 비슷한 경우죠. summary 태그는 접근성을 위한 태그로 시각 장애인분들을 위한 기능이라고 생각하시면 됩니다. 요약내용을 summary 에 추가해서 텍스트로 넣어주면, 음성 기능을 활용하여 해당 표가 어떤 내용을 담고있는지, 이 태그에 적힌 문장을 읽어주게 됨으로써 알아들을 수 있게 되는 것 입니다.
그리고 col 과 colgroup 에 대한 태그가 사용되었습니다. 오늘의 주제이기도 한 이 태그는 다름아닌 행에 대한 그룹화를 의미합니다. col 은 하나의 행에 대한 그룹이고, 이 col의 집합이 바로 colgroup 입니다.
사용 방법은 간단합니다. table 태그의 스타일에 표의 전체 가로 사이즈를 지정하고, 이것을 colgroup화 하여 각 col별로 사이즈를 퍼센트로 지정하면 됩니다. 방법은 위에 나온 이 부분입니다.
<colgroup>
<col width = "1~100%">
<col width = "1~100%">
<col width = "1~100%">
</colgroup>
수치는 자유이며, 행의 개수에 따라 <col width = "1~100%"> 이 요소도 추가하면 됩니다. 위의 코딩에 따라 웹에서는 어떤식으로 표가 출력되는지 확인해 보겠습니다.
네. 이렇게 행 사이즈가 분배되서 나타나게 됩니다. table 스타일에 가로를 600px 로 고정시켰고, 이 600픽셀의 사이즈를 구분 행은 20%를, 태블릿pc 행과 스마트폰 행이 각각 40%씩 사용한 것입니다. 이 방법대로 행 사이즈를 자유롭게 조정해 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
