HTML table

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

테이블은 가장 큰 요소가 <table> 요소임

 

<table>
    <caption>He-Man and Skeletor facts</caption>

그 후 <caption> 요소를 사용해서 표의 설명 또는 제목을 나타낼 수 있음

 

<colgroup>
        <col>
        <col span="2" class="batman">
        <col span="2" class="flash">
</colgroup>

<colgroup> 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용함

해당 예시는 <col> 요소를 사용해 span="2"로 지정해 "학번", "이름" 열이 두개로 묶인 것을 확인할 수 있음

 

*table에서 scope 속성 이용: scope 속성: 테이블의 th or td등의 해당 셀에게 사용하고 컬럼인지 행인지의 여부를 알려주는 역할임

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=gounsori90&logNo=220541241817 참고

 

테이블 안 컨텐츠는 <thead>, <tbody>, <tfoot>안에 나눠서 작성

그 안에서도 <tr> 다음 <th> or <td>로 나뉨

 

**colspan 속성 & rowspan 속성

 기본형 : <td colspan="합칠 셀의 개수"> 내용 </td>
          <th colspan="합칠 셀의 개수"> 내용 </th>
 -
 기본형 : <td rowspan="합칠 셀의 개수"> 내용< /td>
 기본형 : <th rowspan="합칠 셀의 개수"> 내용< /th>

 

caption말고 figcaption 사용하기

https://2018-start.tistory.com/28?category=792137 참고