[html/css] table / 표의 구조를 나타내는 태그 <thead>, <tbody>, <tfoot>과 열에 동일하게 속성을 적용하는 <colgroup>, <col/>

앞전 시간에 table 표에 들어가는 태그 tr, th, td를 배웠다.

https://yerica.tistory.com/26

[html/css] 테이블 태그 <table>,<th>,<tr> ,<td>와 표를 꾸며주는 속성 colspan, rowspan, border-collapse

오늘은 좀더 세분화 하여 tr, th, td를 감싸고 구분하는 태그를 배워보도록 하겠다.

---

<thead>, <tbody>, <tfoot>

       

table 태그 안에 들어가는 태그로 표의 구조를 나타낸다.

thead, tbody, tfoot 으로 구성되어있으며 각각의 태그 안에 tr, th, td가 들어가는 형식으로 구성되어있다.

thead는 표의 제목 영역을 나타내는 태그로 보통 안에 제목 태그인 th가 자주 들어간다.

표의 구조를 나타내는 태그
<thead></thead>	표의 최상단에 위치하고 보통 제목 영역을 나타낸다.
<tbody></tbody>	표의 내용을 나타내는 영역이다.
<tfoot></tfoot>	표 내용의 요약내용을 나타내는 영역으로, 필수로 들어가는 요소는 아니다.

/* 기본형 */
<table>
    <thead>
        <tr>
            <th>제목</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>내용</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>요약</td>
        </tr>
    </tfoot>
<table>

<colgroup>, <col/>

<colgroup>, <col/> 은 세로 줄을 동일하게 같은 스타일링을 적용하고자 할때 사용하는 태그이다.

둘 이상의 열을 묶어 스타일을 지정하려면 span 속성을 이용해 동일한 스타일을 줄 수 있다.

/* 예시 */
<col span="2"/>

 

colgroup은 col을 묶는 부모영역의 역할을 하며, col의 개수는 실제 table을 만든 행의 개수와 동일해야한다.

예를들어 3열 4행의 표를 만든다고 가정했을 때, col의 개수는 4개가 들어가면 되는 것이다.

/* 3열 4행의 colgruop 예시 */
<colgroup>
    <col />
    <col />
    <col />
    <col />
</colgroup>

 

col에 스타일을 줄 때는 클래스명을 부여하여 스타일에서 적용할 수 도 있고,

태그에 바로 width="숫자" height="숫자" 속성을 넣어서 줄 수 있다. 

/* 각각의 열에 width와 height 주기 */
<colgroup>
    <col width="500"/>
    <col heith="500"/>
    <col width="500" height="500"/>
    <col span="2" width="500" height="500"/>
</colgroup>