[html] table 에서 <col>과 <colgroup> 사용하기

html 에서 <table> 태그를 사용할 때 CSS를 사용해서 테이블의 사이즈를 조정할 수도 있지만, html 내에서 조정할 수 있는 간단한 방법이 있습니다. 바로 <col>과 <colgroup> 입니다.

 

<colgroup>과 <col> 태그는 <caption>의 아래, <tr><td>의 위에 위치해야 합니다.

게시판 예시를 보겠습니다.

<table>
    <caption> 자유게시판 </caption>
    <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>게시판 예시를 만들어요</td>
            <td>홍길동</td>
            <td>2022.05.05</td>
        </tr>
    </tbody>
</table>

 

<caption> tag는 무엇인가요?

 

<caption>은 테이블의 정보에 대해 기재합니다. 

음성 브라우저나 점자 브라우저에서는 표를 읽어줄 때 힘들기 때문에 접근성을 높이기 위해 

<caption> 을 이용해 이 표가 어떤 표인지를 설명해줘야 합니다. 

만약 표시되지 않는 것을 원한다면 display: none; 을 통해 보이지 않도록 해줍니다.

 

게시판에서는 번호를 표시하는 열, 제목을 표시하는 열, 작성자를 표시하는 열, 작성일을 표시하는 열 등을 만듭니다.

이 열들은 모두 width를 다르게 설정해줘야하는데, 일일이 모든 th와 td에 class를 주어 width를 설정해주는 일은 굉장히 번거롭습니다. 이럴 때 사용하는 것이 <col> tag입니다.

 

열의 갯수만큼 <col> tag를 작성하고, 그 <col> tag들을 <colgroup> tag를 이용해 감싸줍니다.

아래 예시에서는 열이 4개 이므로 <col> tag 4개를 작성합니다. 

style을 줄 필요가 없더라도, 갯수를 맞추기 위해 4개를 모두 작성해야 하며

<col span='n'>로 n개의 열을 합쳐서 사용할 수 있습니다.

inline style로 <col> tag내에 style을 작성해줍니다. (width나 background-color를 지정할 수도 있습니다.)

<table>
    <caption> 자유게시판 </caption>
    <colgroup>
    	<col style="width: 100px;">
    	<col style="width: 700px;">
    	<col style="width: 150px;">
    	<col style="width: 150px;">
    <colgroup>
    <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>게시판 예시를 만들어요</td>
            <td>홍길동</td>
            <td>2022.05.05</td>
        </tr>
    </tbody>
</table>

 

또는 table의 width를 지정해준 후 <col>에는 백분율로 %를 적어주면 table width에서 지정된 퍼센트만큼의 크기를 가지게 됩니다.