HTML 테이블(table) 안 tr 태그 div 태그로 감싸지지 않음

 

특정 화면에서 html table 을 만들고

 

tbody 영역 안 tr 태그가 여러 개 있는데

 

이 tr 태그들을 그룹화하여 동적으로 제어하려고

 

div 태그로 tr 태그를 나눠서 감싼 뒤 

 

화면을 로드하여 렌더링 된 요소를 보면

 

div 태그는 생성되지 않는다.

 

<!-- tr태그를 div로 감싼 경우 -->

<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>주소</th>
        </tr>
    </thead>
    <tbody>
    	<div class="seoul">
           <tr>
               <td>김철수</td>
               <td>20</td>
               <td>서울</td>
           </tr>
        </div>
        <div class="busan">
           <tr>
               <td>홍길동</td>
               <td>19</td>
               <td>부산</td>
           </tr>
        </div>
    </tbody>
</table>

 

div가 tr 태그를 감싼 형태로 렌더링 되지 않음

 

 

 

이런 경우에는 하나의 table 안에 tbody 태그를

 

여러 개 생성할 수 있으니 tbody로

 

그룹화해서 활용할 수 있다.

 

<!-- tbody를 여러 개 만드는 경우 -->

<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>주소</th>
        </tr>
    </thead>
    <tbody class="seoul">
           <tr>
               <td>김철수</td>
               <td>20</td>
               <td>서울</td>
           </tr>

    </tbody>
    <tbody class="busan">
           <tr>
               <td>홍길동</td>
               <td>19</td>
               <td>부산</td>
           </tr>
   </tbody>
</table>

 

tbody를 여러 개 생성하고 class로 구분지어 활용