04. <thead>, <tbody>, <tfoot>, <colgroup> 태그

<thead>, <tbody>, <tfoot> 태그

- 테이블에서 행 단위 콘텐츠를 각각 헤더, 몸체, 푸터 부분으로 구분하여 그룹핑하는 태그

- 테이블의 레이아웃에는 아무런 영향을 미치지 않음

- 태그의 사용 위치

<table border="1">

<thead>  <!-- thead { color : red } -->
	<tr> <th>과목</th><th>점수</th> </tr>
</thead>

<tbody>  <!-- tbody { color : green } -->
    <tr> <td>국어</td><td>90</td> </tr>
    <tr> <td>영어</td><td>95</td> </tr>
    <tr> <td>수학</td><td>85</td> </tr>
</tbody>

<tfoot> <!-- tfoot { color : blue } -->
	<tr> <td>평균</td><td>90</td> </tr>
</tfoot>

</table>

 

열 단위 스타일 지정

<colgroup> 태그

- 하나 이상의 열들을 모아서 한꺼번에 스타일을 지정하는 경우

- 태그 사용 위치

-> <table><caption><colgroup><thead><tr> ..... </table>

 

<col>태그

- 지정한 열에 대해서 서로 다른 포맷팅을 정의하는 태그

- <colgroup>태그 내에서만 사용

- 종료태그 없이 사용

- span = "n" 속성 -> 해당 태그의 스타일이 적용되는 열의 개수

 

** 열 단위 스타일 지정

<table border="1">
 <colgroup>
	<col class="subject">
	<col span="2" class="score">
	<col class="average">
 </colgroup>
<tr>
 <th>과목</th><th>중간시험</th><th>기말시험</th><th>평균</th>
</tr>
<tr>
 <td>국어</td><td>90</td><td>95</td><td>92.5</td>
</tr>
<tr>
 <td>영어</td><td>96</td><td>90</td><td>93.0</td>
</tr>
<tr>
 <td>수학</td><td>85</td><td>95</td><td>90.0</td>
</tr>
</table>