[개미의 걸음 HTML&CSS 4차시] 테이블을 만드는 태그(table,tr,th,td,thead,tbody,tfoot,caption,figcaption)

<table>태그

<table>
    <caption>
         제목
    </caption>
    <tr>
        <td> 내용 </td>
        <td> 내용 </td>
              :
              :
    </tr>
      :
      :
</table>  

• 표의 제목을 붙이고 싶을 때는 <caption>나 <figure>&<figcaption>태그를 이용
• <caption>태그는 제목이 중앙 위쪽에 표시됨
• <figcaption>태그는 <table>태그보다 앞에 있으면 표 위에, </table>태그보다 뒤에 있으면 표 아래에 제목이 표시됨
• <tr>은 테이블에서의 한 행을 의미
• <th>는 테이블에서의 제목 셀들을 의미
• <td>는 테이블에서의 데이터들을 의미
• colspan 속성을 사용하면 행 병합
• rowspan 속성을 사용하면 열 병합

 

 

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

<table>
    <thead>
        <tr>
            <th> 컬럼명1 </th>
            <th> 컬럼명2 </th>
                  :
                  :
        </tr>
    </thead>
    <tbody>
        <tr>
            <th> 데이터1 </th>
            <td> 데이터2 </td>
                   :
                   :
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th> 요약1 </th>
            <td> 요약2 </td>
                   :
                   :
        </tr>         
    </tfoot>
</table>

표의 제목부분, 내용부분, 요약부분을 구조화하기 위해 사용하는 태그

• 실제 출력되는 화면에서는 별 차이가 없음
• 하지만 코딩 내용을 볼때, 구조화되어있어 쉽게 확인 가능
• 화면 낭독기를 통해서도 표의 구조를 쉽게 파악 가능

 

 

<col>, <colgroup>

<colgroup>
    <col>
    <col span="스타일을 변경할 열의 갯수" style="background-color:>
      :
      :
</colgroup>

column[열]의 스타일을 한번에 변경하기 위해 사용

• <col>태그는 위에서 보듯 닫는 태그가 없으며 속성값을 통해 열에 스타일을 적용
• <col>만 작성할 경우 스타일 변경없음[뒷부분의 열들만 스타일을 지정하고 싶을 때 사용]
• <col>태그의 span속성을 이용하면 여러개의 열의 스타일 지정 가능!
• <col>태그의 style속성을 이용해서 배경색 지정 가능 

※ <thead>, <tbody>를 사용했을 때와 사용하지 않았을 때의 차이를 확인가능

※ 앞에 <col>태그만 넣으면 그 열의 스타일 변경없이 다음 열부터 스타일 변경 가능