table을 조회 결과에 따라 동적으로 그려주는 작업 중에 있다.
각 div 하위에 있는 tr, td들을 조건에 따라 동적으로 다뤄줘야 했다.
조건에 맞게 각 tr들을 div로 묶어줬다.
<table>
<colgroup>
...
</colgroup>
<tbody>
<div class="firstDiv">
<tr></tr>
<tr></tr>
</div>
<div class="secondDiv">
<tr></tr>
<tr></tr>
</div>
<div class="thirdDiv">
<tr></tr>
<tr></tr>
</div>
</tbody>
</table>
잉?! 그런데 제어가 안됐다🤔 바로 개발자도구를 확인해보니
사진처럼 div가 table 바깥으로 빠져서 생성되고 있었다.
찾아보니 table 내부, tr 외부에는 div태그를 사용할 수 없다고 한다.
대신에 tbody를 사용해서 제어하면 된다.
<table>
<colgroup>
...
</colgroup>
<tbody class="firstDiv">
<tr></tr>
<tr></tr>
</tbody>
<tbody class="secondDiv">
<tr></tr>
<tr></tr>
</tbody>
<tbody class="thirdDiv">
<tr></tr>
<tr></tr>
</tbody>
</table>
div 태그를 사용했을 때와는 다르게 두개의 tr태그가 각 tbody에 잘 담겨있는 것을 확인할 수 있다.
추가적으로 공식 문서를 확인해보면
thead는 한 테이블당 하나씩만 가능하지만 tbody는 여러개 사용할 수 있다고 되어있다.
공식문서 예시를 살펴보면
tbody안에서 tr, th 태그를 이용해서 각 블록의 헤드 역할을 부여할 수 있다.
[참고]