표를 만드는 태그 2

표를 만드는 태그 2

1. <thead>, <tbody>, <tfoot> 태그 - 표 구조 정의하기

• 표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문 그리고 요약 부분이 있는 부분으로 표의 구조를 나눌 수 있는데 이때 사용하는 태그들이 제목 부분인 <thead>, 본문 부분인 <tbody>, 요약 부분인 <tfoot> 태그입니다.
• 위와 같이 표의 구조를 정의하면 시각장애인들도 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있습니다.

기본형 : <thead>
                         <tr></tr>
               </thead>
               <tbody>
                         <tr></tr>
               </tbody>
               <tfoot>
                          <tr></tr>
              </tfoot>

thead, tbody, tfoot 구조된 만든 표

 

<div class="exam1">
    <table>
        <thead>
            <tr>
                <th>구분</th>
                <th>1분기</th>
                <th>2분기</th>
                <th>3분기</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>서울</td>
                <td>10</td>
                <td>5</td>
                <td>20</td>
            </tr>
            <tr>
                <td>경기</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
            </tr>
            <tr>
                <td>부산</td>
                <td>11</td>
                <td>6</td>
                <td>7</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>합계</th>
                <td>29</td>
                <td>20</td>
                <td>37</td>
            </tr>
        </tfoot>
    </table>
</div>    

2. <col>, <colgroup> 태그 - 여러 열 묶어 스타일 지정하기

• 표에서 하나의 열에 스타일을 지정하거나 열을 몇 개씩 묶어 스타일을 한꺼번에 지정할 수도 있습니다.
• <col> 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용하는 것으로 닫는 태그가 없습니다. 만약 <col> 태그를 사용해 둘 이상의 열을 묶어 같은 스타일을 지정하려면 span 속성을 이용해 몇 개를 함께 묶어줄지 지정할 수 있습니다.
• <colgroup> 태그를 사용해서도 여러 열을 묶어 스타일을 적용할 수 있는데 <colgroup> 태그 안에 묶는 열의 개수만큼 <col>태그를 넣으면 됩니다.
• 주의할 점은 <col>태그와 <colgroup>태그는 <caption>태그 뒤와 <tr>, <td> 태그 전에 사용해야 한다는 점입니다.
• 또한 <colgroup>태그 안에 있는 <col> 태그를 비롯해 단독으로 사용한 <col> 태그의 개수와 표의 열의 개수가 같아야 합니다.
• 표를 만들 때 <tr>태그로 행을 조절하므로 따로 행을 묶는 태그는 없지만 열을 만드는 태그는 없으므로 <col>태그나 <colgroup>태그를 사용하게 됩니다.

기본형 : <col>

 

기본형 : <colgroup>
                     <col>
               </colgroup>

 

col, colgroup 구조로 만든 표

<div class="exam2">
    <table>
        <caption>예제</caption>
        <colgroup>
            <col>
            <col span="2" style="background-color: pink;">
            <col style="background-color: powderblue;">
        </colgroup>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div><br><br>

 

 

 

참고 : HTML5 + CSS3 웹 표준의 정석